@tresjs/core 1.4.0 → 1.5.0

package/dist/core/useRenderer/component.d.ts

@@ -14,7 +14,10 @@ export declare const TresCanvas: import("vue").DefineComponent<{
     powerPreference: PropType<"high-performance" | "low-power" | "default">;
     preserveDrawingBuffer: BooleanConstructor;
     clearColor: StringConstructor;
-    windowSize: BooleanConstructor;
+    windowSize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -28,7 +31,10 @@ export declare const TresCanvas: import("vue").DefineComponent<{
     powerPreference: PropType<"high-performance" | "low-power" | "default">;
     preserveDrawingBuffer: BooleanConstructor;
     clearColor: StringConstructor;
-    windowSize: BooleanConstructor;
+    windowSize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     shadows: boolean;
     physicallyCorrectLights: boolean;

package/dist/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v1.4.0
- * (c) 2022
+ * version: v1.5.0
+ * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { computed as N, watch as O, inject as L, ref as b, defineComponent as k, shallowRef as W, reactive as Ce, toRefs as ne, provide as B, onBeforeUnmount as Se, h as Q } from "vue";
-import { useWindowSize as re, createEventHook as G, useRafFn as Me, resolveUnref as p, useElementSize as xe, useDevicePixelRatio as Ee, unrefElement as U } from "@vueuse/core";
+import { inject as M, computed as ne, watch as O, ref as b, defineComponent as V, shallowRef as j, reactive as ye, toRefs as re, provide as $, onBeforeUnmount as Ce, h as Q } from "vue";
+import { createEventHook as N, useRafFn as Se, resolveUnref as d, useWindowSize as xe, useElementSize as Me, useDevicePixelRatio as Ee, unrefElement as F } from "@vueuse/core";
 import * as X from "three";
-import { PerspectiveCamera as $, OrthographicCamera as ae, Vector3 as Pe, Color as j, BufferAttribute as Te, Clock as Re, Scene as Le, LoadingManager as be, TextureLoader as Ae, PCFShadowMap as Oe, LinearEncoding as Y, NoToneMapping as Z, WebGLRenderer as Be } from "three";
+import { PerspectiveCamera as I, OrthographicCamera as ae, Vector3 as Pe, Color as z, BufferAttribute as Te, Clock as Le, Scene as Re, LoadingManager as Ae, TextureLoader as be, PCFShadowMap as Be, LinearEncoding as Y, NoToneMapping as Z, WebGLRenderer as Oe } from "three";
 var $e = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))($e || {});
-const E = {
+const T = {
   cameras: []
 }, Ie = 45;
-let S;
+let x;
 function oe() {
-  const { width: e, height: n } = re(), { setState: r } = me();
-  function c(t = "Perspective", s) {
-    if (t === "Perspective") {
-      const { near: u, far: a, fov: o } = s || {
+  const e = M("aspect-ratio"), { setState: n } = me();
+  function r(l = "Perspective", m) {
+    if (l === "Perspective") {
+      const { near: t, far: c, fov: u } = m || {
         near: 0.1,
         far: 1e3,
         fov: Ie
       };
-      S = new $(o, i.value, u, a), E.cameras.push(S);
+      x = new I(u, (e == null ? void 0 : e.value) || 1, t, c), T.cameras.push(x);
     } else {
-      const { left: u, right: a, top: o, bottom: h, near: m, far: w } = s || {
+      const { left: t, right: c, top: u, bottom: a, near: s, far: p } = m || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,34 +33,34 @@ function oe() {
         near: 0.1,
         far: 1e3
       };
-      S = new ae(u, a, o, h, m, w), E.cameras.push(S);
+      x = new ae(t, c, u, a, s, p), T.cameras.push(x);
     }
-    return E.cameras.push(S), S;
+    return T.cameras.push(x), x;
   }
-  const i = N(() => e.value / n.value), l = N(() => E.cameras[0]);
-  function f() {
-    l.value instanceof $ && (l.value.aspect = i.value), l.value.updateProjectionMatrix();
+  const o = ne(() => T.cameras[0]);
+  function i() {
+    o.value instanceof I && e && (o.value.aspect = e.value), o.value.updateProjectionMatrix();
   }
-  function g(t) {
-    const s = L("camera");
-    t && s && (s.value = t, r("camera", s.value)), E.cameras.push(t), t instanceof $ && (t.aspect = i.value), t.updateProjectionMatrix();
+  function f(l) {
+    const m = M("camera");
+    l && m && (m.value = l, n("camera", m.value)), T.cameras.push(l), l instanceof I && e && (l.aspect = e.value), l.updateProjectionMatrix();
   }
-  return O(i, f), {
-    activeCamera: l,
-    createCamera: c,
-    updateCamera: f,
-    pushCamera: g
+  return e && O(e, i), {
+    activeCamera: o,
+    createCamera: r,
+    updateCamera: i,
+    pushCamera: f
   };
 }
 const ee = "[TresJS ▲ ■ ●] ";
-function _() {
-  function e(c, i) {
-    console.error(`${ee} ${c}`, i || "");
+function D() {
+  function e(o, i) {
+    console.error(`${ee} ${o}`, i || "");
   }
-  function n(c) {
-    console.warn(`${ee} ${c}`);
+  function n(o) {
+    console.warn(`${ee} ${o}`);
   }
-  function r(c, i) {
+  function r(o, i) {
   }
   return {
     logError: e,
@@ -68,119 +68,131 @@ function _() {
     logMessage: r
   };
 }
-const R = b({ ...X, uuid: X.MathUtils.generateUUID() });
-delete R.value.Scene;
-let P;
+const A = b({ ...X, uuid: X.MathUtils.generateUUID() });
+delete A.value.Scene;
+let L;
 function se(e, n = "Tres") {
-  const { logMessage: r, logError: c } = _();
-  !P && e && (P = e);
+  const { logMessage: r, logError: o } = D();
+  !L && e && (L = e);
   const { createComponentInstances: i } = ie(n);
   return {
-    extend: (f) => {
-      if (!f) {
-        c("No objects provided to extend catalogue");
+    extend: (l) => {
+      if (!l) {
+        o("No objects provided to extend catalogue");
         return;
       }
-      R.value = Object.assign(R.value, f);
-      const g = i(b(f));
-      r("Adding objects to catalogue", { objects: f, catalogue: R.value.uuid }), P && g.forEach(([t, s]) => {
-        P._context.components[t] || P.component(t, s);
+      A.value = Object.assign(A.value, l);
+      const m = i(b(l));
+      r("Adding objects to catalogue", { objects: l, catalogue: A.value.uuid }), L && m.forEach(([t, c]) => {
+        L._context.components[t] || L.component(t, c);
       });
     },
-    catalogue: R
+    catalogue: A
   };
 }
-const T = (e) => typeof e < "u", _e = (e) => typeof e == "function", I = (e) => !!e && e.constructor === Array;
+const R = (e) => typeof e < "u", _e = (e) => typeof e == "function", _ = (e) => !!e && e.constructor === Array;
 function De(e) {
   return typeof e == "number" ? [e, e, e] : e instanceof Pe ? [e.x, e.y, e.z] : e;
 }
 function Fe(e) {
-  return e instanceof j ? e : Array.isArray(e) ? new j(...e) : new j(e);
+  return e instanceof z ? e : Array.isArray(e) ? new z(...e) : new z(e);
 }
 const ze = ["rotation", "scale", "position"];
 function ie(e) {
-  const { logMessage: n, logError: r } = _();
-  function c(t, s) {
-    T(t) && T(s) && Object.entries(t).forEach(([u, a]) => {
-      const o = u.replace(/(-\w)/g, (h) => h[1].toUpperCase());
-      s.setAttribute(o, new Te(...a));
+  const { logMessage: n, logError: r } = D();
+  function o(t, c) {
+    R(t) && R(c) && Object.entries(t).forEach(([u, a]) => {
+      const s = u.replace(/(-\w)/g, (p) => p[1].toUpperCase());
+      c.setAttribute(s, new Te(...a));
     });
   }
-  function i(t, s) {
-    T(t) && T(s) && Object.entries(t).forEach(([u, a]) => {
-      const o = u.replace(/(-\w)/g, (h) => h[1].toUpperCase());
-      if (!(o === "args" || a === void 0)) {
-        ze.includes(o) && a && (a = De(a)), t.ref && (t.ref = s);
+  function i(t, c) {
+    R(t) && R(c) && Object.entries(t).forEach(([u, a]) => {
+      const s = u.replace(/(-\w)/g, (p) => p[1].toUpperCase());
+      if (!(s === "args" || a === void 0)) {
+        ze.includes(s) && a && (a = De(a)), t.ref && (t.ref = c);
         try {
-          if (s[o] && T(s[o].set))
-            s[o].set(...I(a) ? a : [a]);
+          if (c[s] && R(c[s].set))
+            c[s].set(..._(a) ? a : [a]);
           else {
-            if (a === "" && (a = !0), _e(s[o])) {
+            if (a === "" && (a = !0), _e(c[s])) {
               if (u === "center" && !a)
                 return;
-              s[o](...I(a) ? a : [a]);
+              c[s](..._(a) ? a : [a]);
               return;
             }
-            s[o] = a;
+            c[s] = a;
           }
-        } catch (h) {
-          r(`There was an error setting ${o} property`, h);
+        } catch (p) {
+          r(`There was an error setting ${s} property`, p);
         }
       }
     });
   }
-  function l(t) {
-    var a;
-    const s = /^Symbol\(Fragment\)$/g, u = /^Symbol\(Text\)$/g;
-    if (s.test(t.type.toString()))
-      return t.children.map((o) => l(o));
+  function f(t) {
+    var a, s;
+    const c = /^Symbol\(Fragment\)$/g, u = /^Symbol\(Text\)$/g;
+    if (c.test(t.type.toString()))
+      return t.children.map((p) => f(p));
     if (u.test(t.type.toString()))
       return;
     {
-      const o = t.type.name.replace(e, ""), { catalogue: h } = se(), m = L("catalogue") || h;
-      let w;
-      return m && ((a = t == null ? void 0 : t.props) != null && a.args ? m != null && m.value[o] ? w = new m.value[o](...t.props.args) : r(`There is no ${o} in the catalogue`, m == null ? void 0 : m.value.uuid) : w = new m.value[o]()), t != null && t.props && (o === "BufferGeometry" ? c(t.props, w) : i(t.props, w)), w;
+      const p = t.type.name.replace(e, ""), { catalogue: C } = se(), h = M("catalogue") || C;
+      let v;
+      if (h)
+        if ((a = t.children) != null && a.default) {
+          const E = t.children.default().map((w) => f(w));
+          v = new h.value[p](...E.flat().filter(Boolean));
+        } else
+          (s = t == null ? void 0 : t.props) != null && s.args ? h != null && h.value[p] ? v = new h.value[p](...t.props.args) : r(`There is no ${p} in the catalogue`, h == null ? void 0 : h.value.uuid) : v = new h.value[p]();
+      return t != null && t.props && (p === "BufferGeometry" ? o(t.props, v) : i(t.props, v)), n(`Created ${p} instance`, v), v;
     }
   }
-  function f(t, s, u) {
+  function l(t, c, u) {
     if (u.default && (u != null && u.default())) {
-      const a = u.default().map((o) => l(o));
-      return new t(...a.flat().filter(Boolean));
+      const a = u.default().map((s) => f(s));
+      if (t.name === "Group") {
+        const s = new t();
+        return a.forEach((p) => {
+          s.add(p);
+        }), s;
+      } else
+        return new t(...a.flat().filter(Boolean));
     } else
-      return s.args ? new t(...s.args) : new t();
+      return c.args ? new t(...c.args) : new t();
   }
-  function g(t) {
-    return Object.entries(t.value).filter(([s, u]) => {
-      var a, o;
-      return (o = (a = u == null ? void 0 : u.prototype) == null ? void 0 : a.constructor) == null ? void 0 : o.toString().includes("class");
-    }).map(([s, u]) => {
-      const a = `${e}${s}`, o = k({
+  function m(t) {
+    return Object.entries(t.value).filter(([c, u]) => {
+      var a, s;
+      return (s = (a = u == null ? void 0 : u.prototype) == null ? void 0 : a.constructor) == null ? void 0 : s.toString().includes("class");
+    }).map(([c, u]) => {
+      const a = `${e}${c}`, s = V({
         name: a,
-        setup(h, { slots: m, attrs: w, ...M }) {
-          const { scene: D } = pe(), v = L("local-scene") || D, x = L("catalogue"), { pushCamera: C } = oe();
-          let y = f(u, w, m);
-          return i(w, y), (y instanceof $ || y instanceof ae) && C(y), y.isObject3D && (v == null || v.value.add(y)), v != null && v.value && y.isFog && (v.value.fog = y), M.expose(y), n(a, {
-            sceneuuid: v == null ? void 0 : v.value.uuid,
-            catalogue: x == null ? void 0 : x.value.uuid,
-            props: h,
-            slots: m.default ? m.default() : void 0,
-            attrs: w,
-            ctx: M,
-            scene: v
+        setup(p, { slots: C, attrs: h, ...v }) {
+          const { scene: E } = pe(), w = M("local-scene") || E, P = M("catalogue"), { pushCamera: S } = oe();
+          let y = l(u, h, C);
+          return i(h, y), (y instanceof I || y instanceof ae) && S(y), y.isObject3D && (w == null || w.value.add(y)), w != null && w.value && y.isFog && (w.value.fog = y), v.expose(y), n(a, {
+            sceneuuid: w == null ? void 0 : w.value.uuid,
+            catalogue: P == null ? void 0 : P.value.uuid,
+            props: p,
+            slots: C.default ? C.default() : void 0,
+            attrs: h,
+            ctx: v,
+            scene: w
           }), () => {
           };
         }
       });
-      return [a, o];
+      return [a, s];
     });
   }
   return {
-    createComponentInstances: g,
+    createComponentInstances: m,
     processProps: i,
-    createInstanceFromVNode: l
+    createInstanceFromVNode: f
   };
 }
-const ce = G(), ue = G(), le = G(), te = new Re(), { pause: Ue, resume: je, isActive: Ve } = Me(
+const ce = N(), ue = N(), le = N(), te = new Le(), { pause: Ue, resume: Ve, isActive: je } = Se(
   () => {
     const e = te.getElapsedTime(), n = te.getDelta();
     ce.trigger({ delta: n, elapsed: e }), ue.trigger({ delta: n, elapsed: e }), le.trigger({ delta: n, elapsed: e });
@@ -193,11 +205,11 @@ function fe() {
     onLoop: ue.on,
     onAfterLoop: le.on,
     pause: Ue,
-    resume: je,
-    isActive: Ve
+    resume: Ve,
+    isActive: je
   };
 }
-const Ne = W(new Le());
+const Ne = j(new Re());
 function pe() {
   return {
     scene: Ne
@@ -209,130 +221,130 @@ function ke(e) {
     r.name && (n.nodes[r.name] = r), r.material && !n.materials[r.material.name] && (n.materials[r.material.name] = r.material);
   }), n;
 }
-async function Xe(e, n, r, c, i) {
-  const { logError: l } = _(), f = new e();
-  i && i(f), r && r(f);
+async function Xe(e, n, r, o, i) {
+  const { logError: f } = D(), l = new e();
+  i && i(l), r && r(l);
   const t = (Array.isArray(n) ? n : [n]).map(
-    (s) => new Promise((u, a) => {
-      f.load(
-        s,
-        (o) => {
-          o.scene && Object.assign(o, ke(o.scene)), u(o);
-        },
+    (c) => new Promise((u, a) => {
+      l.load(
         c,
-        (o) => a(l("[useLoader] - Failed to load resource", o))
+        (s) => {
+          s.scene && Object.assign(s, ke(s.scene)), u(s);
+        },
+        o,
+        (s) => a(f("[useLoader] - Failed to load resource", s))
       );
     })
   );
-  return I(n) ? await Promise.all(t) : await t[0];
+  return _(n) ? await Promise.all(t) : await t[0];
 }
 async function Ye(e) {
-  const n = new be(), r = new Ae(n), c = (i) => new Promise((l, f) => {
+  const n = new Ae(), r = new be(n), o = (i) => new Promise((f, l) => {
     r.load(
       i,
-      (g) => l(g),
+      (m) => f(m),
       () => null,
       () => {
-        f(new Error("[useTextures] - Failed to load texture"));
+        l(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (I(e)) {
-    const i = await Promise.all(e.map((l) => c(l)));
+  if (_(e)) {
+    const i = await Promise.all(e.map((f) => o(f)));
     return e.length > 1 ? i : i[0];
   } else {
-    const { map: i, displacementMap: l, normalMap: f, roughnessMap: g, metalnessMap: t, aoMap: s } = e;
+    const { map: i, displacementMap: f, normalMap: l, roughnessMap: m, metalnessMap: t, aoMap: c } = e;
     return {
-      map: i ? await c(i) : null,
-      displacementMap: l ? await c(l) : null,
-      normalMap: f ? await c(f) : null,
-      roughnessMap: g ? await c(g) : null,
-      metalnessMap: t ? await c(t) : null,
-      aoMap: s ? await c(s) : null
+      map: i ? await o(i) : null,
+      displacementMap: f ? await o(f) : null,
+      normalMap: l ? await o(l) : null,
+      roughnessMap: m ? await o(m) : null,
+      metalnessMap: t ? await o(t) : null,
+      aoMap: c ? await o(c) : null
     };
   }
 }
-const A = Ce({});
+const B = ye({});
 function me() {
   function e(r) {
-    return A[r];
+    return B[r];
   }
-  function n(r, c) {
-    A[r] = c;
+  function n(r, o) {
+    B[r] = o;
   }
   return {
-    state: A,
-    ...ne(A),
+    state: B,
+    ...re(B),
     getState: e,
     setState: n
   };
 }
-const d = W(), V = b(!1);
+const g = j(), U = b(!1);
 function We(e, n, r) {
   const {
-    alpha: c = !0,
+    alpha: o = !0,
     antialias: i = !0,
-    depth: l,
-    logarithmicDepthBuffer: f,
-    failIfMajorPerformanceCaveat: g,
+    depth: f,
+    logarithmicDepthBuffer: l,
+    failIfMajorPerformanceCaveat: m,
     precision: t,
-    premultipliedAlpha: s,
+    premultipliedAlpha: c,
     stencil: u,
     shadows: a = !1,
-    shadowMapType: o = Oe,
-    physicallyCorrectLights: h = !1,
-    outputEncoding: m = Y,
-    toneMapping: w = Z,
-    toneMappingExposure: M = 1,
-    context: D = void 0,
-    powerPreference: v = "default",
-    preserveDrawingBuffer: x = !1,
-    clearColor: C,
+    shadowMapType: s = Be,
+    physicallyCorrectLights: p = !1,
+    outputEncoding: C = Y,
+    toneMapping: h = Z,
+    toneMappingExposure: v = 1,
+    context: E = void 0,
+    powerPreference: w = "default",
+    preserveDrawingBuffer: P = !1,
+    clearColor: S,
     windowSize: y = !1
-  } = ne(r), { width: F, height: z } = p(y) ? re() : xe(n), { pixelRatio: H } = Ee(), { pause: de, resume: ge } = fe(), he = N(() => F.value / z.value), K = () => {
-    d.value && (d.value.setSize(F.value, z.value), d.value.setPixelRatio(Math.min(H.value, 2)));
+  } = re(r), { width: k, height: W } = d(y) ? xe() : Me(n), { pixelRatio: G } = Ee(), { pause: de, resume: ge } = fe(), H = ne(() => k.value / W.value), K = () => {
+    g.value && (g.value.setSize(k.value, W.value), g.value.setPixelRatio(Math.min(G.value, 2)));
   }, J = () => {
-    d.value && (d.value.shadowMap.enabled = p(a), d.value.shadowMap.type = p(o), d.value.toneMapping = p(w) || Z, d.value.toneMappingExposure = p(M), d.value.outputEncoding = p(m) || Y, C != null && C.value && d.value.setClearColor(Fe(p(C))), d.value.physicallyCorrectLights = p(h));
-  }, we = () => {
-    const q = U(e);
-    if (d.value || !q)
+    g.value && (g.value.shadowMap.enabled = d(a), g.value.shadowMap.type = d(s), g.value.toneMapping = d(h) || Z, g.value.toneMappingExposure = d(v), g.value.outputEncoding = d(C) || Y, S != null && S.value && g.value.setClearColor(Fe(d(S))), g.value.physicallyCorrectLights = d(p));
+  }, he = () => {
+    const q = F(e);
+    if (g.value || !q)
       return;
-    d.value = new Be({
+    g.value = new Oe({
       canvas: q,
-      alpha: p(c),
-      antialias: p(i),
-      context: p(D),
-      depth: p(l),
-      failIfMajorPerformanceCaveat: p(g),
-      logarithmicDepthBuffer: p(f),
-      powerPreference: p(v),
-      precision: p(t),
-      stencil: p(u),
-      preserveDrawingBuffer: p(x),
-      premultipliedAlpha: p(s)
+      alpha: d(o),
+      antialias: d(i),
+      context: d(E),
+      depth: d(f),
+      failIfMajorPerformanceCaveat: d(m),
+      logarithmicDepthBuffer: d(l),
+      powerPreference: d(w),
+      precision: d(t),
+      stencil: d(u),
+      preserveDrawingBuffer: d(P),
+      premultipliedAlpha: d(c)
     });
-    const { setState: ye } = me();
-    ye("renderer", d.value), J(), K(), ge(), V.value = !0;
-  }, ve = () => {
-    d.value && (d.value.dispose(), d.value = void 0, V.value = !1, de());
+    const { setState: ve } = me();
+    ve("renderer", g.value), J(), K(), ge(), U.value = !0;
+  }, we = () => {
+    g.value && (g.value.dispose(), g.value = void 0, U.value = !1, de());
   };
-  return O([F, z, H], K), O(
-    [a, o, m, h, w, M, C],
+  return O([H, G], K), O(
+    [a, s, C, p, h, v, S],
     J
   ), O(
     () => [e, n],
     () => {
-      U(e) && U(n) && we();
+      F(e) && F(n) && he();
     },
     { immediate: !0, deep: !0 }
   ), {
-    renderer: d,
-    isReady: V,
-    dispose: ve,
-    aspectRatio: he
+    renderer: g,
+    isReady: U,
+    dispose: we,
+    aspectRatio: H
   };
 }
-const Ge = k({
+const Ge = V({
   name: "TresCanvas",
   props: {
     shadows: Boolean,
@@ -345,19 +357,21 @@ const Ge = k({
     powerPreference: Object,
     preserveDrawingBuffer: Boolean,
     clearColor: String,
-    windowSize: Boolean
+    windowSize: { type: Boolean, default: !1 }
   },
   setup(e, { slots: n, attrs: r }) {
-    const { logError: c } = _(), i = b(), l = b(), { renderer: f, dispose: g, aspectRatio: t } = We(i, l, e), s = W();
-    return B("camera", s), B("renderer", f), B("aspect-ratio", t), n.default && !n.default().some((u) => u.type.name === "Scene") && c("TresCanvas must contain a Scene component."), n.default && !n.default().some((u) => {
+    const { logError: o } = D(), i = b(), f = b(), { renderer: l, dispose: m, aspectRatio: t } = We(i, f, e);
+    $("aspect-ratio", t), $("renderer", l);
+    const c = j();
+    return $("camera", c), n.default && !n.default().some((u) => u.type.name === "Scene") && o("TresCanvas must contain a Scene component."), n.default && !n.default().some((u) => {
       var a;
       return (a = u.type.name) == null ? void 0 : a.includes("Camera");
-    }) && c("Scene must contain a Camera component."), Se(() => g()), () => {
+    }) && o("Scene must contain a Camera component."), Ce(() => m()), () => {
       if (n.default)
         return Q(
           "div",
           {
-            ref: l,
+            ref: f,
             style: {
               position: "relative",
               width: "100%",
@@ -368,33 +382,39 @@ const Ge = k({
           [
             Q("canvas", {
               ref: i,
-              style: { width: "100%", height: "100%", position: "absolute", top: 0, left: 0 }
+              style: {
+                width: "100%",
+                height: "100%",
+                position: e.windowSize ? "fixed" : "absolute",
+                top: 0,
+                left: 0
+              }
             }),
             n.default()
           ]
         );
     };
   }
-}), He = k({
+}), He = V({
   name: "Scene",
   setup(e, { slots: n }) {
-    const { scene: r } = pe(), c = L("renderer"), { activeCamera: i } = oe(), { onLoop: l } = fe();
-    return B("local-scene", r), l(() => {
-      c != null && c.value && (i != null && i.value) && (r != null && r.value) && c.value.render(r == null ? void 0 : r.value, i.value);
+    const { scene: r } = pe(), o = M("renderer"), { activeCamera: i } = oe(), { onLoop: f } = fe();
+    return $("local-scene", r), f(() => {
+      o != null && o.value && (i != null && i.value) && (r != null && r.value) && o.value.render(r == null ? void 0 : r.value, i.value);
     }), () => {
       if (n.default)
         return n.default();
     };
   }
-}), Ze = Symbol("UseTresState"), Ke = "1.4.0", et = {
+}), Ze = Symbol("UseTresState"), Ke = "1.5.0", et = {
   install(e, n) {
     const r = (n == null ? void 0 : n.prefix) || "Tres";
     e.component(`${r}Canvas`, Ge), e.component(`${r}Scene`, He);
-    const { catalogue: c, extend: i } = se(e, r);
-    e.provide("catalogue", c), e.provide("extend", i);
-    const { createComponentInstances: l } = ie(r);
-    l(c).forEach(([g, t]) => {
-      e.component(g, t);
+    const { catalogue: o, extend: i } = se(e, r);
+    e.provide("catalogue", o), e.provide("extend", i);
+    const { createComponentInstances: f } = ie(r);
+    f(o).forEach(([m, t]) => {
+      e.component(m, t);
     }), window.__TRES__ = {
       app: e,
       version: Ke

package/dist/tres.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/core
- * version: v1.4.0
- * (c) 2022
+ * version: v1.5.0
+ * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(g,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("@vueuse/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","three"],i):(g=typeof globalThis<"u"?globalThis:g||self,i(g.tres={},g.Vue,g.VueUseCore,g.Three))})(this,function(g,i,l,m){"use strict";function re(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const q=re(m);var G=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(G||{});const b={cameras:[]},ae=45;let U;function D(){const{width:e,height:n}=l.useWindowSize(),{setState:r}=V();function s(t="Perspective",c){if(t==="Perspective"){const{near:f,far:a,fov:o}=c||{near:.1,far:1e3,fov:ae};U=new m.PerspectiveCamera(o,u.value,f,a),b.cameras.push(U)}else{const{left:f,right:a,top:o,bottom:C,near:w,far:y}=c||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};U=new m.OrthographicCamera(f,a,o,C,w,y),b.cameras.push(U)}return b.cameras.push(U),U}const u=i.computed(()=>e.value/n.value),p=i.computed(()=>b.cameras[0]);function d(){p.value instanceof m.PerspectiveCamera&&(p.value.aspect=u.value),p.value.updateProjectionMatrix()}function v(t){const c=i.inject("camera");t&&c&&(c.value=t,r("camera",c.value)),b.cameras.push(t),t instanceof m.PerspectiveCamera&&(t.aspect=u.value),t.updateProjectionMatrix()}return i.watch(u,d),{activeCamera:p,createCamera:s,updateCamera:d,pushCamera:v}}const K="[TresJS ▲ ■ ●] ";function _(){function e(s,u){console.error(`${K} ${s}`,u||"")}function n(s){console.warn(`${K} ${s}`)}function r(s,u){}return{logError:e,logWarning:n,logMessage:r}}const O=i.ref({...q,uuid:q.MathUtils.generateUUID()});delete O.value.Scene;let L;function T(e,n="Tres"){const{logMessage:r,logError:s}=_();!L&&e&&(L=e);const{createComponentInstances:u}=$(n);return{extend:d=>{if(!d){s("No objects provided to extend catalogue");return}O.value=Object.assign(O.value,d);const v=u(i.ref(d));r("Adding objects to catalogue",{objects:d,catalogue:O.value.uuid}),L&&v.forEach(([t,c])=>{L._context.components[t]||L.component(t,c)})},catalogue:O}}const x=e=>typeof e<"u",oe=e=>typeof e=="function",B=e=>!!e&&e.constructor===Array;function se(e){return typeof e=="number"?[e,e,e]:e instanceof m.Vector3?[e.x,e.y,e.z]:e}function ie(e){return e instanceof m.Color?e:Array.isArray(e)?new m.Color(...e):new m.Color(e)}const ce=["rotation","scale","position"];function $(e){const{logMessage:n,logError:r}=_();function s(t,c){x(t)&&x(c)&&Object.entries(t).forEach(([f,a])=>{const o=f.replace(/(-\w)/g,C=>C[1].toUpperCase());c.setAttribute(o,new m.BufferAttribute(...a))})}function u(t,c){x(t)&&x(c)&&Object.entries(t).forEach(([f,a])=>{const o=f.replace(/(-\w)/g,C=>C[1].toUpperCase());if(!(o==="args"||a===void 0)){ce.includes(o)&&a&&(a=se(a)),t.ref&&(t.ref=c);try{if(c[o]&&x(c[o].set))c[o].set(...B(a)?a:[a]);else{if(a===""&&(a=!0),oe(c[o])){if(f==="center"&&!a)return;c[o](...B(a)?a:[a]);return}c[o]=a}}catch(C){r(`There was an error setting ${o} property`,C)}}})}function p(t){var a;const c=/^Symbol\(Fragment\)$/g,f=/^Symbol\(Text\)$/g;if(c.test(t.type.toString()))return t.children.map(o=>p(o));if(f.test(t.type.toString()))return;{const o=t.type.name.replace(e,""),{catalogue:C}=T(),w=i.inject("catalogue")||C;let y;return w&&((a=t==null?void 0:t.props)!=null&&a.args?w!=null&&w.value[o]?y=new w.value[o](...t.props.args):r(`There is no ${o} in the catalogue`,w==null?void 0:w.value.uuid):y=new w.value[o]),t!=null&&t.props&&(o==="BufferGeometry"?s(t.props,y):u(t.props,y)),y}}function d(t,c,f){if(f.default&&(f!=null&&f.default())){const a=f.default().map(o=>p(o));return new t(...a.flat().filter(Boolean))}else return c.args?new t(...c.args):new t}function v(t){return Object.entries(t.value).filter(([c,f])=>{var a,o;return(o=(a=f==null?void 0:f.prototype)==null?void 0:a.constructor)==null?void 0:o.toString().includes("class")}).map(([c,f])=>{const a=`${e}${c}`,o=i.defineComponent({name:a,setup(C,{slots:w,attrs:y,...j}){const{scene:N}=F(),S=i.inject("local-scene")||N,A=i.inject("catalogue"),{pushCamera:P}=D();let M=d(f,y,w);return u(y,M),(M instanceof m.PerspectiveCamera||M instanceof m.OrthographicCamera)&&P(M),M.isObject3D&&(S==null||S.value.add(M)),S!=null&&S.value&&M.isFog&&(S.value.fog=M),j.expose(M),n(a,{sceneuuid:S==null?void 0:S.value.uuid,catalogue:A==null?void 0:A.value.uuid,props:C,slots:w.default?w.default():void 0,attrs:y,ctx:j,scene:S}),()=>{}}});return[a,o]})}return{createComponentInstances:v,processProps:u,createInstanceFromVNode:p}}const J=l.createEventHook(),Q=l.createEventHook(),X=l.createEventHook(),Y=new m.Clock,{pause:ue,resume:le,isActive:fe}=l.useRafFn(()=>{const e=Y.getElapsedTime(),n=Y.getDelta();J.trigger({delta:n,elapsed:e}),Q.trigger({delta:n,elapsed:e}),X.trigger({delta:n,elapsed:e})},{immediate:!1});function z(){return{onBeforeLoop:J.on,onLoop:Q.on,onAfterLoop:X.on,pause:ue,resume:le,isActive:fe}}const pe=i.shallowRef(new m.Scene);function F(){return{scene:pe}}function Z(e){const n={nodes:{},materials:{}};return e&&e.traverse(r=>{r.name&&(n.nodes[r.name]=r),r.material&&!n.materials[r.material.name]&&(n.materials[r.material.name]=r.material)}),n}async function de(e,n,r,s,u){const{logError:p}=_(),d=new e;u&&u(d),r&&r(d);const t=(Array.isArray(n)?n:[n]).map(c=>new Promise((f,a)=>{d.load(c,o=>{o.scene&&Object.assign(o,Z(o.scene)),f(o)},s,o=>a(p("[useLoader] - Failed to load resource",o)))}));return B(n)?await Promise.all(t):await t[0]}async function me(e){const n=new m.LoadingManager,r=new m.TextureLoader(n),s=u=>new Promise((p,d)=>{r.load(u,v=>p(v),()=>null,()=>{d(new Error("[useTextures] - Failed to load texture"))})});if(B(e)){const u=await Promise.all(e.map(p=>s(p)));return e.length>1?u:u[0]}else{const{map:u,displacementMap:p,normalMap:d,roughnessMap:v,metalnessMap:t,aoMap:c}=e;return{map:u?await s(u):null,displacementMap:p?await s(p):null,normalMap:d?await s(d):null,roughnessMap:v?await s(v):null,metalnessMap:t?await s(t):null,aoMap:c?await s(c):null}}}const I=i.reactive({});function V(){function e(r){return I[r]}function n(r,s){I[r]=s}return{state:I,...i.toRefs(I),getState:e,setState:n}}const h=i.shallowRef(),k=i.ref(!1);function E(e,n,r){const{alpha:s=!0,antialias:u=!0,depth:p,logarithmicDepthBuffer:d,failIfMajorPerformanceCaveat:v,precision:t,premultipliedAlpha:c,stencil:f,shadows:a=!1,shadowMapType:o=m.PCFShadowMap,physicallyCorrectLights:C=!1,outputEncoding:w=m.LinearEncoding,toneMapping:y=m.NoToneMapping,toneMappingExposure:j=1,context:N=void 0,powerPreference:S="default",preserveDrawingBuffer:A=!1,clearColor:P,windowSize:M=!1}=i.toRefs(r),{width:R,height:W}=l.resolveUnref(M)?l.useWindowSize():l.useElementSize(n),{pixelRatio:H}=l.useDevicePixelRatio(),{pause:ye,resume:Se}=z(),Me=i.computed(()=>R.value/W.value),ee=()=>{h.value&&(h.value.setSize(R.value,W.value),h.value.setPixelRatio(Math.min(H.value,2)))},te=()=>{h.value&&(h.value.shadowMap.enabled=l.resolveUnref(a),h.value.shadowMap.type=l.resolveUnref(o),h.value.toneMapping=l.resolveUnref(y)||m.NoToneMapping,h.value.toneMappingExposure=l.resolveUnref(j),h.value.outputEncoding=l.resolveUnref(w)||m.LinearEncoding,P!=null&&P.value&&h.value.setClearColor(ie(l.resolveUnref(P))),h.value.physicallyCorrectLights=l.resolveUnref(C))},Pe=()=>{const ne=l.unrefElement(e);if(h.value||!ne)return;h.value=new m.WebGLRenderer({canvas:ne,alpha:l.resolveUnref(s),antialias:l.resolveUnref(u),context:l.resolveUnref(N),depth:l.resolveUnref(p),failIfMajorPerformanceCaveat:l.resolveUnref(v),logarithmicDepthBuffer:l.resolveUnref(d),powerPreference:l.resolveUnref(S),precision:l.resolveUnref(t),stencil:l.resolveUnref(f),preserveDrawingBuffer:l.resolveUnref(A),premultipliedAlpha:l.resolveUnref(c)});const{setState:be}=V();be("renderer",h.value),te(),ee(),Se(),k.value=!0},Ue=()=>{h.value&&(h.value.dispose(),h.value=void 0,k.value=!1,ye())};return i.watch([R,W,H],ee),i.watch([a,o,w,C,y,j,P],te),i.watch(()=>[e,n],()=>{l.unrefElement(e)&&l.unrefElement(n)&&Pe()},{immediate:!0,deep:!0}),{renderer:h,isReady:k,dispose:Ue,aspectRatio:Me}}const ge=i.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Object,physicallyCorrectLights:Boolean,outputEncoding:Object,toneMapping:Object,toneMappingExposure:Number,context:Object,powerPreference:Object,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:Boolean},setup(e,{slots:n,attrs:r}){const{logError:s}=_(),u=i.ref(),p=i.ref(),{renderer:d,dispose:v,aspectRatio:t}=E(u,p,e),c=i.shallowRef();return i.provide("camera",c),i.provide("renderer",d),i.provide("aspect-ratio",t),n.default&&!n.default().some(f=>f.type.name==="Scene")&&s("TresCanvas must contain a Scene component."),n.default&&!n.default().some(f=>{var a;return(a=f.type.name)==null?void 0:a.includes("Camera")})&&s("Scene must contain a Camera component."),i.onBeforeUnmount(()=>v()),()=>{if(n.default)return i.h("div",{ref:p,style:{position:"relative",width:"100%",height:"100vh",...r.style}},[i.h("canvas",{ref:u,style:{width:"100%",height:"100%",position:"absolute",top:0,left:0}}),n.default()])}}}),he=i.defineComponent({name:"Scene",setup(e,{slots:n}){const{scene:r}=F(),s=i.inject("renderer"),{activeCamera:u}=D(),{onLoop:p}=z();return i.provide("local-scene",r),p(()=>{s!=null&&s.value&&(u!=null&&u.value)&&(r!=null&&r.value)&&s.value.render(r==null?void 0:r.value,u.value)}),()=>{if(n.default)return n.default()}}}),we=Symbol("UseTresState"),ve="1.4.0",Ce={install(e,n){const r=(n==null?void 0:n.prefix)||"Tres";e.component(`${r}Canvas`,ge),e.component(`${r}Scene`,he);const{catalogue:s,extend:u}=T(e,r);e.provide("catalogue",s),e.provide("extend",u);const{createComponentInstances:p}=$(r);p(s).forEach(([v,t])=>{e.component(v,t)}),window.__TRES__={app:e,version:ve}}};g.CameraType=G,g.UseTresStateSymbol=we,g.default=Ce,g.trasverseObjects=Z,g.useCamera=D,g.useCatalogue=T,g.useInstanceCreator=$,g.useLoader=de,g.useRenderLoop=z,g.useRenderer=E,g.useScene=F,g.useTexture=me,g.useTres=V,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(w,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue"),require("@vueuse/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","three"],s):(w=typeof globalThis<"u"?globalThis:w||self,s(w.tres={},w.Vue,w.VueUseCore,w.Three))})(this,function(w,s,f,g){"use strict";function ae(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const R=ae(g);var W=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(W||{});const L={cameras:[]},oe=45;let b;function D(){const e=s.inject("aspect-ratio"),{setState:n}=k();function r(p="Perspective",h){if(p==="Perspective"){const{near:t,far:l,fov:u}=h||{near:.1,far:1e3,fov:oe};b=new g.PerspectiveCamera(u,(e==null?void 0:e.value)||1,t,l),L.cameras.push(b)}else{const{left:t,right:l,top:u,bottom:o,near:i,far:m}=h||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};b=new g.OrthographicCamera(t,l,u,o,i,m),L.cameras.push(b)}return L.cameras.push(b),b}const a=s.computed(()=>L.cameras[0]);function c(){a.value instanceof g.PerspectiveCamera&&e&&(a.value.aspect=e.value),a.value.updateProjectionMatrix()}function d(p){const h=s.inject("camera");p&&h&&(h.value=p,n("camera",h.value)),L.cameras.push(p),p instanceof g.PerspectiveCamera&&e&&(p.aspect=e.value),p.updateProjectionMatrix()}return e&&s.watch(e,c),{activeCamera:a,createCamera:r,updateCamera:c,pushCamera:d}}const q="[TresJS ▲ ■ ●] ";function B(){function e(a,c){console.error(`${q} ${a}`,c||"")}function n(a){console.warn(`${q} ${a}`)}function r(a,c){}return{logError:e,logWarning:n,logMessage:r}}const x=s.ref({...R,uuid:R.MathUtils.generateUUID()});delete x.value.Scene;let O;function T(e,n="Tres"){const{logMessage:r,logError:a}=B();!O&&e&&(O=e);const{createComponentInstances:c}=z(n);return{extend:p=>{if(!p){a("No objects provided to extend catalogue");return}x.value=Object.assign(x.value,p);const h=c(s.ref(p));r("Adding objects to catalogue",{objects:p,catalogue:x.value.uuid}),O&&h.forEach(([t,l])=>{O._context.components[t]||O.component(t,l)})},catalogue:x}}const j=e=>typeof e<"u",se=e=>typeof e=="function",I=e=>!!e&&e.constructor===Array;function ie(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function ce(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}const le=["rotation","scale","position"];function z(e){const{logMessage:n,logError:r}=B();function a(t,l){j(t)&&j(l)&&Object.entries(t).forEach(([u,o])=>{const i=u.replace(/(-\w)/g,m=>m[1].toUpperCase());l.setAttribute(i,new g.BufferAttribute(...o))})}function c(t,l){j(t)&&j(l)&&Object.entries(t).forEach(([u,o])=>{const i=u.replace(/(-\w)/g,m=>m[1].toUpperCase());if(!(i==="args"||o===void 0)){le.includes(i)&&o&&(o=ie(o)),t.ref&&(t.ref=l);try{if(l[i]&&j(l[i].set))l[i].set(...I(o)?o:[o]);else{if(o===""&&(o=!0),se(l[i])){if(u==="center"&&!o)return;l[i](...I(o)?o:[o]);return}l[i]=o}}catch(m){r(`There was an error setting ${i} property`,m)}}})}function d(t){var o,i;const l=/^Symbol\(Fragment\)$/g,u=/^Symbol\(Text\)$/g;if(l.test(t.type.toString()))return t.children.map(m=>d(m));if(u.test(t.type.toString()))return;{const m=t.type.name.replace(e,""),{catalogue:P}=T(),C=s.inject("catalogue")||P;let S;if(C)if((o=t.children)!=null&&o.default){const A=t.children.default().map(y=>d(y));S=new C.value[m](...A.flat().filter(Boolean))}else(i=t==null?void 0:t.props)!=null&&i.args?C!=null&&C.value[m]?S=new C.value[m](...t.props.args):r(`There is no ${m} in the catalogue`,C==null?void 0:C.value.uuid):S=new C.value[m];return t!=null&&t.props&&(m==="BufferGeometry"?a(t.props,S):c(t.props,S)),n(`Created ${m} instance`,S),S}}function p(t,l,u){if(u.default&&(u!=null&&u.default())){const o=u.default().map(i=>d(i));if(t.name==="Group"){const i=new t;return o.forEach(m=>{i.add(m)}),i}else return new t(...o.flat().filter(Boolean))}else return l.args?new t(...l.args):new t}function h(t){return Object.entries(t.value).filter(([l,u])=>{var o,i;return(i=(o=u==null?void 0:u.prototype)==null?void 0:o.constructor)==null?void 0:i.toString().includes("class")}).map(([l,u])=>{const o=`${e}${l}`,i=s.defineComponent({name:o,setup(m,{slots:P,attrs:C,...S}){const{scene:A}=V(),y=s.inject("local-scene")||A,_=s.inject("catalogue"),{pushCamera:U}=D();let M=p(u,C,P);return c(C,M),(M instanceof g.PerspectiveCamera||M instanceof g.OrthographicCamera)&&U(M),M.isObject3D&&(y==null||y.value.add(M)),y!=null&&y.value&&M.isFog&&(y.value.fog=M),S.expose(M),n(o,{sceneuuid:y==null?void 0:y.value.uuid,catalogue:_==null?void 0:_.value.uuid,props:m,slots:P.default?P.default():void 0,attrs:C,ctx:S,scene:y}),()=>{}}});return[o,i]})}return{createComponentInstances:h,processProps:c,createInstanceFromVNode:d}}const G=f.createEventHook(),K=f.createEventHook(),J=f.createEventHook(),Q=new g.Clock,{pause:ue,resume:fe,isActive:pe}=f.useRafFn(()=>{const e=Q.getElapsedTime(),n=Q.getDelta();G.trigger({delta:n,elapsed:e}),K.trigger({delta:n,elapsed:e}),J.trigger({delta:n,elapsed:e})},{immediate:!1});function F(){return{onBeforeLoop:G.on,onLoop:K.on,onAfterLoop:J.on,pause:ue,resume:fe,isActive:pe}}const de=s.shallowRef(new g.Scene);function V(){return{scene:de}}function X(e){const n={nodes:{},materials:{}};return e&&e.traverse(r=>{r.name&&(n.nodes[r.name]=r),r.material&&!n.materials[r.material.name]&&(n.materials[r.material.name]=r.material)}),n}async function me(e,n,r,a,c){const{logError:d}=B(),p=new e;c&&c(p),r&&r(p);const t=(Array.isArray(n)?n:[n]).map(l=>new Promise((u,o)=>{p.load(l,i=>{i.scene&&Object.assign(i,X(i.scene)),u(i)},a,i=>o(d("[useLoader] - Failed to load resource",i)))}));return I(n)?await Promise.all(t):await t[0]}async function ge(e){const n=new g.LoadingManager,r=new g.TextureLoader(n),a=c=>new Promise((d,p)=>{r.load(c,h=>d(h),()=>null,()=>{p(new Error("[useTextures] - Failed to load texture"))})});if(I(e)){const c=await Promise.all(e.map(d=>a(d)));return e.length>1?c:c[0]}else{const{map:c,displacementMap:d,normalMap:p,roughnessMap:h,metalnessMap:t,aoMap:l}=e;return{map:c?await a(c):null,displacementMap:d?await a(d):null,normalMap:p?await a(p):null,roughnessMap:h?await a(h):null,metalnessMap:t?await a(t):null,aoMap:l?await a(l):null}}}const $=s.reactive({});function k(){function e(r){return $[r]}function n(r,a){$[r]=a}return{state:$,...s.toRefs($),getState:e,setState:n}}const v=s.shallowRef(),N=s.ref(!1);function Y(e,n,r){const{alpha:a=!0,antialias:c=!0,depth:d,logarithmicDepthBuffer:p,failIfMajorPerformanceCaveat:h,precision:t,premultipliedAlpha:l,stencil:u,shadows:o=!1,shadowMapType:i=g.PCFShadowMap,physicallyCorrectLights:m=!1,outputEncoding:P=g.LinearEncoding,toneMapping:C=g.NoToneMapping,toneMappingExposure:S=1,context:A=void 0,powerPreference:y="default",preserveDrawingBuffer:_=!1,clearColor:U,windowSize:M=!1}=s.toRefs(r),{width:Z,height:E}=f.resolveUnref(M)?f.useWindowSize():f.useElementSize(n),{pixelRatio:H}=f.useDevicePixelRatio(),{pause:Se,resume:Me}=F(),ee=s.computed(()=>Z.value/E.value),te=()=>{v.value&&(v.value.setSize(Z.value,E.value),v.value.setPixelRatio(Math.min(H.value,2)))},ne=()=>{v.value&&(v.value.shadowMap.enabled=f.resolveUnref(o),v.value.shadowMap.type=f.resolveUnref(i),v.value.toneMapping=f.resolveUnref(C)||g.NoToneMapping,v.value.toneMappingExposure=f.resolveUnref(S),v.value.outputEncoding=f.resolveUnref(P)||g.LinearEncoding,U!=null&&U.value&&v.value.setClearColor(ce(f.resolveUnref(U))),v.value.physicallyCorrectLights=f.resolveUnref(m))},Pe=()=>{const re=f.unrefElement(e);if(v.value||!re)return;v.value=new g.WebGLRenderer({canvas:re,alpha:f.resolveUnref(a),antialias:f.resolveUnref(c),context:f.resolveUnref(A),depth:f.resolveUnref(d),failIfMajorPerformanceCaveat:f.resolveUnref(h),logarithmicDepthBuffer:f.resolveUnref(p),powerPreference:f.resolveUnref(y),precision:f.resolveUnref(t),stencil:f.resolveUnref(u),preserveDrawingBuffer:f.resolveUnref(_),premultipliedAlpha:f.resolveUnref(l)});const{setState:be}=k();be("renderer",v.value),ne(),te(),Me(),N.value=!0},Ue=()=>{v.value&&(v.value.dispose(),v.value=void 0,N.value=!1,Se())};return s.watch([ee,H],te),s.watch([o,i,P,m,C,S,U],ne),s.watch(()=>[e,n],()=>{f.unrefElement(e)&&f.unrefElement(n)&&Pe()},{immediate:!0,deep:!0}),{renderer:v,isReady:N,dispose:Ue,aspectRatio:ee}}const he=s.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Object,physicallyCorrectLights:Boolean,outputEncoding:Object,toneMapping:Object,toneMappingExposure:Number,context:Object,powerPreference:Object,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:{type:Boolean,default:!1}},setup(e,{slots:n,attrs:r}){const{logError:a}=B(),c=s.ref(),d=s.ref(),{renderer:p,dispose:h,aspectRatio:t}=Y(c,d,e);s.provide("aspect-ratio",t),s.provide("renderer",p);const l=s.shallowRef();return s.provide("camera",l),n.default&&!n.default().some(u=>u.type.name==="Scene")&&a("TresCanvas must contain a Scene component."),n.default&&!n.default().some(u=>{var o;return(o=u.type.name)==null?void 0:o.includes("Camera")})&&a("Scene must contain a Camera component."),s.onBeforeUnmount(()=>h()),()=>{if(n.default)return s.h("div",{ref:d,style:{position:"relative",width:"100%",height:"100vh",...r.style}},[s.h("canvas",{ref:c,style:{width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}}),n.default()])}}}),we=s.defineComponent({name:"Scene",setup(e,{slots:n}){const{scene:r}=V(),a=s.inject("renderer"),{activeCamera:c}=D(),{onLoop:d}=F();return s.provide("local-scene",r),d(()=>{a!=null&&a.value&&(c!=null&&c.value)&&(r!=null&&r.value)&&a.value.render(r==null?void 0:r.value,c.value)}),()=>{if(n.default)return n.default()}}}),ve=Symbol("UseTresState"),Ce="1.5.0",ye={install(e,n){const r=(n==null?void 0:n.prefix)||"Tres";e.component(`${r}Canvas`,he),e.component(`${r}Scene`,we);const{catalogue:a,extend:c}=T(e,r);e.provide("catalogue",a),e.provide("extend",c);const{createComponentInstances:d}=z(r);d(a).forEach(([h,t])=>{e.component(h,t)}),window.__TRES__={app:e,version:Ce}}};w.CameraType=W,w.UseTresStateSymbol=ve,w.default=ye,w.trasverseObjects=X,w.useCamera=D,w.useCatalogue=T,w.useInstanceCreator=z,w.useLoader=me,w.useRenderLoop=F,w.useRenderer=Y,w.useScene=V,w.useTexture=ge,w.useTres=k,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -39,8 +39,8 @@
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
     "@histoire/plugin-vue": "0.11.7",
-    "@tresjs/cientos": "^1.2.2",
-    "@types/three": "^0.146.0",
+    "@tresjs/cientos": "^1.4.0",
+    "@types/three": "^0.148.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.25.8",
     "@vitest/ui": "^0.25.8",