@tresjs/core 2.0.0-rc.4 → 2.1.0

package/dist/tres.js

@@ -1,31 +1,67 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-rc.4
+ * version: v2.1.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { ref as E, watchEffect as de, toRef as _e, shallowRef as me, toRefs as pe, computed as ve, watch as W, shallowReactive as ge, provide as Oe, inject as ke, onUnmounted as he, createRenderer as je, defineComponent as we, onMounted as De, h as j } from "vue";
+import { ref as E, shallowReactive as de, computed as me, toRefs as pe, provide as _e, inject as Oe, watchEffect as ve, toRef as ke, shallowRef as ge, watch as H, onUnmounted as he, createRenderer as je, defineComponent as we, onMounted as De, h as D } from "vue";
 import * as be from "three";
-import { MathUtils as Ie, PerspectiveCamera as $, OrthographicCamera as Be, Clock as ye, Color as N, SRGBColorSpace as Fe, ACESFilmicToneMapping as ze, PCFSoftShadowMap as Ge, PCFShadowMap as Ve, LinearSRGBColorSpace as ne, NoToneMapping as re, WebGLRenderer as We, LoadingManager as He, TextureLoader as Ue, Raycaster as Ye, Vector2 as $e, BufferAttribute as Ne } from "three";
-import { createEventHook as J, useRafFn as qe, toValue as l, useWindowSize as Ke, useElementSize as Je, useDevicePixelRatio as Xe, unrefElement as q, useEventListener as Qe } from "@vueuse/core";
-const Ce = E({ uuid: Ie.generateUUID() }), Me = (e) => void Object.assign(Ce.value, e);
-var Ze = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Ze || {});
-const et = 45;
-let A;
-function xe() {
-  const { state: e, setState: t, aspectRatio: o } = _();
+import { PerspectiveCamera as N, OrthographicCamera as Ie, Clock as ye, Color as U, SRGBColorSpace as Be, ACESFilmicToneMapping as Fe, PCFSoftShadowMap as ze, PCFShadowMap as Ge, LinearSRGBColorSpace as ne, NoToneMapping as re, WebGLRenderer as Ve, LoadingManager as He, TextureLoader as We, Raycaster as Ye, Vector2 as $e, BufferAttribute as Ne } from "three";
+import { createEventHook as J, useRafFn as Ue, toValue as u, useWindowSize as Ke, useElementSize as qe, useDevicePixelRatio as Je, unrefElement as K, useEventListener as Xe } from "@vueuse/core";
+const oe = (e) => typeof e == "function", Qe = (e) => typeof e == "string", Ce = (e) => !!e && e.constructor === Array, Me = E({}), xe = (e) => void Object.assign(Me.value, e), p = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0e", "0f", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1a", "1b", "1c", "1d", "1e", "1f", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2a", "2b", "2c", "2d", "2e", "2f", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3a", "3b", "3c", "3d", "3e", "3f", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4a", "4b", "4c", "4d", "4e", "4f", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5a", "5b", "5c", "5d", "5e", "5f", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6a", "6b", "6c", "6d", "6e", "6f", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7a", "7b", "7c", "7d", "7e", "7f", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8a", "8b", "8c", "8d", "8e", "8f", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9a", "9b", "9c", "9d", "9e", "9f", "a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "aa", "ab", "ac", "ad", "ae", "af", "b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "ba", "bb", "bc", "bd", "be", "bf", "c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "ca", "cb", "cc", "cd", "ce", "cf", "d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9", "da", "db", "dc", "dd", "de", "df", "e0", "e1", "e2", "e3", "e4", "e5", "e6", "e7", "e8", "e9", "ea", "eb", "ec", "ed", "ee", "ef", "f0", "f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "fa", "fb", "fc", "fd", "fe", "ff"];
+function Ze() {
+  const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, o = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0;
+  return (p[e & 255] + p[e >> 8 & 255] + p[e >> 16 & 255] + p[e >> 24 & 255] + "-" + p[t & 255] + p[t >> 8 & 255] + "-" + p[t >> 16 & 15 | 64] + p[t >> 24 & 255] + "-" + p[o & 63 | 128] + p[o >> 8 & 255] + "-" + p[o >> 16 & 255] + p[o >> 24 & 255] + p[a & 255] + p[a >> 8 & 255] + p[a >> 16 & 255] + p[a >> 24 & 255]).toLowerCase();
+}
+const X = Symbol();
+function et() {
+  const e = de({
+    uuid: Ze(),
+    camera: void 0,
+    cameras: [],
+    scene: void 0,
+    renderer: void 0,
+    aspectRatio: me(() => window.innerWidth / window.innerHeight)
+  });
+  function t(n) {
+    return e[n];
+  }
+  function o(n, r) {
+    e[n] = r;
+  }
+  const a = {
+    state: e,
+    ...pe(e),
+    getState: t,
+    setState: o
+  };
+  return _e(X, a), a;
+}
+const B = () => Oe(X, {
+  state: de({
+    camera: void 0,
+    cameras: [],
+    scene: void 0,
+    renderer: void 0
+  })
+});
+var tt = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(tt || {});
+const at = 45;
+let _;
+function Re() {
+  const { state: e, setState: t, aspectRatio: o } = B();
   function a(s = "Perspective", f) {
-    var u, m, g;
+    var l, d, v;
     if (s === "Perspective") {
-      const { near: w, far: C, fov: h } = f || {
+      const { near: C, far: M, fov: w } = f || {
         near: 0.1,
         far: 1e3,
-        fov: et
+        fov: at
       };
-      A = new $(h, ((u = e.aspectRatio) == null ? void 0 : u.value) || window.innerWidth / window.innerHeight, w, C), (m = e.cameras) == null || m.push(A);
+      _ = new N(w, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, C, M), (d = e.cameras) == null || d.push(_);
     } else {
-      const { left: w, right: C, top: h, bottom: P, near: M, far: O } = f || {
+      const { left: C, right: M, top: w, bottom: P, near: h, far: x } = f || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,17 +69,17 @@ function xe() {
         near: 0.1,
         far: 1e3
       };
-      A = new Be(w, C, h, P, M, O), (g = e.cameras) == null || g.push(A);
+      _ = new Ie(C, M, w, P, h, x), (v = e.cameras) == null || v.push(_);
     }
-    return e.camera = A, t("camera", e.camera), A;
+    return e.camera = _, t("camera", e.camera), _;
   }
   function n() {
     var s;
-    e.camera instanceof $ && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (s = e.camera) == null || s.updateProjectionMatrix();
+    e.camera instanceof N && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (s = e.camera) == null || s.updateProjectionMatrix();
   }
   function r(s) {
     var f;
-    (f = e.cameras) == null || f.push(s), s instanceof $ && e.aspectRatio && (s.aspect = e.aspectRatio.value), s.updateProjectionMatrix(), t("camera", s);
+    (f = e.cameras) == null || f.push(s), s instanceof N && e.aspectRatio && (s.aspect = e.aspectRatio.value), s.updateProjectionMatrix(), t("camera", s);
   }
   function c(s) {
     var f;
@@ -52,10 +88,10 @@ function xe() {
   function i() {
     e.cameras = [];
   }
-  return de(() => {
+  return ve(() => {
     o != null && o.value && n();
   }), {
-    activeCamera: _e(e, "camera"),
+    activeCamera: ke(e, "camera"),
     createCamera: a,
     updateCamera: n,
     pushCamera: r,
@@ -63,57 +99,73 @@ function xe() {
     setFirstCamera: c
   };
 }
-const Re = J(), Ee = J(), X = J(), D = new ye();
-let H = 0, U = 0;
-const { pause: tt, resume: at, isActive: nt } = qe(
+const Ee = J(), Pe = J(), Q = J(), I = new ye();
+let W = 0, Y = 0;
+const { pause: nt, resume: rt, isActive: ot } = Ue(
   () => {
-    Re.trigger({ delta: H, elapsed: U, clock: D }), Ee.trigger({ delta: H, elapsed: U, clock: D }), X.trigger({ delta: H, elapsed: U, clock: D });
+    Ee.trigger({ delta: W, elapsed: Y, clock: I }), Pe.trigger({ delta: W, elapsed: Y, clock: I }), Q.trigger({ delta: W, elapsed: Y, clock: I });
   },
   { immediate: !1 }
 );
-X.on(() => {
-  H = D.getDelta(), U = D.getElapsedTime();
+Q.on(() => {
+  W = I.getDelta(), Y = I.getElapsedTime();
 });
-function Pe() {
+function Se() {
   return {
-    onBeforeLoop: Re.on,
-    onLoop: Ee.on,
-    onAfterLoop: X.on,
-    pause: tt,
-    resume: at,
-    isActive: nt
+    onBeforeLoop: Ee.on,
+    onLoop: Pe.on,
+    onAfterLoop: Q.on,
+    pause: nt,
+    resume: rt,
+    isActive: ot
   };
 }
-function rt(e) {
-  return e instanceof N ? e : Array.isArray(e) ? new N(...e) : new N(e);
+function it(e) {
+  return e instanceof U ? e : Array.isArray(e) ? new U(...e) : new U(e);
 }
-const K = {
+const q = {
   realistic: {
-    outputColorSpace: Fe,
-    toneMapping: ze,
+    outputColorSpace: Be,
+    toneMapping: Fe,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: Ge
+      type: ze
     }
   }
-}, Se = (e, t) => {
+}, Te = (e, t) => {
   for (const o of Object.keys(t))
-    t[o] instanceof Object && Object.assign(t[o], Se(e[o], t[o]));
+    t[o] instanceof Object && Object.assign(t[o], Te(e[o], t[o]));
   return Object.assign(e || {}, t), e;
-}, ot = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot", it = /* @__PURE__ */ st(ot);
+}, st = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot", ct = /* @__PURE__ */ ft(st);
 function V(e) {
   return e.replace(/-([a-z])/g, (t, o) => o.toUpperCase());
 }
-function st(e, t) {
+function ft(e, t) {
   const o = /* @__PURE__ */ Object.create(null), a = e.split(",");
   for (let n = 0; n < a.length; n++)
     o[a[n]] = !0;
   return t ? (n) => !!o[n.toLowerCase()] : (n) => !!o[n];
 }
-function ct(e) {
+const xt = !0, ie = "[TresJS ▲ ■ ●] ";
+function F() {
+  function e(a, n) {
+    console.error(`${ie} ${a}`, n || "");
+  }
+  function t(a) {
+    console.warn(`${ie} ${a}`);
+  }
+  function o(a, n) {
+  }
+  return {
+    logError: e,
+    logWarning: t,
+    logMessage: o
+  };
+}
+function ut(e) {
   var te, ae;
-  const t = me(), o = E(!1), {
+  const t = ge(), o = E(!1), {
     alpha: a = !0,
     antialias: n = !0,
     depth: r,
@@ -121,94 +173,93 @@ function ct(e) {
     failIfMajorPerformanceCaveat: i,
     precision: s,
     premultipliedAlpha: f,
-    stencil: u,
-    shadows: m = !1,
-    shadowMapType: g = Ve,
-    useLegacyLights: w = !1,
-    outputColorSpace: C = ne,
-    toneMapping: h = re,
+    stencil: l,
+    shadows: d = !1,
+    shadowMapType: v = Ge,
+    useLegacyLights: C = !1,
+    outputColorSpace: M = ne,
+    toneMapping: w = re,
     toneMappingExposure: P = 1,
-    context: M = void 0,
-    powerPreference: O = "default",
-    preserveDrawingBuffer: S = !1,
-    clearColor: d,
-    windowSize: b = !1,
-    preset: y = void 0
-  } = pe(e), { state: v, setState: T } = _(), { width: k, height: x } = l(b) == !0 || l(b) === "" || l(b) === "true" ? Ke() : Je(v.container), { logError: B, logWarning: F } = I(), { pixelRatio: R } = Xe(), { pause: z, resume: G } = Pe(), Y = ve(() => k.value / x.value);
-  !l(b) && ((ae = (te = v.container) == null ? void 0 : te.value) == null ? void 0 : ae.offsetHeight) === 0 && F(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
+    context: h = void 0,
+    powerPreference: x = "default",
+    preserveDrawingBuffer: $ = !1,
+    clearColor: y,
+    windowSize: m = !1,
+    preset: R = void 0
+  } = pe(e), { state: g, setState: b } = B(), { width: O, height: k } = u(m) == !0 || u(m) === "" || u(m) === "true" ? Ke() : qe(g.container), { logError: S, logWarning: z } = F(), { pixelRatio: j } = Je(), { pause: T, resume: G } = Se(), L = me(() => O.value / k.value);
+  !u(m) && ((ae = (te = g.container) == null ? void 0 : te.value) == null ? void 0 : ae.offsetHeight) === 0 && z(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
 You could set windowSize=true to force the canvas to be the size of the window.`);
   const Z = () => {
-    t.value && (t.value.setSize(k.value, x.value), t.value.setPixelRatio(Math.min(R.value, 2)));
+    t.value && (t.value.setSize(O.value, k.value), t.value.setPixelRatio(Math.min(j.value, 2)));
   }, ee = () => {
     if (!t.value)
       return;
-    const L = l(y);
-    if (L) {
-      L in K || B("Renderer Preset must be one of these: " + Object.keys(K).join(", ")), Se(t.value, K[L]);
+    const A = u(R);
+    if (A) {
+      A in q || S("Renderer Preset must be one of these: " + Object.keys(q).join(", ")), Te(t.value, q[A]);
       return;
     }
-    t.value.shadowMap.enabled = l(m), t.value.shadowMap.type = l(g), t.value.toneMapping = l(h) || re, t.value.toneMappingExposure = l(P), t.value.outputColorSpace = l(C) || ne, d != null && d.value && t.value.setClearColor(rt(l(d))), t.value.useLegacyLights = l(w);
+    t.value.shadowMap.enabled = u(d), t.value.shadowMap.type = u(v), t.value.toneMapping = u(w) || re, t.value.toneMappingExposure = u(P), t.value.outputColorSpace = u(M) || ne, y != null && y.value && t.value.setClearColor(it(u(y))), t.value.useLegacyLights = u(C);
   }, Le = () => {
-    const L = q(v.canvas);
-    L && (t.value = new We({
-      canvas: L,
-      alpha: l(a),
-      antialias: l(n),
-      context: l(M),
-      depth: l(r),
-      failIfMajorPerformanceCaveat: l(i),
-      logarithmicDepthBuffer: l(c),
-      powerPreference: l(O),
-      precision: l(s),
-      stencil: l(u),
-      preserveDrawingBuffer: l(S),
-      premultipliedAlpha: l(f)
-    }), T("renderer", t.value), T("clock", new ye()), T("aspectRatio", Y), ee(), Z(), G(), o.value = !0);
+    const A = K(g.canvas);
+    A && (t.value = new Ve({
+      canvas: A,
+      alpha: u(a),
+      antialias: u(n),
+      context: u(h),
+      depth: u(r),
+      failIfMajorPerformanceCaveat: u(i),
+      logarithmicDepthBuffer: u(c),
+      powerPreference: u(x),
+      precision: u(s),
+      stencil: u(l),
+      preserveDrawingBuffer: u($),
+      premultipliedAlpha: u(f)
+    }), b("renderer", t.value), b("clock", new ye()), b("aspectRatio", L), ee(), Z(), G(), o.value = !0);
   }, Ae = () => {
-    t.value && (t.value.dispose(), t.value = void 0, o.value = !1, z());
+    t.value && (t.value.dispose(), t.value = void 0, o.value = !1, T());
   };
-  return W([Y, R], Z), W(
-    [m, g, C, w, h, P, d],
+  return H([L, j], Z), H(
+    [d, v, M, C, w, P, y],
     ee
-  ), W(
-    () => [v.canvas, v.container],
+  ), H(
+    () => [g.canvas, g.container],
     () => {
-      q(v.canvas) && q(v.container) && Le();
+      K(g.canvas) && K(g.container) && Le();
     },
     { immediate: !0, deep: !0 }
   ), {
     renderer: t,
     isReady: o,
     dispose: Ae,
-    aspectRatio: Y
+    aspectRatio: L
   };
 }
-const oe = (e) => typeof e == "function", ft = (e) => typeof e == "string", Te = (e) => !!e && e.constructor === Array;
-function ut(e) {
+function lt(e) {
   const t = { nodes: {}, materials: {} };
   return e && e.traverse((o) => {
     o.name && (t.nodes[o.name] = o), o.material && !t.materials[o.material.name] && (t.materials[o.material.name] = o.material);
   }), t;
 }
 async function Rt(e, t, o, a, n) {
-  const { logError: r } = I(), c = new e();
+  const { logError: r } = F(), c = new e();
   n && n(c), o && o(c);
   const s = (Array.isArray(t) ? t : [t]).map(
-    (f) => new Promise((u, m) => {
+    (f) => new Promise((l, d) => {
       c.load(
         f,
-        (g) => {
-          g.scene && Object.assign(g, ut(g.scene)), u(g);
+        (v) => {
+          v.scene && Object.assign(v, lt(v.scene)), l(v);
         },
         a,
-        (g) => m(r("[useLoader] - Failed to load resource", g))
+        (v) => d(r("[useLoader] - Failed to load resource", v))
       );
     })
   );
-  return Te(t) ? await Promise.all(s) : await s[0];
+  return Ce(t) ? await Promise.all(s) : await s[0];
 }
 async function Et(e) {
-  const t = new He(), o = new Ue(t), a = (n) => new Promise((r, c) => {
+  const t = new He(), o = new We(t), a = (n) => new Promise((r, c) => {
     o.load(
       n,
       (i) => r(i),
@@ -218,7 +269,7 @@ async function Et(e) {
       }
     );
   });
-  if (Te(e)) {
+  if (Ce(e)) {
     const n = await Promise.all(e.map((r) => a(r)));
     return e.length > 1 ? n : n[0];
   } else {
@@ -229,8 +280,8 @@ async function Et(e) {
       roughnessMap: i,
       metalnessMap: s,
       aoMap: f,
-      alphaMap: u,
-      matcap: m
+      alphaMap: l,
+      matcap: d
     } = e;
     return {
       map: n ? await a(n) : null,
@@ -239,51 +290,14 @@ async function Et(e) {
       roughnessMap: i ? await a(i) : null,
       metalnessMap: s ? await a(s) : null,
       aoMap: f ? await a(f) : null,
-      alphaMap: u ? await a(u) : null,
-      matcap: m ? await a(m) : null
+      alphaMap: l ? await a(l) : null,
+      matcap: d ? await a(d) : null
     };
   }
 }
-const p = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0e", "0f", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1a", "1b", "1c", "1d", "1e", "1f", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2a", "2b", "2c", "2d", "2e", "2f", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3a", "3b", "3c", "3d", "3e", "3f", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4a", "4b", "4c", "4d", "4e", "4f", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5a", "5b", "5c", "5d", "5e", "5f", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6a", "6b", "6c", "6d", "6e", "6f", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7a", "7b", "7c", "7d", "7e", "7f", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8a", "8b", "8c", "8d", "8e", "8f", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9a", "9b", "9c", "9d", "9e", "9f", "a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "aa", "ab", "ac", "ad", "ae", "af", "b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "ba", "bb", "bc", "bd", "be", "bf", "c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "ca", "cb", "cc", "cd", "ce", "cf", "d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9", "da", "db", "dc", "dd", "de", "df", "e0", "e1", "e2", "e3", "e4", "e5", "e6", "e7", "e8", "e9", "ea", "eb", "ec", "ed", "ee", "ef", "f0", "f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "fa", "fb", "fc", "fd", "fe", "ff"];
-function lt() {
-  const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, o = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0;
-  return (p[e & 255] + p[e >> 8 & 255] + p[e >> 16 & 255] + p[e >> 24 & 255] + "-" + p[t & 255] + p[t >> 8 & 255] + "-" + p[t >> 16 & 15 | 64] + p[t >> 24 & 255] + "-" + p[o & 63 | 128] + p[o >> 8 & 255] + "-" + p[o >> 16 & 255] + p[o >> 24 & 255] + p[a & 255] + p[a >> 8 & 255] + p[a >> 16 & 255] + p[a >> 24 & 255]).toLowerCase();
-}
-const Q = Symbol();
 function dt() {
-  const e = ge({
-    uuid: lt(),
-    camera: void 0,
-    cameras: [],
-    scene: void 0,
-    renderer: void 0,
-    aspectRatio: ve(() => window.innerWidth / window.innerHeight)
-  });
-  function t(n) {
-    return e[n];
-  }
-  function o(n, r) {
-    e[n] = r;
-  }
-  const a = {
-    state: e,
-    ...pe(e),
-    getState: t,
-    setState: o
-  };
-  return Oe(Q, a), a;
-}
-const _ = () => ke(Q, {
-  state: ge({
-    camera: void 0,
-    cameras: [],
-    scene: void 0,
-    renderer: void 0
-  })
-});
-function mt() {
   var c;
-  const e = me(new Ye()), t = E(new $e()), o = E(null), { setState: a, state: n } = _();
+  const e = ge(new Ye()), t = E(new $e()), o = E(null), { setState: a, state: n } = B();
   a("raycaster", e.value), a("pointer", t), a("currentInstance", o);
   function r(i) {
     t.value.x = i.clientX / window.innerWidth * 2 - 1, t.value.y = -(i.clientY / window.innerHeight) * 2 + 1;
@@ -296,24 +310,8 @@ function mt() {
     pointer: t
   };
 }
-const Pt = !0, ie = "[TresJS ▲ ■ ●] ";
-function I() {
-  function e(a, n) {
-    console.error(`${ie} ${a}`, n || "");
-  }
-  function t(a) {
-    console.warn(`${ie} ${a}`);
-  }
-  function o(a, n) {
-  }
-  return {
-    logError: e,
-    logWarning: t,
-    logMessage: o
-  };
-}
-function St() {
-  const { logWarning: e } = I();
+function Pt() {
+  const { logWarning: e } = F();
   function t(a, n, r) {
     let c = null;
     return a.traverse((i) => {
@@ -328,31 +326,31 @@ function St() {
     seekByName: o
   };
 }
-const pt = /^on[^a-z]/, vt = (e) => pt.test(e);
+const mt = /^on[^a-z]/, pt = (e) => mt.test(e);
 let se = null;
 const ce = {
   GEOMETRY_VIA_PROP: "tres__geometryViaProp",
   MATERIAL_VIA_PROP: "tres__materialViaProp"
-}, { logError: fe } = I();
+}, { logError: fe } = F();
 let ue = !0;
-const gt = {
+const vt = {
   createElement(e, t, o, a) {
     var s, f;
-    if (a || (a = {}), a.args || (a.args = []), e === "template" || it(e))
+    if (a || (a = {}), a.args || (a.args = []), e === "template" || ct(e))
       return null;
     let n = e.replace("Tres", ""), r;
     if (e === "primitive") {
       (a == null ? void 0 : a.object) === void 0 && fe("Tres primitives need a prop 'object'");
-      const u = a.object;
-      n = u.type, r = Object.assign(u, { type: n, attach: a.attach, primitive: !0 });
+      const l = a.object;
+      n = l.type, r = Object.assign(l, { type: n, attach: a.attach, primitive: !0 });
     } else {
-      const u = Ce.value[n];
-      u || fe(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`), r = new u(...a.args);
+      const l = Me.value[n];
+      l || fe(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`), r = new l(...a.args);
     }
     if (r.isCamera && ue) {
       a != null && a.position || r.position.set(3, 3, 3), a != null && a.lookAt || r.lookAt(0, 0, 0);
-      const { setFirstCamera: u } = xe();
-      u(r), ue = !1;
+      const { setFirstCamera: l } = Re();
+      l(r), ue = !1;
     }
     (a == null ? void 0 : a.attach) === void 0 && (r.isMaterial ? r.attach = "material" : r.isBufferGeometry && (r.attach = "geometry"));
     const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } = ce;
@@ -394,9 +392,12 @@ const gt = {
       }
       if (r.includes("-") && i === void 0) {
         const f = r.split("-");
-        i = f.reduce((u, m) => u[V(m)], n), r = f.pop(), c = r.toLowerCase(), i != null && i.set || (n = f.reduce((u, m) => u[V(m)], n));
+        i = f.reduce((l, d) => l[V(d)], n), r = f.pop(), c = r.toLowerCase(), i != null && i.set || (n = f.reduce((l, d) => l[V(d)], n));
+      }
+      if (pt(r)) {
+        const f = r;
+        e.events[f] = a;
       }
-      vt(r) && (e.events[r] = a);
       let s = a;
       if (s === "" && (s = !0), oe(i)) {
         Array.isArray(s) ? e[c](...s) : e[c](s);
@@ -417,15 +418,15 @@ const gt = {
   setScopeId: () => void 0,
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
-}, { createApp: ht } = je(gt), wt = (e) => {
-  const t = ht(o);
+}, { createApp: gt } = je(vt), ht = (e) => {
+  const t = gt(o);
   function o() {
     return e && e.default ? e.default() : [];
   }
   return t;
 };
-Me(be);
-const { logWarning: le } = I(), bt = we({
+xe(be);
+const { logWarning: le } = F(), wt = we({
   name: "TresScene",
   props: [
     "shadows",
@@ -446,46 +447,50 @@ const { logWarning: le } = I(), bt = we({
   ],
   setup(e, { slots: t, expose: o }) {
     e.physicallyCorrectLights === !0 && le("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const a = E(), n = E(), r = new be.Scene(), { setState: c } = _();
+    const a = E(), n = E(), r = new be.Scene(), { setState: c } = B();
     c("scene", r), c("canvas", n), c("container", a);
     const i = E(), s = t && t.default && t.default();
-    s && (s == null ? void 0 : s.length) > 0 && (i.value = s.some((h) => ft(h.type) && h.type.includes("Camera")) || e.camera, i.value || le("No camera found in the scene, please add one!")), De(() => {
-      g();
+    s && (s == null ? void 0 : s.length) > 0 && (i.value = s.some((h) => Qe(h.type) && h.type.includes("Camera")) || e.camera, i.value || le("No camera found in the scene, please add one!"));
+    const { onLoop: f, resume: l } = Se();
+    De(() => {
+      M();
     }), he(() => {
       c("renderer", null);
     });
-    const { activeCamera: f, pushCamera: u, clearCameras: m } = xe();
-    function g() {
-      const { renderer: h } = ct(e);
-      e.camera && u(e.camera);
-      const { onLoop: P } = Pe(), { raycaster: M, pointer: O } = mt();
-      let S = null, d = null;
-      de(() => {
-        f.value && M.value.setFromCamera(O.value, f.value);
-      }), P(() => {
-        var b, y, v, T, k, x, B, F, R, z;
-        if (f.value && e.disableRender !== !0 && ((b = h.value) == null || b.render(r, f.value)), M.value) {
-          const G = M.value.intersectObjects(r.children);
-          G.length > 0 ? (d = G[0], S === null && ((T = (v = (y = d.object) == null ? void 0 : y.events) == null ? void 0 : v.onPointerEnter) == null || T.call(v, d)), (B = (x = (k = d.object) == null ? void 0 : k.events) == null ? void 0 : x.onPointerMove) == null || B.call(x, d)) : S !== null && ((z = (R = (F = d == null ? void 0 : d.object) == null ? void 0 : F.events) == null ? void 0 : R.onPointerLeave) == null || z.call(R, S), d = null), S = d;
+    const { activeCamera: d, pushCamera: v, clearCameras: C } = Re();
+    function M() {
+      const { renderer: h } = ut(e);
+      e.camera && v(e.camera);
+      const { raycaster: x, pointer: $ } = dt();
+      let y = null, m = null;
+      ve(() => {
+        d.value && x.value.setFromCamera($.value, d.value);
+      }), f(() => {
+        var R, g, b, O, k, S, z, j, T, G;
+        if (d.value && e.disableRender !== !0 && ((R = h.value) == null || R.render(r, d.value)), x.value) {
+          const L = x.value.intersectObjects(r.children);
+          L.length > 0 ? (m = L[0], y === null && ((O = (b = (g = m.object) == null ? void 0 : g.events) == null ? void 0 : b.onPointerEnter) == null || O.call(b, m)), (z = (S = (k = m.object) == null ? void 0 : k.events) == null ? void 0 : S.onPointerMove) == null || z.call(S, m)) : y !== null && ((G = (T = (j = m == null ? void 0 : m.object) == null ? void 0 : j.events) == null ? void 0 : T.onPointerLeave) == null || G.call(T, y), m = null), y = m;
         }
-      }), Qe(n.value, "click", () => {
-        var b, y, v;
-        d !== null && ((v = (y = (b = d.object) == null ? void 0 : b.events) == null ? void 0 : y.onClick) == null || v.call(y, d));
+      }), Xe(n.value, "click", () => {
+        var R, g, b;
+        m !== null && ((b = (g = (R = m.object) == null ? void 0 : R.events) == null ? void 0 : g.onClick) == null || b.call(g, m));
       });
     }
     let w;
-    function C() {
-      w = wt(t), w.provide("useTres", _()), w.provide(Q, _()), w.provide("extend", Me), w.mount(r);
+    function P() {
+      w = ht(t);
+      const h = B();
+      w.provide("useTres", h), w.provide(X, h), w.provide("extend", xe), w.mount(r);
     }
-    return C(), o({
+    return P(), o({
       scene: r
-    }), W(
+    }), H(
       () => e.camera,
       (h) => {
-        h && (m(), u(h));
+        h && (C(), v(h));
       }
-    ), () => j(
-      j(
+    ), () => D(
+      D(
         "div",
         {
           ref: a,
@@ -500,7 +505,7 @@ const { logWarning: le } = I(), bt = we({
           }
         },
         [
-          j(
+          D(
             "div",
             {
               style: {
@@ -509,7 +514,7 @@ const { logWarning: le } = I(), bt = we({
               }
             },
             [
-              j("canvas", {
+              D("canvas", {
                 ref: n,
                 "data-scene": r.uuid,
                 style: {
@@ -527,7 +532,7 @@ const { logWarning: le } = I(), bt = we({
       )
     );
   }
-}), yt = we({
+}), bt = we({
   name: "TresCanvas",
   props: [
     "shadows",
@@ -547,31 +552,31 @@ const { logWarning: le } = I(), bt = we({
     "camera"
   ],
   setup(e, { slots: t, expose: o }) {
-    const a = dt();
-    return o(a), () => j(bt, e, t);
+    const a = et();
+    return o(a), () => D(wt, e, t);
   }
-}), Tt = {
+}), St = {
   install(e) {
-    e.component("TresCanvas", yt);
+    e.component("TresCanvas", bt);
   }
 };
 export {
-  Ze as CameraType,
-  Q as TRES_CONTEXT_KEY,
-  yt as TresCanvas,
-  Ce as catalogue,
-  Tt as default,
-  Me as extend,
-  Pt as isProd,
-  ut as trasverseObjects,
-  xe as useCamera,
+  tt as CameraType,
+  X as TRES_CONTEXT_KEY,
+  bt as TresCanvas,
+  Me as catalogue,
+  St as default,
+  xe as extend,
+  xt as isProd,
+  lt as trasverseObjects,
+  Re as useCamera,
   Rt as useLoader,
-  I as useLogger,
-  mt as useRaycaster,
-  Pe as useRenderLoop,
-  ct as useRenderer,
-  St as useSeek,
+  F as useLogger,
+  dt as useRaycaster,
+  Se as useRenderLoop,
+  ut as useRenderer,
+  Pt as useSeek,
   Et as useTexture,
-  _ as useTres,
-  dt as useTresProvider
+  B as useTres,
+  et as useTresProvider
 };