@tresjs/core 1.4.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/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.1
+ * (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 * 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";
-var $e = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))($e || {});
-const 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;
-let S;
-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 || {
+}, De = 45;
+let x;
+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
       };
-      S = new $(o, i.value, u, a), E.cameras.push(S);
+      x = new _(l, (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: l, bottom: a, near: s, far: p } = m || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,306 +33,322 @@ function oe() {
         near: 0.1,
         far: 1e3
       };
-      S = new ae(u, a, o, h, m, w), E.cameras.push(S);
+      x = new ce(t, c, l, 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 = se(() => T.cameras[0]);
+  function i() {
+    o.value instanceof _ && 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(u) {
+    const m = M("camera");
+    u && m && (m.value = u, r("camera", m.value)), T.cameras.push(u), u instanceof _ && e && (u.aspect = e.value), u.updateProjectionMatrix();
   }
-  return O(i, f), {
-    activeCamera: l,
-    createCamera: c,
-    updateCamera: f,
-    pushCamera: g
+  return e && $(e, i), {
+    activeCamera: o,
+    createCamera: n,
+    updateCamera: i,
+    pushCamera: f
   };
 }
-const ee = "[TresJS ▲ ■ ●] ";
-function _() {
-  function e(c, i) {
-    console.error(`${ee} ${c}`, i || "");
+const oe = "[TresJS ▲ ■ ●] ";
+function U() {
+  function e(o, i) {
+    console.error(`${oe} ${o}`, i || "");
   }
-  function n(c) {
-    console.warn(`${ee} ${c}`);
+  function r(o) {
+    console.warn(`${oe} ${o}`);
   }
-  function r(c, i) {
+  function n(o, i) {
   }
   return {
     logError: e,
-    logWarning: n,
-    logMessage: r
+    logWarning: r,
+    logMessage: n
   };
 }
-const R = b({ ...X, uuid: X.MathUtils.generateUUID() });
-delete R.value.Scene;
-let P;
-function se(e, n = "Tres") {
-  const { logMessage: r, logError: c } = _();
-  !P && e && (P = e);
-  const { createComponentInstances: i } = ie(n);
+const A = B({ ...ne, uuid: ne.MathUtils.generateUUID() });
+delete A.value.Scene;
+let L;
+function fe(e, r = "Tres") {
+  const { logMessage: n, logError: o } = U();
+  !L && e && (L = e);
+  const { createComponentInstances: i } = pe(r);
   return {
-    extend: (f) => {
-      if (!f) {
-        c("No objects provided to extend catalogue");
+    extend: (u) => {
+      if (!u) {
+        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, 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: R
+    catalogue: A
   };
 }
-const T = (e) => typeof e < "u", _e = (e) => typeof e == "function", I = (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 j ? e : Array.isArray(e) ? new j(...e) : new j(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 } = _();
-  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 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(([l, a]) => {
+      const s = l.replace(/(-\w)/g, (p) => p[1].toUpperCase());
+      c.setAttribute(s, new Ae(...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(([l, a]) => {
+      const s = l.replace(/(-\w)/g, (p) => p[1].toUpperCase());
+      if (!(s === "args" || a === void 0)) {
+        ke.includes(s) && a && (a = ze(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(...z(a) ? a : [a]);
           else {
-            if (a === "" && (a = !0), _e(s[o])) {
-              if (u === "center" && !a)
+            if (a === "" && (a = !0), Fe(c[s])) {
+              if (l === "center" && !a)
                 return;
-              s[o](...I(a) ? a : [a]);
+              c[s](...z(a) ? a : [a]);
               return;
             }
-            s[o] = a;
+            c[s] = a;
           }
-        } catch (h) {
-          r(`There was an error setting ${o} property`, h);
+        } catch (p) {
+          n(`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));
-    if (u.test(t.type.toString()))
+  function f(t) {
+    var a, s;
+    const c = /^Symbol\(Fragment\)$/g, l = /^Symbol\(Text\)$/g;
+    if (c.test(t.type.toString()))
+      return t.children.map((p) => f(p));
+    if (l.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 } = 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) : 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 f(t, s, u) {
-    if (u.default && (u != null && u.default())) {
-      const a = u.default().map((o) => l(o));
-      return new t(...a.flat().filter(Boolean));
+  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) => {
+          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, l]) => {
+      var a, s;
+      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(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 } = 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,
+            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 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,
+    onBeforeLoop: me.on,
+    onLoop: de.on,
+    onAfterLoop: H.on,
+    pause: Ve,
     resume: je,
-    isActive: Ve
+    isActive: Ne
   };
 }
-const Ne = W(new Le());
-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, c, i) {
-  const { logError: l } = _(), f = new e();
-  i && i(f), r && r(f);
-  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);
-        },
+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,
-        (o) => a(l("[useLoader] - Failed to load resource", o))
+        (s) => {
+          s.scene && Object.assign(s, Ge(s.scene)), l(s);
+        },
+        o,
+        (s) => a(f("[useLoader] - Failed to load resource", s))
       );
     })
   );
-  return I(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 be(), r = new Ae(n), c = (i) => new Promise((l, f) => {
-    r.load(
+async function et(e) {
+  const r = new Be(), n = new Oe(r), o = (i) => new Promise((f, u) => {
+    n.load(
       i,
-      (g) => l(g),
+      (m) => f(m),
       () => null,
       () => {
-        f(new Error("[useTextures] - Failed to load texture"));
+        u(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (I(e)) {
-    const i = await Promise.all(e.map((l) => c(l)));
+  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: l, normalMap: f, roughnessMap: g, metalnessMap: t, aoMap: s } = e;
+    const { map: i, displacementMap: f, normalMap: u, 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: u ? await o(u) : null,
+      roughnessMap: m ? await o(m) : null,
+      metalnessMap: t ? await o(t) : null,
+      aoMap: c ? await o(c) : null
     };
   }
 }
-const A = Ce({});
-function me() {
-  function e(r) {
-    return A[r];
+const O = xe({});
+function we() {
+  function e(n) {
+    return O[n];
   }
-  function n(r, c) {
-    A[r] = c;
+  function r(n, o) {
+    O[n] = o;
   }
   return {
-    state: A,
-    ...ne(A),
+    state: O,
+    ...ie(O),
     getState: e,
-    setState: n
+    setState: r
   };
 }
-const d = W(), V = b(!1);
-function We(e, n, r) {
+const g = W(), j = B(!1);
+function He(e, r, n) {
   const {
-    alpha: c = !0,
+    alpha: o = !0,
     antialias: i = !0,
-    depth: l,
-    logarithmicDepthBuffer: f,
-    failIfMajorPerformanceCaveat: g,
+    depth: f,
+    logarithmicDepthBuffer: u,
+    failIfMajorPerformanceCaveat: m,
     precision: t,
-    premultipliedAlpha: s,
-    stencil: u,
+    premultipliedAlpha: c,
+    stencil: l,
     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 = $e,
+    physicallyCorrectLights: p = !1,
+    outputEncoding: C = re,
+    toneMapping: h = ae,
+    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)));
-  }, 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)
+  } = 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;
-    d.value = new Be({
-      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)
+    g.value = new Ie({
+      canvas: Z,
+      alpha: d(o),
+      antialias: d(i),
+      context: d(E),
+      depth: d(f),
+      failIfMajorPerformanceCaveat: d(m),
+      logarithmicDepthBuffer: d(u),
+      powerPreference: d(w),
+      precision: d(t),
+      stencil: d(l),
+      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: 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([F, z, H], K), O(
-    [a, o, m, h, w, M, C],
-    J
-  ), O(
-    () => [e, n],
+  return $([Q, q], X), $(
+    [a, s, C, p, h, v, S],
+    Y
+  ), $(
+    () => [e, r],
     () => {
-      U(e) && U(n) && we();
+      k(e) && k(r) && Ce();
     },
     { immediate: !0, deep: !0 }
   ), {
-    renderer: d,
-    isReady: V,
-    dispose: ve,
-    aspectRatio: he
+    renderer: g,
+    isReady: j,
+    dispose: Se,
+    aspectRatio: Q
   };
 }
-const Ge = k({
+const Ke = N({
   name: "TresCanvas",
   props: {
     shadows: Boolean,
@@ -345,74 +361,82 @@ 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) => {
+  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");
-    }) && c("Scene must contain a Camera component."), Se(() => g()), () => {
-      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: l,
+            ref: f,
             style: {
               position: "relative",
               width: "100%",
               height: "100vh",
-              ...r.style
+              ...n.style
             }
           },
           [
-            Q("canvas", {
+            te("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()
+            r.default()
           ]
         );
     };
   }
-}), He = k({
+}), Je = N({
   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);
+  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.4.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);
+}), 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 } = 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.4.0
- * (c) 2022
+ * version: v1.5.1
+ * (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,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.4.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.2.2",
-    "@types/three": "^0.146.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"
   }