@tresjs/core 1.8.0 → 1.8.1

package/dist/tres.js

@@ -1,30 +1,30 @@
 /**
  * name: @tresjs/core
- * version: v1.8.0
+ * version: v1.8.1
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { watch as j, toRef as Oe, ref as M, inject as de, defineComponent as Q, onUnmounted as ge, shallowRef as ee, shallowReactive as Ae, computed as he, toRefs as we, provide as b, onBeforeUnmount as Be, h as K } from "vue";
-import { useEventListener as Ie, createEventHook as te, useRafFn as Fe, resolveUnref as h, useWindowSize as _e, useElementSize as Ue, useDevicePixelRatio as je, unrefElement as X } from "@vueuse/core";
-import * as se from "three";
-import { PerspectiveCamera as z, OrthographicCamera as ye, Vector3 as ze, Color as Y, Mesh as De, Fog as We, BufferAttribute as ke, Clock as ve, Scene as Ne, LoadingManager as Ve, TextureLoader as He, Raycaster as Ge, Vector2 as Ke, sRGBEncoding as Xe, ACESFilmicToneMapping as Ye, PCFSoftShadowMap as Je, PCFShadowMap as Ze, LinearEncoding as ce, NoToneMapping as le, WebGLRenderer as qe } from "three";
-var Qe = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Qe || {});
-const et = 45;
-let P;
+import { inject as Z, watch as j, toRef as $e, ref as L, defineComponent as q, onUnmounted as ge, shallowRef as Q, shallowReactive as Oe, computed as he, toRefs as we, provide as T, onBeforeUnmount as Ae, h as H } from "vue";
+import { useEventListener as Be, createEventHook as ee, useRafFn as Ie, resolveUnref as w, useWindowSize as Fe, useElementSize as _e, useDevicePixelRatio as Ue, unrefElement as G } from "@vueuse/core";
+import * as ce from "three";
+import { PerspectiveCamera as z, OrthographicCamera as ye, Vector3 as je, Color as K, Mesh as ze, Fog as De, BufferAttribute as We, Clock as ve, Scene as ke, LoadingManager as Ne, TextureLoader as Ve, Raycaster as He, Vector2 as Ge, sRGBEncoding as Ke, ACESFilmicToneMapping as Xe, PCFSoftShadowMap as Ye, PCFShadowMap as Je, LinearEncoding as le, NoToneMapping as ue, WebGLRenderer as Ze } from "three";
+var qe = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(qe || {});
+const Qe = 45;
+let b;
 function Se() {
-  const { state: e, setState: n } = T();
-  function o(u = "Perspective", t) {
-    var r, l, s;
-    if (u === "Perspective") {
-      const { near: i, far: f, fov: g } = t || {
+  const { state: e, setState: n } = $(), o = Z("aspect-ratio");
+  function a(t = "Perspective", r) {
+    var l, s, i;
+    if (t === "Perspective") {
+      const { near: u, far: d, fov: p } = r || {
         near: 0.1,
         far: 1e3,
-        fov: et
+        fov: Qe
       };
-      P = new z(g, ((r = e.aspectRatio) == null ? void 0 : r.value) || window.innerWidth / window.innerHeight, i, f), (l = e.cameras) == null || l.push(P);
+      b = new z(p, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, u, d), (s = e.cameras) == null || s.push(b);
     } else {
-      const { left: i, right: f, top: g, bottom: v, near: p, far: m } = t || {
+      const { left: u, right: d, top: p, bottom: m, near: g, far: R } = r || {
         left: -100,
         right: 100,
         top: 100,
@@ -32,36 +32,36 @@ function Se() {
         near: 0.1,
         far: 1e3
       };
-      P = new ye(i, f, g, v, p, m), (s = e.cameras) == null || s.push(P);
+      b = new ye(u, d, p, m, g, R), (i = e.cameras) == null || i.push(b);
     }
-    return e.camera = P, n("camera", e.camera), P;
+    return e.camera = b, n("camera", e.camera), b;
   }
-  function a() {
-    var u;
-    e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (u = e.camera) == null || u.updateProjectionMatrix();
-  }
-  function c(u) {
+  function c() {
     var t;
-    (t = e.cameras) == null || t.push(u), u instanceof z && e.aspectRatio && (u.aspect = e.aspectRatio.value), u.updateProjectionMatrix(), n("camera", u);
+    e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (t = e.camera) == null || t.updateProjectionMatrix();
+  }
+  function f(t) {
+    var r;
+    (r = e.cameras) == null || r.push(t), t instanceof z && e.aspectRatio && (t.aspect = e.aspectRatio.value), t.updateProjectionMatrix(), n("camera", t);
   }
-  function d() {
+  function h() {
     e.cameras = [];
   }
-  return e.aspectRatio && j(e.aspectRatio, a), {
-    activeCamera: Oe(e, "camera"),
-    createCamera: o,
-    updateCamera: a,
-    pushCamera: c,
-    clearCameras: d
+  return o && j(o, c), {
+    activeCamera: $e(e, "camera"),
+    createCamera: a,
+    updateCamera: c,
+    pushCamera: f,
+    clearCameras: h
   };
 }
-const ue = "[TresJS ▲ ■ ●] ";
-function I() {
+const fe = "[TresJS ▲ ■ ●] ";
+function F() {
   function e(a, c) {
-    console.error(`${ue} ${a}`, c || "");
+    console.error(`${fe} ${a}`, c || "");
   }
   function n(a) {
-    console.warn(`${ue} ${a}`);
+    console.warn(`${fe} ${a}`);
   }
   function o(a, c) {
   }
@@ -71,73 +71,73 @@ function I() {
     logMessage: o
   };
 }
-const D = M({ ...se, uuid: se.MathUtils.generateUUID() });
+const D = L({ ...ce, uuid: ce.MathUtils.generateUUID() });
 delete D.value.Scene;
-let O;
-function Ce(e, n = "Tres") {
-  const { logError: o } = I();
-  !O && e && (O = e);
-  const { createComponentInstances: a } = Ee(n);
+let A;
+function et(e, n = "Tres") {
+  const { logError: o } = F();
+  !A && e && (A = e);
+  const { createComponentInstances: a } = Ce(n);
   return {
-    extend: (d) => {
-      if (!d) {
+    extend: (f) => {
+      if (!f) {
         o("No objects provided to extend catalogue");
         return;
       }
-      D.value = Object.assign(D.value, d);
-      const u = a(M(d));
-      O && u.forEach(([t, r]) => {
-        O._context.components[t] || O.component(t, r);
+      D.value = Object.assign(D.value, f);
+      const h = a(L(f));
+      A && h.forEach(([t, r]) => {
+        A._context.components[t] || A.component(t, r);
       });
     },
     catalogue: D
   };
 }
-const R = (e) => typeof e < "u", tt = (e) => typeof e == "function", N = (e) => !!e && e.constructor === Array;
+const M = (e) => typeof e < "u", tt = (e) => typeof e == "function", N = (e) => !!e && e.constructor === Array;
 function nt(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof ze ? [e.x, e.y, e.z] : e;
+  return typeof e == "number" ? [e, e, e] : e instanceof je ? [e.x, e.y, e.z] : e;
 }
 function rt(e) {
-  return e instanceof Y ? e : Array.isArray(e) ? new Y(...e) : new Y(e);
+  return e instanceof K ? e : Array.isArray(e) ? new K(...e) : new K(e);
 }
-const fe = ["rotation", "scale", "position"], ot = ["X", "Y", "Z"], at = ["color"], it = ["r", "g", "b"];
-function Ee(e) {
+const pe = ["rotation", "scale", "position"], ot = ["X", "Y", "Z"], at = ["color"], it = ["r", "g", "b"];
+function Ce(e) {
   const {
     /* logMessage, */
     logError: n
-  } = I();
+  } = F();
   function o(t, r) {
-    R(t) && R(r) && Object.entries(t).forEach(([l, s]) => {
-      const i = l.replace(/(-\w)/g, (f) => f[1].toUpperCase());
-      r.setAttribute(i, new ke(...s));
+    M(t) && M(r) && Object.entries(t).forEach(([l, s]) => {
+      const i = l.replace(/(-\w)/g, (u) => u[1].toUpperCase());
+      r.setAttribute(i, new We(...s));
     });
   }
   function a(t, r) {
-    R(t) && R(r) && Object.entries(t).forEach(([l, s]) => {
-      const i = l.replace(/(-\w)/g, (m) => m[1].toUpperCase());
-      let f, g, v, p;
+    M(t) && M(r) && Object.entries(t).forEach(([l, s]) => {
+      const i = l.replace(/(-\w)/g, (g) => g[1].toUpperCase());
+      let u, d, p, m;
       if (!(i === "args" || s === void 0)) {
-        fe.includes(i) && s ? s = nt(s) : fe.forEach((m) => {
-          i.startsWith(m) && i.length === m.length + 1 && (f = m, g = i.substring(m.length), ot.includes(g) || n(
+        pe.includes(i) && s ? s = nt(s) : pe.forEach((g) => {
+          i.startsWith(g) && i.length === g.length + 1 && (u = g, d = i.substring(g.length), ot.includes(d) || n(
             // eslint-disable-next-line max-len
-            `There was an error setting ${l} property, ${g} is not a valid axis for ${f}`
+            `There was an error setting ${l} property, ${d} is not a valid axis for ${u}`
           ));
-        }), at.forEach((m) => {
-          i.startsWith(m) && i.length === m.length + 1 && (v = m, p = i.substring(m.length).toLowerCase(), it.includes(p) || n(`There was an error setting ${l} property , ${p} is not a valid axis for ${v}`));
+        }), at.forEach((g) => {
+          i.startsWith(g) && i.length === g.length + 1 && (p = g, m = i.substring(g.length).toLowerCase(), it.includes(m) || n(`There was an error setting ${l} property , ${m} is not a valid axis for ${p}`));
         }), t.ref && (t.ref = r);
         try {
-          if (r[i] && R(r[i].set))
+          if (r[i] && M(r[i].set))
             r[i].set(...N(s) ? s : [s]);
           else if (
             // Check if the property has a "setAxis" method
-            f && r[f]
+            u && r[u]
           )
-            R(r[f][`set${g}`]) ? r[f][`set${g}`](s) : R(r[`rotate${g}`]) && r[`rotate${g}`](s);
+            M(r[u][`set${d}`]) ? r[u][`set${d}`](s) : M(r[`rotate${d}`]) && r[`rotate${d}`](s);
           else if (
             // Check if the instance has a "color" property
-            v && p && r[v] && r[v][p]
+            p && m && r[p] && r[p][m]
           )
-            r[v][p] = s;
+            r[p][m] = s;
           else {
             if (s === "" && (s = !0), tt(r[i])) {
               if (l === "center" && !s)
@@ -147,71 +147,75 @@ function Ee(e) {
             }
             r[i] = s;
           }
-        } catch (m) {
-          n(`There was an error setting ${i} property`, m);
+        } catch (g) {
+          n(`There was an error setting ${i} property`, g);
         }
       }
     });
   }
   function c(t) {
-    var i, f;
+    var i, u;
     const r = /^Symbol\(Fragment\)$/g, l = /^Symbol\(Text\)$/g, s = /^Symbol\(Comment\)$/g;
     if (r.test(t.type.toString()))
-      return t.children.map((g) => c(g));
+      return t.children.map((d) => c(d));
     if (l.test(t.type.toString()) || s.test(t.type.toString()))
       return;
     {
-      const g = t.type.name.replace(e, ""), { catalogue: v } = Ce(), p = de("catalogue") || v;
+      const d = t.type.name.replace(e, ""), p = Z("catalogue");
       let m;
       if (p)
         if ((i = t.children) != null && i.default) {
-          const L = t.children.default().map((S) => c(S));
-          m = new p.value[g](...L.flat().filter(Boolean));
+          const g = t.children.default().map((R) => c(R));
+          m = new p.value[d](...g.flat().filter(Boolean));
         } else
-          (f = t == null ? void 0 : t.props) != null && f.args ? p != null && p.value[g] ? m = new p.value[g](...t.props.args) : n(`There is no ${g} in the catalogue`, p == null ? void 0 : p.value.uuid) : m = new p.value[g]();
-      return t != null && t.props && (g === "BufferGeometry" ? o(t.props, m) : a(t.props, m)), m;
+          (u = t == null ? void 0 : t.props) != null && u.args ? p != null && p.value[d] ? m = new p.value[d](...t.props.args) : n(`There is no ${d} in the catalogue`, p == null ? void 0 : p.value.uuid) : m = new p.value[d]();
+      return t != null && t.props && (d === "BufferGeometry" ? o(t.props, m) : a(t.props, m)), m;
     }
   }
-  function d(t, r, l) {
+  function f(t, r, l) {
     if (l.default && (l != null && l.default())) {
       const s = l.default().map((i) => c(i));
       if (t.name === "Group") {
         const i = new t();
-        return s.forEach((f) => {
-          i.add(f);
+        return s.forEach((u) => {
+          i.add(u);
         }), i;
       } else
         return new t(...s.flat().filter(Boolean));
     } else
       return r.args ? new t(...r.args) : new t();
   }
-  function u(t) {
+  function h(t) {
     return Object.entries(t.value).filter(([r, l]) => {
       var s, i;
       return (i = (s = l == null ? void 0 : l.prototype) == null ? void 0 : s.constructor) == null ? void 0 : i.toString().includes("class");
     }).map(([r, l]) => {
-      const s = `${e}${r}`, i = Q({
+      const s = `${e}${r}`, i = q({
         name: s,
-        setup(f, { slots: g, attrs: v, ...p }) {
-          const { state: m } = T(), { onLoop: L } = re(), S = m.scene, F = m.raycaster, { pushCamera: V } = Se();
-          let y = d(l, v, g);
-          a(v, y), (y instanceof z || y instanceof ye) && V(y), y.isObject3D && (S == null || S.add(y));
-          let E = null, C = null;
-          if (y instanceof De) {
-            L(() => {
-              if (y && F && (S != null && S.children)) {
-                const $ = F.intersectObjects(S == null ? void 0 : S.children);
-                $.length > 0 ? (C = $[0], (E === null || E.object.uuid !== (C == null ? void 0 : C.object.uuid)) && p.emit("pointer-enter", C), p.emit("pointer-move", C)) : (C = null, E !== null && p.emit("pointer-leave", E)), E = C;
+        setup(u, { slots: d, attrs: p, ...m }) {
+          const { state: g } = $(), { onLoop: R } = ne(), v = g.scene, _ = g.raycaster;
+          let S = f(l, p, d);
+          if (a(p, S), S instanceof z || S instanceof ye) {
+            const { pushCamera: O } = Se();
+            O(S);
+          }
+          S.isObject3D && (v == null || v.add(S));
+          let C = null, E = null;
+          if (S instanceof ze) {
+            R(() => {
+              if (S && _ && (v != null && v.children)) {
+                const x = _.intersectObjects(v == null ? void 0 : v.children);
+                x.length > 0 ? (E = x[0], (C === null || C.object.uuid !== (E == null ? void 0 : E.object.uuid)) && m.emit("pointer-enter", E), m.emit("pointer-move", E)) : (E = null, C !== null && m.emit("pointer-leave", C)), C = E;
               }
             });
-            const _ = Ie(window, "click", () => {
-              p.emit("click", E);
+            const O = Be(window, "click", () => {
+              m.emit("click", C);
             });
             ge(() => {
-              _();
+              O();
             });
           }
-          return S && y instanceof We && (S.fog = y), p.expose(y), () => {
+          return v && S instanceof De && (v.fog = S), m.expose(S), () => {
           };
         }
       });
@@ -219,33 +223,33 @@ function Ee(e) {
     });
   }
   return {
-    createComponentInstances: u,
+    createComponentInstances: h,
     processProps: a,
     createInstanceFromVNode: c
   };
 }
-const Re = te(), Me = te(), ne = te(), B = new ve();
+const Ee = ee(), Re = ee(), te = ee(), I = new ve();
 let W = 0, k = 0;
-const { pause: st, resume: ct, isActive: lt } = Fe(
+const { pause: st, resume: ct, isActive: lt } = Ie(
   () => {
-    Re.trigger({ delta: W, elapsed: k, clock: B }), Me.trigger({ delta: W, elapsed: k, clock: B }), ne.trigger({ delta: W, elapsed: k, clock: B });
+    Ee.trigger({ delta: W, elapsed: k, clock: I }), Re.trigger({ delta: W, elapsed: k, clock: I }), te.trigger({ delta: W, elapsed: k, clock: I });
   },
   { immediate: !1 }
 );
-ne.on(() => {
-  W = B.getDelta(), k = B.getElapsedTime();
+te.on(() => {
+  W = I.getDelta(), k = I.getElapsedTime();
 });
-function re() {
+function ne() {
   return {
-    onBeforeLoop: Re.on,
-    onLoop: Me.on,
-    onAfterLoop: ne.on,
+    onBeforeLoop: Ee.on,
+    onLoop: Re.on,
+    onAfterLoop: te.on,
     pause: st,
     resume: ct,
     isActive: lt
   };
 }
-const ut = ee(new Ne());
+const ut = Q(new ke());
 function ft() {
   return {
     scene: ut
@@ -258,54 +262,54 @@ function pt(e) {
   }), n;
 }
 async function Ct(e, n, o, a, c) {
-  const { logError: d } = I(), u = new e();
-  c && c(u), o && o(u);
+  const { logError: f } = F(), h = new e();
+  c && c(h), o && o(h);
   const r = (Array.isArray(n) ? n : [n]).map(
     (l) => new Promise((s, i) => {
-      u.load(
+      h.load(
         l,
-        (f) => {
-          f.scene && Object.assign(f, pt(f.scene)), s(f);
+        (u) => {
+          u.scene && Object.assign(u, pt(u.scene)), s(u);
         },
         a,
-        (f) => i(d("[useLoader] - Failed to load resource", f))
+        (u) => i(f("[useLoader] - Failed to load resource", u))
       );
     })
   );
   return N(n) ? await Promise.all(r) : await r[0];
 }
 async function Et(e) {
-  const n = new Ve(), o = new He(n), a = (c) => new Promise((d, u) => {
+  const n = new Ne(), o = new Ve(n), a = (c) => new Promise((f, h) => {
     o.load(
       c,
-      (t) => d(t),
+      (t) => f(t),
       () => null,
       () => {
-        u(new Error("[useTextures] - Failed to load texture"));
+        h(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
   if (N(e)) {
-    const c = await Promise.all(e.map((d) => a(d)));
+    const c = await Promise.all(e.map((f) => a(f)));
     return e.length > 1 ? c : c[0];
   } else {
-    const { map: c, displacementMap: d, normalMap: u, roughnessMap: t, metalnessMap: r, aoMap: l } = e;
+    const { map: c, displacementMap: f, normalMap: h, roughnessMap: t, metalnessMap: r, aoMap: l } = e;
     return {
       map: c ? await a(c) : null,
-      displacementMap: d ? await a(d) : null,
-      normalMap: u ? await a(u) : null,
+      displacementMap: f ? await a(f) : null,
+      normalMap: h ? await a(h) : null,
       roughnessMap: t ? await a(t) : null,
       metalnessMap: r ? await a(r) : null,
       aoMap: l ? await a(l) : null
     };
   }
 }
-const U = Ae({
+const U = Oe({
   camera: void 0,
   cameras: [],
   aspectRatio: he(() => window.innerWidth / window.innerHeight)
 });
-function T() {
+function $() {
   function e(o) {
     return U[o];
   }
@@ -319,109 +323,105 @@ function T() {
     setState: n
   };
 }
-const J = ee(new Ge()), A = M(new Ke()), pe = M(null);
+const X = Q(new He()), B = L(new Ge()), me = L(null);
 function mt() {
-  const { setState: e } = T();
-  e("raycaster", J.value), e("pointer", A), e("currentInstance", pe), b("raycaster", J), b("pointer", A), b("currentInstance", pe);
+  const { setState: e } = $();
+  e("raycaster", X.value), e("pointer", B), e("currentInstance", me), T("raycaster", X), T("pointer", B), T("currentInstance", me);
   function n(o) {
-    A.value.x = o.clientX / window.innerWidth * 2 - 1, A.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
+    B.value.x = o.clientX / window.innerWidth * 2 - 1, B.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
   }
   return window.addEventListener("pointermove", n), ge(() => {
     window.removeEventListener("pointermove", n);
   }), {
-    raycaster: J,
-    pointer: A
+    raycaster: X,
+    pointer: B
   };
 }
-const Z = {
+const Y = {
   realistic: {
-    outputEncoding: Xe,
-    toneMapping: Ye,
+    outputEncoding: Ke,
+    toneMapping: Xe,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: Je
+      type: Ye
     }
   }
-}, Le = (e, n) => {
+}, Me = (e, n) => {
   for (const o of Object.keys(n))
-    n[o] instanceof Object && Object.assign(n[o], Le(e[o], n[o]));
+    n[o] instanceof Object && Object.assign(n[o], Me(e[o], n[o]));
   return Object.assign(e || {}, n), e;
-}, w = ee(), q = M(!1);
+}, y = Q(), J = L(!1);
 function dt(e, n, o) {
   const {
     alpha: a = !0,
     antialias: c = !0,
-    depth: d,
-    logarithmicDepthBuffer: u,
+    depth: f,
+    logarithmicDepthBuffer: h,
     failIfMajorPerformanceCaveat: t,
     precision: r,
     premultipliedAlpha: l,
     stencil: s,
     shadows: i = !1,
-    shadowMapType: f = Ze,
-    physicallyCorrectLights: g = !1,
-    useLegacyLights: v = !1,
-    outputEncoding: p = ce,
-    toneMapping: m = le,
-    toneMappingExposure: L = 1,
-    context: S = void 0,
-    powerPreference: F = "default",
-    preserveDrawingBuffer: V = !1,
-    clearColor: y,
+    shadowMapType: u = Je,
+    physicallyCorrectLights: d = !1,
+    useLegacyLights: p = !1,
+    outputEncoding: m = le,
+    toneMapping: g = ue,
+    toneMappingExposure: R = 1,
+    context: v = void 0,
+    powerPreference: _ = "default",
+    preserveDrawingBuffer: S = !1,
+    clearColor: C,
     windowSize: E = !1,
-    preset: C = void 0
-  } = we(o), { width: _, height: $ } = h(E) ? _e() : Ue(n), { logError: xe } = I(), { pixelRatio: oe } = je(), { pause: Pe, resume: be } = re(), H = he(() => _.value / $.value), ae = () => {
-    w.value && (w.value.setSize(_.value, $.value), w.value.setPixelRatio(Math.min(oe.value, 2)));
-  }, ie = () => {
-    if (!w.value)
+    preset: O = void 0
+  } = we(o), { setState: x } = $(), { width: re, height: oe } = w(E) ? Fe() : _e(n), { logError: Le } = F(), { pixelRatio: ae } = Ue(), { pause: xe, resume: Pe } = ne(), V = he(() => re.value / oe.value), ie = () => {
+    y.value && (y.value.setSize(re.value, oe.value), y.value.setPixelRatio(Math.min(ae.value, 2)));
+  }, se = () => {
+    if (!y.value)
       return;
-    const x = h(C);
-    if (x) {
-      x in Z || xe("Renderer Preset must be one of these: " + Object.keys(Z).join(", ")), Le(w.value, Z[x]);
+    const P = w(O);
+    if (P) {
+      P in Y || Le("Renderer Preset must be one of these: " + Object.keys(Y).join(", ")), Me(y.value, Y[P]);
       return;
     }
-    w.value.shadowMap.enabled = h(i), w.value.shadowMap.type = h(f), w.value.toneMapping = h(m) || le, w.value.toneMappingExposure = h(L), w.value.outputEncoding = h(p) || ce, y != null && y.value && w.value.setClearColor(rt(h(y))), w.value.useLegacyLights = h(v);
+    y.value.shadowMap.enabled = w(i), y.value.shadowMap.type = w(u), y.value.toneMapping = w(g) || ue, y.value.toneMappingExposure = w(R), y.value.outputEncoding = w(m) || le, C != null && C.value && y.value.setClearColor(rt(w(C))), y.value.useLegacyLights = w(p);
+  }, be = () => {
+    const P = G(e);
+    y.value || !P || (y.value = new Ze({
+      canvas: P,
+      alpha: w(a),
+      antialias: w(c),
+      context: w(v),
+      depth: w(f),
+      failIfMajorPerformanceCaveat: w(t),
+      logarithmicDepthBuffer: w(h),
+      powerPreference: w(_),
+      precision: w(r),
+      stencil: w(s),
+      preserveDrawingBuffer: w(S),
+      premultipliedAlpha: w(l)
+    }), x("renderer", y.value), x("clock", new ve()), x("aspectRatio", V), se(), ie(), Pe(), J.value = !0);
   }, Te = () => {
-    const x = X(e);
-    if (w.value || !x)
-      return;
-    w.value = new qe({
-      canvas: x,
-      alpha: h(a),
-      antialias: h(c),
-      context: h(S),
-      depth: h(d),
-      failIfMajorPerformanceCaveat: h(t),
-      logarithmicDepthBuffer: h(u),
-      powerPreference: h(F),
-      precision: h(r),
-      stencil: h(s),
-      preserveDrawingBuffer: h(V),
-      premultipliedAlpha: h(l)
-    });
-    const { setState: G } = T();
-    G("renderer", w.value), G("clock", new ve()), G("aspectRatio", H), ie(), ae(), be(), q.value = !0;
-  }, $e = () => {
-    w.value && (w.value.dispose(), w.value = void 0, q.value = !1, Pe());
+    y.value && (y.value.dispose(), y.value = void 0, J.value = !1, xe());
   };
-  return j([H, oe], ae), j(
-    [i, f, p, v, m, L, y],
-    ie
+  return j([V, ae], ie), j(
+    [i, u, m, p, g, R, C],
+    se
   ), j(
     () => [e, n],
     () => {
-      X(e) && X(n) && Te();
+      G(e) && G(n) && be();
     },
     { immediate: !0, deep: !0 }
   ), {
-    renderer: w,
-    isReady: q,
-    dispose: $e,
-    aspectRatio: H
+    renderer: y,
+    isReady: J,
+    dispose: Te,
+    aspectRatio: V
   };
 }
-const { logError: me, logWarning: gt } = I(), ht = Q({
+const { logError: de, logWarning: gt } = F(), ht = q({
   name: "TresCanvas",
   props: {
     shadows: Boolean,
@@ -443,13 +443,13 @@ const { logError: me, logWarning: gt } = I(), ht = Q({
     preset: String
   },
   setup(e, { slots: n, attrs: o }) {
-    const a = M(), c = M(), { renderer: d, dispose: u, aspectRatio: t } = dt(a, c, e);
-    return b("aspect-ratio", t), b("renderer", d), n.default && !n.default().some((r) => r.type.name === "Scene") && me("TresCanvas must contain a Scene component."), n.default && !n.default().some((r) => {
+    const a = L(), c = L(), { renderer: f, dispose: h, aspectRatio: t } = dt(a, c, e);
+    return T("aspect-ratio", t), T("renderer", f), n.default && !n.default().some((r) => r.type.name === "Scene") && de("TresCanvas must contain a Scene component."), n.default && !n.default().some((r) => {
       var l;
       return (l = r.type.name) == null ? void 0 : l.includes("Camera");
-    }) && me("Scene must contain a Camera component."), Be(() => u()), () => {
+    }) && de("Scene must contain a Camera component."), Ae(() => h()), () => {
       if (n.default)
-        return K(
+        return H(
           "div",
           {
             ref: c,
@@ -464,7 +464,7 @@ const { logError: me, logWarning: gt } = I(), ht = Q({
             }
           },
           [
-            K(
+            H(
               "div",
               {
                 style: {
@@ -473,7 +473,7 @@ const { logError: me, logWarning: gt } = I(), ht = Q({
                 }
               },
               [
-                K("canvas", {
+                H("canvas", {
                   ref: a,
                   style: {
                     display: "block",
@@ -491,12 +491,12 @@ const { logError: me, logWarning: gt } = I(), ht = Q({
         );
     };
   }
-}), wt = Q({
+}), wt = q({
   name: "Scene",
   setup(e, { slots: n }) {
-    const { setState: o } = T(), { scene: a } = ft(), c = de("renderer"), { activeCamera: d } = Se(), { raycaster: u, pointer: t } = mt(), { onLoop: r } = re();
-    return b("local-scene", a), o("scene", a.value), r(() => {
-      d.value && (u.value.setFromCamera(t.value, d.value), c != null && c.value && d && (a != null && a.value) && c.value.render(a == null ? void 0 : a.value, d.value));
+    const { setState: o } = $(), { scene: a } = ft(), c = Z("renderer"), { activeCamera: f } = Se(), { raycaster: h, pointer: t } = mt(), { onLoop: r } = ne();
+    return T("local-scene", a), o("scene", a.value), r(() => {
+      f.value && (h.value.setFromCamera(t.value, f.value), c != null && c.value && f && (a != null && a.value) && c.value.render(a == null ? void 0 : a.value, f.value));
     }), () => {
       if (n.default)
         return n.default();
@@ -506,27 +506,27 @@ const { logError: me, logWarning: gt } = I(), ht = Q({
   install(e, n) {
     const o = (n == null ? void 0 : n.prefix) || "Tres";
     e.component(`${o}Canvas`, ht), e.component(`${o}Scene`, wt);
-    const { catalogue: a, extend: c } = Ce(e, o);
-    e.provide("catalogue", a), e.provide("extend", c), e.provide("useTres", T());
-    const { createComponentInstances: d } = Ee(o);
-    d(a).forEach(([t, r]) => {
+    const { catalogue: a, extend: c } = et(e, o);
+    e.provide("catalogue", a), e.provide("extend", c), e.provide("useTres", $());
+    const { createComponentInstances: f } = Ce(o);
+    f(a).forEach(([t, r]) => {
       e.component(t, r);
     });
   }
 };
 export {
-  Qe as CameraType,
+  qe as CameraType,
   Rt as UseTresStateSymbol,
   Mt as default,
   pt as trasverseObjects,
   Se as useCamera,
-  Ce as useCatalogue,
-  Ee as useInstanceCreator,
+  et as useCatalogue,
+  Ce as useInstanceCreator,
   Ct as useLoader,
   mt as useRaycaster,
-  re as useRenderLoop,
+  ne as useRenderLoop,
   dt as useRenderer,
   ft as useScene,
   Et as useTexture,
-  T as useTres
+  $ as useTres
 };

package/dist/tres.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/core
- * version: v1.8.0
+ * version: v1.8.1
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(C,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):(C=typeof globalThis<"u"?globalThis:C||self,i(C.tres={},C.Vue,C.VueUseCore,C.Three))})(this,function(C,i,u,p){"use strict";function he(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const ee=he(p);var te=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(te||{});const we=45;let x;function G(){const{state:e,setState:t}=O();function r(d="Perspective",n){var a,f,c;if(d==="Perspective"){const{near:s,far:m,fov:y}=n||{near:.1,far:1e3,fov:we};x=new p.PerspectiveCamera(y,((a=e.aspectRatio)==null?void 0:a.value)||window.innerWidth/window.innerHeight,s,m),(f=e.cameras)==null||f.push(x)}else{const{left:s,right:m,top:y,bottom:M,near:g,far:h}=n||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};x=new p.OrthographicCamera(s,m,y,M,g,h),(c=e.cameras)==null||c.push(x)}return e.camera=x,t("camera",e.camera),x}function o(){var d;e.camera instanceof p.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(d=e.camera)==null||d.updateProjectionMatrix()}function l(d){var n;(n=e.cameras)==null||n.push(d),d instanceof p.PerspectiveCamera&&e.aspectRatio&&(d.aspect=e.aspectRatio.value),d.updateProjectionMatrix(),t("camera",d)}function w(){e.cameras=[]}return e.aspectRatio&&i.watch(e.aspectRatio,o),{activeCamera:i.toRef(e,"camera"),createCamera:r,updateCamera:o,pushCamera:l,clearCameras:w}}const ne="[TresJS ▲ ■ ●] ";function j(){function e(o,l){console.error(`${ne} ${o}`,l||"")}function t(o){console.warn(`${ne} ${o}`)}function r(o,l){}return{logError:e,logWarning:t,logMessage:r}}const k=i.ref({...ee,uuid:ee.MathUtils.generateUUID()});delete k.value.Scene;let B;function K(e,t="Tres"){const{logError:r}=j();!B&&e&&(B=e);const{createComponentInstances:o}=q(t);return{extend:w=>{if(!w){r("No objects provided to extend catalogue");return}k.value=Object.assign(k.value,w);const d=o(i.ref(w));B&&d.forEach(([n,a])=>{B._context.components[n]||B.component(n,a)})},catalogue:k}}const U=e=>typeof e<"u",ye=e=>typeof e=="function",F=e=>!!e&&e.constructor===Array;function Ce(e){return typeof e=="number"?[e,e,e]:e instanceof p.Vector3?[e.x,e.y,e.z]:e}function ve(e){return e instanceof p.Color?e:Array.isArray(e)?new p.Color(...e):new p.Color(e)}const re=["rotation","scale","position"],Se=["X","Y","Z"],Me=["color"],Le=["r","g","b"];function q(e){const{logError:t}=j();function r(n,a){U(n)&&U(a)&&Object.entries(n).forEach(([f,c])=>{const s=f.replace(/(-\w)/g,m=>m[1].toUpperCase());a.setAttribute(s,new p.BufferAttribute(...c))})}function o(n,a){U(n)&&U(a)&&Object.entries(n).forEach(([f,c])=>{const s=f.replace(/(-\w)/g,h=>h[1].toUpperCase());let m,y,M,g;if(!(s==="args"||c===void 0)){re.includes(s)&&c?c=Ce(c):re.forEach(h=>{s.startsWith(h)&&s.length===h.length+1&&(m=h,y=s.substring(h.length),Se.includes(y)||t(`There was an error setting ${f} property, ${y} is not a valid axis for ${m}`))}),Me.forEach(h=>{s.startsWith(h)&&s.length===h.length+1&&(M=h,g=s.substring(h.length).toLowerCase(),Le.includes(g)||t(`There was an error setting ${f} property , ${g} is not a valid axis for ${M}`))}),n.ref&&(n.ref=a);try{if(a[s]&&U(a[s].set))a[s].set(...F(c)?c:[c]);else if(m&&a[m])U(a[m][`set${y}`])?a[m][`set${y}`](c):U(a[`rotate${y}`])&&a[`rotate${y}`](c);else if(M&&g&&a[M]&&a[M][g])a[M][g]=c;else{if(c===""&&(c=!0),ye(a[s])){if(f==="center"&&!c)return;a[s](...F(c)?c:[c]);return}a[s]=c}}catch(h){t(`There was an error setting ${s} property`,h)}}})}function l(n){var s,m;const a=/^Symbol\(Fragment\)$/g,f=/^Symbol\(Text\)$/g,c=/^Symbol\(Comment\)$/g;if(a.test(n.type.toString()))return n.children.map(y=>l(y));if(f.test(n.type.toString())||c.test(n.type.toString()))return;{const y=n.type.name.replace(e,""),{catalogue:M}=K(),g=i.inject("catalogue")||M;let h;if(g)if((s=n.children)!=null&&s.default){const $=n.children.default().map(L=>l(L));h=new g.value[y](...$.flat().filter(Boolean))}else(m=n==null?void 0:n.props)!=null&&m.args?g!=null&&g.value[y]?h=new g.value[y](...n.props.args):t(`There is no ${y} in the catalogue`,g==null?void 0:g.value.uuid):h=new g.value[y];return n!=null&&n.props&&(y==="BufferGeometry"?r(n.props,h):o(n.props,h)),h}}function w(n,a,f){if(f.default&&(f!=null&&f.default())){const c=f.default().map(s=>l(s));if(n.name==="Group"){const s=new n;return c.forEach(m=>{s.add(m)}),s}else return new n(...c.flat().filter(Boolean))}else return a.args?new n(...a.args):new n}function d(n){return Object.entries(n.value).filter(([a,f])=>{var c,s;return(s=(c=f==null?void 0:f.prototype)==null?void 0:c.constructor)==null?void 0:s.toString().includes("class")}).map(([a,f])=>{const c=`${e}${a}`,s=i.defineComponent({name:c,setup(m,{slots:y,attrs:M,...g}){const{state:h}=O(),{onLoop:$}=N(),L=h.scene,W=h.raycaster,{pushCamera:Q}=G();let S=w(f,M,y);o(M,S),(S instanceof p.PerspectiveCamera||S instanceof p.OrthographicCamera)&&Q(S),S.isObject3D&&(L==null||L.add(S));let P=null,b=null;if(S instanceof p.Mesh){$(()=>{if(S&&W&&(L!=null&&L.children)){const _=W.intersectObjects(L==null?void 0:L.children);_.length>0?(b=_[0],(P===null||P.object.uuid!==(b==null?void 0:b.object.uuid))&&g.emit("pointer-enter",b),g.emit("pointer-move",b)):(b=null,P!==null&&g.emit("pointer-leave",P)),P=b}});const T=u.useEventListener(window,"click",()=>{g.emit("click",P)});i.onUnmounted(()=>{T()})}return L&&S instanceof p.Fog&&(L.fog=S),g.expose(S),()=>{}}});return[c,s]})}return{createComponentInstances:d,processProps:o,createInstanceFromVNode:l}}const ae=u.createEventHook(),oe=u.createEventHook(),X=u.createEventHook(),I=new p.Clock;let D=0,z=0;const{pause:be,resume:Pe,isActive:Ue}=u.useRafFn(()=>{ae.trigger({delta:D,elapsed:z,clock:I}),oe.trigger({delta:D,elapsed:z,clock:I}),X.trigger({delta:D,elapsed:z,clock:I})},{immediate:!1});X.on(()=>{D=I.getDelta(),z=I.getElapsedTime()});function N(){return{onBeforeLoop:ae.on,onLoop:oe.on,onAfterLoop:X.on,pause:be,resume:Pe,isActive:Ue}}const Oe=i.shallowRef(new p.Scene);function ie(){return{scene:Oe}}function se(e){const t={nodes:{},materials:{}};return e&&e.traverse(r=>{r.name&&(t.nodes[r.name]=r),r.material&&!t.materials[r.material.name]&&(t.materials[r.material.name]=r.material)}),t}async function xe(e,t,r,o,l){const{logError:w}=j(),d=new e;l&&l(d),r&&r(d);const a=(Array.isArray(t)?t:[t]).map(f=>new Promise((c,s)=>{d.load(f,m=>{m.scene&&Object.assign(m,se(m.scene)),c(m)},o,m=>s(w("[useLoader] - Failed to load resource",m)))}));return F(t)?await Promise.all(a):await a[0]}async function $e(e){const t=new p.LoadingManager,r=new p.TextureLoader(t),o=l=>new Promise((w,d)=>{r.load(l,n=>w(n),()=>null,()=>{d(new Error("[useTextures] - Failed to load texture"))})});if(F(e)){const l=await Promise.all(e.map(w=>o(w)));return e.length>1?l:l[0]}else{const{map:l,displacementMap:w,normalMap:d,roughnessMap:n,metalnessMap:a,aoMap:f}=e;return{map:l?await o(l):null,displacementMap:w?await o(w):null,normalMap:d?await o(d):null,roughnessMap:n?await o(n):null,metalnessMap:a?await o(a):null,aoMap:f?await o(f):null}}}const V=i.shallowReactive({camera:void 0,cameras:[],aspectRatio:i.computed(()=>window.innerWidth/window.innerHeight)});function O(){function e(r){return V[r]}function t(r,o){V[r]=o}return{state:V,...i.toRefs(V),getState:e,setState:t}}const Y=i.shallowRef(new p.Raycaster),R=i.ref(new p.Vector2),ce=i.ref(null);function le(){const{setState:e}=O();e("raycaster",Y.value),e("pointer",R),e("currentInstance",ce),i.provide("raycaster",Y),i.provide("pointer",R),i.provide("currentInstance",ce);function t(r){R.value.x=r.clientX/window.innerWidth*2-1,R.value.y=-(r.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),i.onUnmounted(()=>{window.removeEventListener("pointermove",t)}),{raycaster:Y,pointer:R}}const J={realistic:{outputEncoding:p.sRGBEncoding,toneMapping:p.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:p.PCFSoftShadowMap}}},fe=(e,t)=>{for(const r of Object.keys(t))t[r]instanceof Object&&Object.assign(t[r],fe(e[r],t[r]));return Object.assign(e||{},t),e},v=i.shallowRef(),Z=i.ref(!1);function ue(e,t,r){const{alpha:o=!0,antialias:l=!0,depth:w,logarithmicDepthBuffer:d,failIfMajorPerformanceCaveat:n,precision:a,premultipliedAlpha:f,stencil:c,shadows:s=!1,shadowMapType:m=p.PCFShadowMap,physicallyCorrectLights:y=!1,useLegacyLights:M=!1,outputEncoding:g=p.LinearEncoding,toneMapping:h=p.NoToneMapping,toneMappingExposure:$=1,context:L=void 0,powerPreference:W="default",preserveDrawingBuffer:Q=!1,clearColor:S,windowSize:P=!1,preset:b=void 0}=i.toRefs(r),{width:T,height:_}=u.resolveUnref(P)?u.useWindowSize():u.useElementSize(t),{logError:_e}=j(),{pixelRatio:de}=u.useDevicePixelRatio(),{pause:ke,resume:Fe}=N(),E=i.computed(()=>T.value/_.value),me=()=>{v.value&&(v.value.setSize(T.value,_.value),v.value.setPixelRatio(Math.min(de.value,2)))},ge=()=>{if(!v.value)return;const A=u.resolveUnref(b);if(A){A in J||_e("Renderer Preset must be one of these: "+Object.keys(J).join(", ")),fe(v.value,J[A]);return}v.value.shadowMap.enabled=u.resolveUnref(s),v.value.shadowMap.type=u.resolveUnref(m),v.value.toneMapping=u.resolveUnref(h)||p.NoToneMapping,v.value.toneMappingExposure=u.resolveUnref($),v.value.outputEncoding=u.resolveUnref(g)||p.LinearEncoding,S!=null&&S.value&&v.value.setClearColor(ve(u.resolveUnref(S))),v.value.useLegacyLights=u.resolveUnref(M)},De=()=>{const A=u.unrefElement(e);if(v.value||!A)return;v.value=new p.WebGLRenderer({canvas:A,alpha:u.resolveUnref(o),antialias:u.resolveUnref(l),context:u.resolveUnref(L),depth:u.resolveUnref(w),failIfMajorPerformanceCaveat:u.resolveUnref(n),logarithmicDepthBuffer:u.resolveUnref(d),powerPreference:u.resolveUnref(W),precision:u.resolveUnref(a),stencil:u.resolveUnref(c),preserveDrawingBuffer:u.resolveUnref(Q),premultipliedAlpha:u.resolveUnref(f)});const{setState:H}=O();H("renderer",v.value),H("clock",new p.Clock),H("aspectRatio",E),ge(),me(),Fe(),Z.value=!0},ze=()=>{v.value&&(v.value.dispose(),v.value=void 0,Z.value=!1,ke())};return i.watch([E,de],me),i.watch([s,m,g,M,h,$,S],ge),i.watch(()=>[e,t],()=>{u.unrefElement(e)&&u.unrefElement(t)&&De()},{immediate:!0,deep:!0}),{renderer:v,isReady:Z,dispose:ze,aspectRatio:E}}const{logError:pe,logWarning:Ae}=j(),je=i.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Number,physicallyCorrectLights:{type:Boolean,default:!1,validator:e=>(e&&Ae("physicallyCorrectLights is deprecated. Use useLegacyLights instead."),!0)},useLegacyLights:Boolean,outputEncoding:Number,toneMapping:Number,toneMappingExposure:Number,context:Object,powerPreference:String,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:{type:Boolean,default:!1},preset:String},setup(e,{slots:t,attrs:r}){const o=i.ref(),l=i.ref(),{renderer:w,dispose:d,aspectRatio:n}=ue(o,l,e);return i.provide("aspect-ratio",n),i.provide("renderer",w),t.default&&!t.default().some(a=>a.type.name==="Scene")&&pe("TresCanvas must contain a Scene component."),t.default&&!t.default().some(a=>{var f;return(f=a.type.name)==null?void 0:f.includes("Camera")})&&pe("Scene must contain a Camera component."),i.onBeforeUnmount(()=>d()),()=>{if(t.default)return i.h("div",{ref:l,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",pointerEvents:"auto",touchAction:"none",...r.style}},[i.h("div",{style:{width:"100%",height:"100%"}},[i.h("canvas",{ref:o,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}}),t.default()])])}}}),Be=i.defineComponent({name:"Scene",setup(e,{slots:t}){const{setState:r}=O(),{scene:o}=ie(),l=i.inject("renderer"),{activeCamera:w}=G(),{raycaster:d,pointer:n}=le(),{onLoop:a}=N();return i.provide("local-scene",o),r("scene",o.value),a(()=>{w.value&&(d.value.setFromCamera(n.value,w.value),l!=null&&l.value&&w&&(o!=null&&o.value)&&l.value.render(o==null?void 0:o.value,w.value))}),()=>{if(t.default)return t.default()}}}),Ie=Symbol("UseTresState"),Re={install(e,t){const r=(t==null?void 0:t.prefix)||"Tres";e.component(`${r}Canvas`,je),e.component(`${r}Scene`,Be);const{catalogue:o,extend:l}=K(e,r);e.provide("catalogue",o),e.provide("extend",l),e.provide("useTres",O());const{createComponentInstances:w}=q(r);w(o).forEach(([n,a])=>{e.component(n,a)})}};C.CameraType=te,C.UseTresStateSymbol=Ie,C.default=Re,C.trasverseObjects=se,C.useCamera=G,C.useCatalogue=K,C.useInstanceCreator=q,C.useLoader=xe,C.useRaycaster=le,C.useRenderLoop=N,C.useRenderer=ue,C.useScene=ie,C.useTexture=$e,C.useTres=O,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(C,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):(C=typeof globalThis<"u"?globalThis:C||self,i(C.tres={},C.Vue,C.VueUseCore,C.Three))})(this,function(C,i,u,p){"use strict";function he(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,a.get?a:{enumerable:!0,get:()=>e[o]})}}return n.default=e,Object.freeze(n)}const Q=he(p);var E=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(E||{});const we=45;let $;function G(){const{state:e,setState:n}=x(),o=i.inject("aspect-ratio");function a(t="Perspective",r){var f,c,s;if(t==="Perspective"){const{near:d,far:w,fov:g}=r||{near:.1,far:1e3,fov:we};$=new p.PerspectiveCamera(g,((f=e.aspectRatio)==null?void 0:f.value)||window.innerWidth/window.innerHeight,d,w),(c=e.cameras)==null||c.push($)}else{const{left:d,right:w,top:g,bottom:h,near:y,far:U}=r||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};$=new p.OrthographicCamera(d,w,g,h,y,U),(s=e.cameras)==null||s.push($)}return e.camera=$,n("camera",e.camera),$}function l(){var t;e.camera instanceof p.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(t=e.camera)==null||t.updateProjectionMatrix()}function m(t){var r;(r=e.cameras)==null||r.push(t),t instanceof p.PerspectiveCamera&&e.aspectRatio&&(t.aspect=e.aspectRatio.value),t.updateProjectionMatrix(),n("camera",t)}function v(){e.cameras=[]}return o&&i.watch(o,l),{activeCamera:i.toRef(e,"camera"),createCamera:a,updateCamera:l,pushCamera:m,clearCameras:v}}const H="[TresJS ▲ ■ ●] ";function B(){function e(a,l){console.error(`${H} ${a}`,l||"")}function n(a){console.warn(`${H} ${a}`)}function o(a,l){}return{logError:e,logWarning:n,logMessage:o}}const k=i.ref({...Q,uuid:Q.MathUtils.generateUUID()});delete k.value.Scene;let I;function ee(e,n="Tres"){const{logError:o}=B();!I&&e&&(I=e);const{createComponentInstances:a}=K(n);return{extend:m=>{if(!m){o("No objects provided to extend catalogue");return}k.value=Object.assign(k.value,m);const v=a(i.ref(m));I&&v.forEach(([t,r])=>{I._context.components[t]||I.component(t,r)})},catalogue:k}}const O=e=>typeof e<"u",ye=e=>typeof e=="function",D=e=>!!e&&e.constructor===Array;function Ce(e){return typeof e=="number"?[e,e,e]:e instanceof p.Vector3?[e.x,e.y,e.z]:e}function ve(e){return e instanceof p.Color?e:Array.isArray(e)?new p.Color(...e):new p.Color(e)}const te=["rotation","scale","position"],Se=["X","Y","Z"],Me=["color"],Le=["r","g","b"];function K(e){const{logError:n}=B();function o(t,r){O(t)&&O(r)&&Object.entries(t).forEach(([f,c])=>{const s=f.replace(/(-\w)/g,d=>d[1].toUpperCase());r.setAttribute(s,new p.BufferAttribute(...c))})}function a(t,r){O(t)&&O(r)&&Object.entries(t).forEach(([f,c])=>{const s=f.replace(/(-\w)/g,y=>y[1].toUpperCase());let d,w,g,h;if(!(s==="args"||c===void 0)){te.includes(s)&&c?c=Ce(c):te.forEach(y=>{s.startsWith(y)&&s.length===y.length+1&&(d=y,w=s.substring(y.length),Se.includes(w)||n(`There was an error setting ${f} property, ${w} is not a valid axis for ${d}`))}),Me.forEach(y=>{s.startsWith(y)&&s.length===y.length+1&&(g=y,h=s.substring(y.length).toLowerCase(),Le.includes(h)||n(`There was an error setting ${f} property , ${h} is not a valid axis for ${g}`))}),t.ref&&(t.ref=r);try{if(r[s]&&O(r[s].set))r[s].set(...D(c)?c:[c]);else if(d&&r[d])O(r[d][`set${w}`])?r[d][`set${w}`](c):O(r[`rotate${w}`])&&r[`rotate${w}`](c);else if(g&&h&&r[g]&&r[g][h])r[g][h]=c;else{if(c===""&&(c=!0),ye(r[s])){if(f==="center"&&!c)return;r[s](...D(c)?c:[c]);return}r[s]=c}}catch(y){n(`There was an error setting ${s} property`,y)}}})}function l(t){var s,d;const r=/^Symbol\(Fragment\)$/g,f=/^Symbol\(Text\)$/g,c=/^Symbol\(Comment\)$/g;if(r.test(t.type.toString()))return t.children.map(w=>l(w));if(f.test(t.type.toString())||c.test(t.type.toString()))return;{const w=t.type.name.replace(e,""),g=i.inject("catalogue");let h;if(g)if((s=t.children)!=null&&s.default){const y=t.children.default().map(U=>l(U));h=new g.value[w](...y.flat().filter(Boolean))}else(d=t==null?void 0:t.props)!=null&&d.args?g!=null&&g.value[w]?h=new g.value[w](...t.props.args):n(`There is no ${w} in the catalogue`,g==null?void 0:g.value.uuid):h=new g.value[w];return t!=null&&t.props&&(w==="BufferGeometry"?o(t.props,h):a(t.props,h)),h}}function m(t,r,f){if(f.default&&(f!=null&&f.default())){const c=f.default().map(s=>l(s));if(t.name==="Group"){const s=new t;return c.forEach(d=>{s.add(d)}),s}else return new t(...c.flat().filter(Boolean))}else return r.args?new t(...r.args):new t}function v(t){return Object.entries(t.value).filter(([r,f])=>{var c,s;return(s=(c=f==null?void 0:f.prototype)==null?void 0:c.constructor)==null?void 0:s.toString().includes("class")}).map(([r,f])=>{const c=`${e}${r}`,s=i.defineComponent({name:c,setup(d,{slots:w,attrs:g,...h}){const{state:y}=x(),{onLoop:U}=V(),M=y.scene,T=y.raycaster;let L=m(f,g,w);if(a(g,L),L instanceof p.PerspectiveCamera||L instanceof p.OrthographicCamera){const{pushCamera:F}=G();F(L)}L.isObject3D&&(M==null||M.add(L));let b=null,P=null;if(L instanceof p.Mesh){U(()=>{if(L&&T&&(M!=null&&M.children)){const j=T.intersectObjects(M==null?void 0:M.children);j.length>0?(P=j[0],(b===null||b.object.uuid!==(P==null?void 0:P.object.uuid))&&h.emit("pointer-enter",P),h.emit("pointer-move",P)):(P=null,b!==null&&h.emit("pointer-leave",b)),b=P}});const F=u.useEventListener(window,"click",()=>{h.emit("click",b)});i.onUnmounted(()=>{F()})}return M&&L instanceof p.Fog&&(M.fog=L),h.expose(L),()=>{}}});return[c,s]})}return{createComponentInstances:v,processProps:a,createInstanceFromVNode:l}}const ne=u.createEventHook(),re=u.createEventHook(),q=u.createEventHook(),_=new p.Clock;let z=0,N=0;const{pause:be,resume:Pe,isActive:Ue}=u.useRafFn(()=>{ne.trigger({delta:z,elapsed:N,clock:_}),re.trigger({delta:z,elapsed:N,clock:_}),q.trigger({delta:z,elapsed:N,clock:_})},{immediate:!1});q.on(()=>{z=_.getDelta(),N=_.getElapsedTime()});function V(){return{onBeforeLoop:ne.on,onLoop:re.on,onAfterLoop:q.on,pause:be,resume:Pe,isActive:Ue}}const Oe=i.shallowRef(new p.Scene);function oe(){return{scene:Oe}}function ae(e){const n={nodes:{},materials:{}};return e&&e.traverse(o=>{o.name&&(n.nodes[o.name]=o),o.material&&!n.materials[o.material.name]&&(n.materials[o.material.name]=o.material)}),n}async function xe(e,n,o,a,l){const{logError:m}=B(),v=new e;l&&l(v),o&&o(v);const r=(Array.isArray(n)?n:[n]).map(f=>new Promise((c,s)=>{v.load(f,d=>{d.scene&&Object.assign(d,ae(d.scene)),c(d)},a,d=>s(m("[useLoader] - Failed to load resource",d)))}));return D(n)?await Promise.all(r):await r[0]}async function $e(e){const n=new p.LoadingManager,o=new p.TextureLoader(n),a=l=>new Promise((m,v)=>{o.load(l,t=>m(t),()=>null,()=>{v(new Error("[useTextures] - Failed to load texture"))})});if(D(e)){const l=await Promise.all(e.map(m=>a(m)));return e.length>1?l:l[0]}else{const{map:l,displacementMap:m,normalMap:v,roughnessMap:t,metalnessMap:r,aoMap:f}=e;return{map:l?await a(l):null,displacementMap:m?await a(m):null,normalMap:v?await a(v):null,roughnessMap:t?await a(t):null,metalnessMap:r?await a(r):null,aoMap:f?await a(f):null}}}const W=i.shallowReactive({camera:void 0,cameras:[],aspectRatio:i.computed(()=>window.innerWidth/window.innerHeight)});function x(){function e(o){return W[o]}function n(o,a){W[o]=a}return{state:W,...i.toRefs(W),getState:e,setState:n}}const X=i.shallowRef(new p.Raycaster),R=i.ref(new p.Vector2),ie=i.ref(null);function se(){const{setState:e}=x();e("raycaster",X.value),e("pointer",R),e("currentInstance",ie),i.provide("raycaster",X),i.provide("pointer",R),i.provide("currentInstance",ie);function n(o){R.value.x=o.clientX/window.innerWidth*2-1,R.value.y=-(o.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",n),i.onUnmounted(()=>{window.removeEventListener("pointermove",n)}),{raycaster:X,pointer:R}}const Y={realistic:{outputEncoding:p.sRGBEncoding,toneMapping:p.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:p.PCFSoftShadowMap}}},ce=(e,n)=>{for(const o of Object.keys(n))n[o]instanceof Object&&Object.assign(n[o],ce(e[o],n[o]));return Object.assign(e||{},n),e},S=i.shallowRef(),J=i.ref(!1);function le(e,n,o){const{alpha:a=!0,antialias:l=!0,depth:m,logarithmicDepthBuffer:v,failIfMajorPerformanceCaveat:t,precision:r,premultipliedAlpha:f,stencil:c,shadows:s=!1,shadowMapType:d=p.PCFShadowMap,physicallyCorrectLights:w=!1,useLegacyLights:g=!1,outputEncoding:h=p.LinearEncoding,toneMapping:y=p.NoToneMapping,toneMappingExposure:U=1,context:M=void 0,powerPreference:T="default",preserveDrawingBuffer:L=!1,clearColor:b,windowSize:P=!1,preset:F=void 0}=i.toRefs(o),{setState:j}=x(),{width:ue,height:pe}=u.resolveUnref(P)?u.useWindowSize():u.useElementSize(n),{logError:Re}=B(),{pixelRatio:de}=u.useDevicePixelRatio(),{pause:Fe,resume:ke}=V(),Z=i.computed(()=>ue.value/pe.value),me=()=>{S.value&&(S.value.setSize(ue.value,pe.value),S.value.setPixelRatio(Math.min(de.value,2)))},ge=()=>{if(!S.value)return;const A=u.resolveUnref(F);if(A){A in Y||Re("Renderer Preset must be one of these: "+Object.keys(Y).join(", ")),ce(S.value,Y[A]);return}S.value.shadowMap.enabled=u.resolveUnref(s),S.value.shadowMap.type=u.resolveUnref(d),S.value.toneMapping=u.resolveUnref(y)||p.NoToneMapping,S.value.toneMappingExposure=u.resolveUnref(U),S.value.outputEncoding=u.resolveUnref(h)||p.LinearEncoding,b!=null&&b.value&&S.value.setClearColor(ve(u.resolveUnref(b))),S.value.useLegacyLights=u.resolveUnref(g)},De=()=>{const A=u.unrefElement(e);S.value||!A||(S.value=new p.WebGLRenderer({canvas:A,alpha:u.resolveUnref(a),antialias:u.resolveUnref(l),context:u.resolveUnref(M),depth:u.resolveUnref(m),failIfMajorPerformanceCaveat:u.resolveUnref(t),logarithmicDepthBuffer:u.resolveUnref(v),powerPreference:u.resolveUnref(T),precision:u.resolveUnref(r),stencil:u.resolveUnref(c),preserveDrawingBuffer:u.resolveUnref(L),premultipliedAlpha:u.resolveUnref(f)}),j("renderer",S.value),j("clock",new p.Clock),j("aspectRatio",Z),ge(),me(),ke(),J.value=!0)},ze=()=>{S.value&&(S.value.dispose(),S.value=void 0,J.value=!1,Fe())};return i.watch([Z,de],me),i.watch([s,d,h,g,y,U,b],ge),i.watch(()=>[e,n],()=>{u.unrefElement(e)&&u.unrefElement(n)&&De()},{immediate:!0,deep:!0}),{renderer:S,isReady:J,dispose:ze,aspectRatio:Z}}const{logError:fe,logWarning:je}=B(),Ae=i.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Number,physicallyCorrectLights:{type:Boolean,default:!1,validator:e=>(e&&je("physicallyCorrectLights is deprecated. Use useLegacyLights instead."),!0)},useLegacyLights:Boolean,outputEncoding:Number,toneMapping:Number,toneMappingExposure:Number,context:Object,powerPreference:String,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:{type:Boolean,default:!1},preset:String},setup(e,{slots:n,attrs:o}){const a=i.ref(),l=i.ref(),{renderer:m,dispose:v,aspectRatio:t}=le(a,l,e);return i.provide("aspect-ratio",t),i.provide("renderer",m),n.default&&!n.default().some(r=>r.type.name==="Scene")&&fe("TresCanvas must contain a Scene component."),n.default&&!n.default().some(r=>{var f;return(f=r.type.name)==null?void 0:f.includes("Camera")})&&fe("Scene must contain a Camera component."),i.onBeforeUnmount(()=>v()),()=>{if(n.default)return i.h("div",{ref:l,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",pointerEvents:"auto",touchAction:"none",...o.style}},[i.h("div",{style:{width:"100%",height:"100%"}},[i.h("canvas",{ref:a,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}}),n.default()])])}}}),Be=i.defineComponent({name:"Scene",setup(e,{slots:n}){const{setState:o}=x(),{scene:a}=oe(),l=i.inject("renderer"),{activeCamera:m}=G(),{raycaster:v,pointer:t}=se(),{onLoop:r}=V();return i.provide("local-scene",a),o("scene",a.value),r(()=>{m.value&&(v.value.setFromCamera(t.value,m.value),l!=null&&l.value&&m&&(a!=null&&a.value)&&l.value.render(a==null?void 0:a.value,m.value))}),()=>{if(n.default)return n.default()}}}),Ie=Symbol("UseTresState"),_e={install(e,n){const o=(n==null?void 0:n.prefix)||"Tres";e.component(`${o}Canvas`,Ae),e.component(`${o}Scene`,Be);const{catalogue:a,extend:l}=ee(e,o);e.provide("catalogue",a),e.provide("extend",l),e.provide("useTres",x());const{createComponentInstances:m}=K(o);m(a).forEach(([t,r])=>{e.component(t,r)})}};C.CameraType=E,C.UseTresStateSymbol=Ie,C.default=_e,C.trasverseObjects=ae,C.useCamera=G,C.useCatalogue=ee,C.useInstanceCreator=K,C.useLoader=xe,C.useRaycaster=se,C.useRenderLoop=V,C.useRenderer=le,C.useScene=oe,C.useTexture=$e,C.useTres=x,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [