@tresjs/core 1.5.0 → 1.5.1

package/dist/core/useRenderLoop/index.d.ts

@@ -1,8 +1,10 @@
 import { EventHookOn, Fn } from '@vueuse/core';
 import { Ref } from 'vue';
+import { Clock } from 'three';
 export interface RenderLoop {
     delta: number;
     elapsed: number;
+    clock: Clock;
 }
 export interface UseRenderLoopReturn {
     onBeforeLoop: EventHookOn<RenderLoop>;

package/dist/tres.js

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

package/dist/tres.umd.cjs

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

package/dist/types/index.d.ts

@@ -9,7 +9,7 @@ export type TresVNodeType = VNodeTypes & {
   __name?: string
   setup?: (props: Readonly<any>) => void
 }
-export type TresVNode = VNode & { children?: Array<VNode>; type: TresVNodeType }
+export type TresVNode = VNode & { children?: Array<VNode | { default: any }>; type: TresVNodeType }
 export type TresAttributes = Record<string, any> & { args?: number[] }
 
 export type TresColor = string | number | Color | number[]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -38,26 +38,24 @@
   },
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
-    "@histoire/plugin-vue": "0.11.7",
-    "@tresjs/cientos": "^1.4.0",
+    "@tresjs/cientos": "^1.5.0",
     "@types/three": "^0.148.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.25.8",
     "@vitest/ui": "^0.25.8",
-    "@vueuse/core": "^9.7.0",
+    "@vueuse/core": "^9.11.0",
     "gl": "6.0.1",
     "happy-dom": "^8.1.0",
-    "histoire": "0.11.9",
     "kolorist": "^1.6.0",
     "pathe": "^1.0.0",
     "release-it": "^15.5.1",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.8.3",
     "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.0.3",
+    "vite": "^4.0.4",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "^1.7.1",
-    "vite-plugin-glsl": "^1.0.1",
+    "vite-plugin-glsl": "^1.1.0",
     "vite-plugin-require-transform": "^1.0.4",
     "vitest": "^0.25.8",
     "vue-demi": "^0.13.11"
@@ -70,9 +68,6 @@
     "test:ci": "vitest run",
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage",
-    "story:dev": "histoire dev",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   }