@tresjs/core 3.0.0 → 3.1.0-next.0

package/dist/tres.js

@@ -1,473 +1,504 @@
 /**
  * name: @tresjs/core
- * version: v3.0.0
+ * version: v3.1.0-next.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { ref as W, computed as _, watchEffect as b, onUnmounted as j, shallowRef as z, watch as J, reactive as re, readonly as ne, provide as ae, inject as oe, createRenderer as se, defineComponent as ie, useSlots as ue, onMounted as le, openBlock as ce, createElementBlock as fe, normalizeStyle as me } from "vue";
-import * as pe from "three";
-import { PerspectiveCamera as G, OrthographicCamera as ve, Camera as de, Clock as ge, SRGBColorSpace as we, ACESFilmicToneMapping as ye, PCFSoftShadowMap as Ce, Vector3 as Pe, Color as O, WebGLRenderer as H, LoadingManager as Me, TextureLoader as _e, Vector2 as Ee, Raycaster as xe, BufferAttribute as Le, Scene as Te } from "three";
-import { createEventHook as A, useRafFn as be, toValue as y, unrefElement as De, useDevicePixelRatio as Ae, usePointer as ke, useElementBounding as Se, useWindowSize as he, useElementSize as Be } from "@vueuse/core";
-const K = W({}), X = (e) => void Object.assign(K.value, e), I = (e) => typeof e == "function", Y = (e) => !!e && e.constructor === Array, Oe = ({ sizes: e, scene: a }) => {
-  const t = W([]), n = _(
-    () => t.value[0]
-  ), r = (o, s = !1) => {
-    t.value.some(({ uuid: u }) => u === o.uuid) || (s ? l(o) : t.value.push(o));
-  }, i = (o) => {
-    t.value = t.value.filter(({ uuid: s }) => s !== o.uuid);
-  }, l = (o) => {
-    const s = o instanceof de ? o : t.value.find((c) => c.uuid === o);
-    if (!s)
-      return;
-    const u = t.value.filter(({ uuid: c }) => c !== s.uuid);
-    t.value = [s, ...u];
+import { computed as M, ref as j, watchEffect as O, triggerRef as G, shallowRef as I, watch as V, onUnmounted as se, watchPostEffect as ie, reactive as ue, readonly as le, provide as Q, inject as ce, createRenderer as fe, defineComponent as q, useSlots as me, h as U, Fragment as pe, openBlock as ve, createElementBlock as de, normalizeStyle as ge } from "vue";
+import * as ye from "three";
+import { PerspectiveCamera as W, OrthographicCamera as we, Camera as Ce, Clock as Pe, SRGBColorSpace as Me, ACESFilmicToneMapping as _e, PCFSoftShadowMap as Ee, Vector3 as Le, Color as B, WebGLRenderer as z, LoadingManager as xe, TextureLoader as Ae, Vector2 as he, Raycaster as ke, BufferAttribute as be, Scene as Te } from "three";
+import { createEventHook as k, useRafFn as De, toValue as g, unrefElement as Se, useDevicePixelRatio as Oe, usePointer as Be, useElementBounding as Re, useWindowSize as Fe, useElementSize as je } from "@vueuse/core";
+const ze = ({ sizes: e, scene: n }) => {
+  var s, u;
+  const t = M(() => n.value.children.filter((l) => l.isCamera)), a = j(((u = (s = t.value) == null ? void 0 : s[0]) == null ? void 0 : u.uuid) ?? ""), r = M(
+    () => t.value.find((l) => l.uuid === a.value) ?? t.value.at(0)
+  ), i = (l, c = !1) => {
+    t.value.some(({ uuid: p }) => p === l.uuid) || (n.value.add(l), G(n), c && o(l));
+  }, f = (l) => {
+    n.value.remove(l), G(n);
+  }, o = (l) => {
+    const c = l instanceof Ce ? l.uuid : l;
+    c && (a.value = c);
   };
-  return b(() => {
-    e.aspectRatio.value && t.value.forEach((o) => {
-      o instanceof G && (o.aspect = e.aspectRatio.value), (o instanceof G || o instanceof ve) && o.updateProjectionMatrix();
+  return O(() => {
+    e.aspectRatio.value && t.value.forEach((l) => {
+      l instanceof W && (l.aspect = e.aspectRatio.value), (l instanceof W || l instanceof we) && l.updateProjectionMatrix();
     });
-  }), a.userData.tres__registerCamera = r, a.userData.tres__deregisterCamera = i, j(() => {
-    t.value = [];
-  }), {
-    camera: n,
+  }), n.value.userData.tres__registerCamera = i, n.value.userData.tres__deregisterCamera = f, {
+    camera: r,
     cameras: t,
-    addCamera: r,
-    removeCamera: i,
-    setCameraActive: l
+    addCamera: i,
+    removeCamera: f,
+    setCameraActive: o
   };
-}, Q = A(), Z = A(), $ = A(), D = new ge();
+}, Z = k(), ee = k(), N = k(), h = new Pe();
 let R = 0, F = 0;
-const { pause: Re, resume: Fe, isActive: ze } = be(
+const { pause: He, resume: Ge, isActive: Ve } = De(
   () => {
-    Q.trigger({ delta: R, elapsed: F, clock: D }), Z.trigger({ delta: R, elapsed: F, clock: D }), $.trigger({ delta: R, elapsed: F, clock: D });
+    Z.trigger({ delta: R, elapsed: F, clock: h }), ee.trigger({ delta: R, elapsed: F, clock: h }), N.trigger({ delta: R, elapsed: F, clock: h });
   },
   { immediate: !1 }
 );
-$.on(() => {
-  R = D.getDelta(), F = D.getElapsedTime();
+N.on(() => {
+  R = h.getDelta(), F = h.getElapsedTime();
 });
-const ee = () => ({
-  onBeforeLoop: Q.on,
-  onLoop: Z.on,
-  onAfterLoop: $.on,
-  pause: Re,
-  resume: Fe,
-  isActive: ze
-}), h = {
+const te = () => ({
+  onBeforeLoop: Z.on,
+  onLoop: ee.on,
+  onAfterLoop: N.on,
+  pause: He,
+  resume: Ge,
+  isActive: Ve
+}), D = {
   realistic: {
-    outputColorSpace: we,
-    toneMapping: ye,
+    outputColorSpace: Me,
+    toneMapping: _e,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: Ce
+      type: Ee
     }
   }
-}, te = (e, a) => {
-  for (const t of Object.keys(a))
-    a[t] instanceof Object && Object.assign(a[t], te(e[t], a[t]));
-  return Object.assign(e || {}, a), e;
-}, He = "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", Ve = /* @__PURE__ */ Ge(He);
-function B(e) {
-  return e.replace(/-([a-z])/g, (a, t) => t.toUpperCase());
+}, re = (e, n) => {
+  for (const t of Object.keys(n))
+    n[t] instanceof Object && Object.assign(n[t], re(e[t], n[t]));
+  return Object.assign(e || {}, n), e;
+}, We = "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", $e = /* @__PURE__ */ Ie(We);
+function S(e) {
+  return e.replace(/-([a-z])/g, (n, t) => t.toUpperCase());
 }
-function Ge(e, a) {
-  const t = /* @__PURE__ */ Object.create(null), n = e.split(",");
-  for (let r = 0; r < n.length; r++)
-    t[n[r]] = !0;
-  return a ? (r) => !!t[r.toLowerCase()] : (r) => !!t[r];
+function Ie(e, n) {
+  const t = /* @__PURE__ */ Object.create(null), a = e.split(",");
+  for (let r = 0; r < a.length; r++)
+    t[a[r]] = !0;
+  return n ? (r) => !!t[r.toLowerCase()] : (r) => !!t[r];
 }
-const We = (e, a) => {
-  const t = /* @__PURE__ */ new Set(), n = [];
+const Ne = (e, n) => {
+  const t = /* @__PURE__ */ new Set(), a = [];
   for (const r of e) {
-    const i = a(r);
-    t.has(i) || (t.add(i), n.push(r));
+    const i = n(r);
+    t.has(i) || (t.add(i), a.push(r));
   }
-  return n;
-}, N = (e, a) => {
-  if (!a)
+  return a;
+}, J = (e, n) => {
+  if (!n)
     return;
-  const t = Array.isArray(a) ? a : a.match(/([^[.\]])+/g);
-  return t == null ? void 0 : t.reduce((n, r) => n && n[r], e);
-}, je = (e, a, t) => {
-  const n = Array.isArray(a) ? a : a.match(/([^[.\]])+/g);
-  n && n.reduce((r, i, l) => (r[i] === void 0 && (r[i] = {}), l === n.length - 1 && (r[i] = t), r[i]), e);
-}, st = !0, q = "[TresJS ▲ ■ ●] ";
-function k() {
-  function e(n, r) {
-    console.error(`${q} ${n}`, r || "");
+  const t = Array.isArray(n) ? n : n.match(/([^[.\]])+/g);
+  return t == null ? void 0 : t.reduce((a, r) => a && a[r], e);
+}, qe = (e, n, t) => {
+  const a = Array.isArray(n) ? n : n.match(/([^[.\]])+/g);
+  a && a.reduce((r, i, f) => (r[i] === void 0 && (r[i] = {}), f === a.length - 1 && (r[i] = t), r[i]), e);
+};
+function ne(e, n) {
+  if (e === n)
+    return !0;
+  if (e === null || typeof e != "object" || n === null || typeof n != "object")
+    return !1;
+  const t = Object.keys(e), a = Object.keys(n);
+  if (t.length !== a.length)
+    return !1;
+  for (const r of t)
+    if (!a.includes(r) || !ne(e[r], n[r]))
+      return !1;
+  return !0;
+}
+function Ue(e, n) {
+  if (!Array.isArray(e) || !Array.isArray(n) || e.length !== n.length)
+    return !1;
+  for (let t = 0; t < e.length; t++)
+    if (!ne(e[t], n[t]))
+      return !1;
+  return !0;
+}
+const ct = !0, K = "[TresJS ▲ ■ ●] ";
+function b() {
+  function e(a, r) {
+    console.error(`${K} ${a}`, r || "");
   }
-  function a(n) {
-    console.warn(`${q} ${n}`);
+  function n(a) {
+    console.warn(`${K} ${a}`);
   }
-  function t(n, r) {
+  function t(a, r) {
   }
   return {
     logError: e,
-    logWarning: a,
+    logWarning: n,
     logMessage: t
   };
 }
-function it(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof Pe ? [e.x, e.y, e.z] : e;
+function ft(e) {
+  return typeof e == "number" ? [e, e, e] : e instanceof Le ? [e.x, e.y, e.z] : e;
 }
-function $e(e) {
-  return e instanceof O ? e : Array.isArray(e) ? new O(...e) : new O(e);
+function Je(e) {
+  return e instanceof B ? e : Array.isArray(e) ? new B(...e) : new B(e);
 }
-function Ie({
+function Ke({
   scene: e,
-  canvas: a,
+  canvas: n,
   options: t,
-  disableRender: n,
+  disableRender: a,
   contextParts: { sizes: r, camera: i }
 }) {
-  const l = _(() => ({
-    alpha: y(t.alpha),
-    depth: y(t.depth),
-    canvas: De(a),
-    context: y(t.context),
-    stencil: y(t.stencil),
-    antialias: y(t.antialias) === void 0 ? (
+  const f = M(() => ({
+    alpha: g(t.alpha),
+    depth: g(t.depth),
+    canvas: Se(n),
+    context: g(t.context),
+    stencil: g(t.stencil),
+    antialias: g(t.antialias) === void 0 ? (
       // an opinionated default of tres
       !0
-    ) : y(t.antialias),
-    precision: y(t.precision),
-    powerPreference: y(t.powerPreference),
-    premultipliedAlpha: y(t.premultipliedAlpha),
-    preserveDrawingBuffer: y(t.preserveDrawingBuffer),
-    logarithmicDepthBuffer: y(t.logarithmicDepthBuffer),
-    failIfMajorPerformanceCaveat: y(t.failIfMajorPerformanceCaveat)
-  })), o = z(new H(l.value));
-  J(l, () => {
-    o.value.dispose(), o.value = new H(l.value);
-  }), b(() => {
+    ) : g(t.antialias),
+    precision: g(t.precision),
+    powerPreference: g(t.powerPreference),
+    premultipliedAlpha: g(t.premultipliedAlpha),
+    preserveDrawingBuffer: g(t.preserveDrawingBuffer),
+    logarithmicDepthBuffer: g(t.logarithmicDepthBuffer),
+    failIfMajorPerformanceCaveat: g(t.failIfMajorPerformanceCaveat)
+  })), o = I(new z(f.value));
+  V(f, () => {
+    o.value.dispose(), o.value = new z(f.value);
+  }), O(() => {
     o.value.setSize(r.width.value, r.height.value);
   });
-  const { pixelRatio: s } = Ae();
-  b(() => {
+  const { pixelRatio: s } = Oe();
+  O(() => {
     o.value.setPixelRatio(s.value);
   });
-  const { logError: u } = k(), f = (() => {
-    const p = new H(), d = {
+  const { logError: u } = b(), c = (() => {
+    const v = new z(), C = {
       shadowMap: {
-        enabled: p.shadowMap.enabled,
-        type: p.shadowMap.type
+        enabled: v.shadowMap.enabled,
+        type: v.shadowMap.type
       },
-      toneMapping: p.toneMapping,
-      toneMappingExposure: p.toneMappingExposure,
-      outputColorSpace: p.outputColorSpace,
-      useLegacyLights: p.useLegacyLights
+      toneMapping: v.toneMapping,
+      toneMappingExposure: v.toneMappingExposure,
+      outputColorSpace: v.outputColorSpace,
+      useLegacyLights: v.useLegacyLights
     };
-    return p.dispose(), d;
+    return v.dispose(), C;
   })();
-  b(() => {
-    const p = y(t.preset);
-    p && (p in h || u("Renderer Preset must be one of these: " + Object.keys(h).join(", ")), te(o.value, h[p]));
-    const d = (L, x) => {
-      const T = y(L), S = () => {
-        if (p)
-          return N(h[p], x);
+  O(() => {
+    const v = g(t.preset);
+    v && (v in D || u("Renderer Preset must be one of these: " + Object.keys(D).join(", ")), re(o.value, D[v]));
+    const C = (x, E) => {
+      const A = g(x), T = () => {
+        if (v)
+          return J(D[v], E);
       };
-      if (T !== void 0)
-        return T;
-      const m = S();
-      return m !== void 0 ? m : N(f, x);
-    }, v = (L, x) => je(o.value, x, d(L, x));
-    v(t.shadows, "shadowMap.enabled"), v(t.toneMapping, "toneMapping"), v(t.shadowMapType, "shadowMap.type"), v(t.useLegacyLights, "useLegacyLights"), v(t.outputColorSpace, "outputColorSpace"), v(t.toneMappingExposure, "toneMappingExposure");
-    const E = d(t.clearColor, "clearColor");
-    E && o.value.setClearColor(
-      E ? $e(E) : new O(0)
+      if (A !== void 0)
+        return A;
+      const m = T();
+      return m !== void 0 ? m : J(c, E);
+    }, y = (x, E) => qe(o.value, E, C(x, E));
+    y(t.shadows, "shadowMap.enabled"), y(t.toneMapping, "toneMapping"), y(t.shadowMapType, "shadowMap.type"), y(t.useLegacyLights, "useLegacyLights"), y(t.outputColorSpace, "outputColorSpace"), y(t.toneMappingExposure, "toneMappingExposure");
+    const _ = C(t.clearColor, "clearColor");
+    _ && o.value.setClearColor(
+      _ ? Je(_) : new B(0)
       // default clear color is not easily/efficiently retrievable from three
     );
   });
-  const { pause: w, resume: C, onLoop: M } = ee();
-  return M(() => {
-    i.value && !y(n) && o.value.render(e, i.value);
-  }), C(), j(() => {
-    w(), o.value.dispose(), o.value.forceContextLoss();
+  const { pause: p, resume: P, onLoop: L } = te();
+  return L(() => {
+    i.value && !g(a) && o.value.render(e.value, i.value);
+  }), P(), se(() => {
+    p(), o.value.dispose(), o.value.forceContextLoss();
   }), {
     renderer: o
   };
 }
-function Ne(e) {
-  const a = { nodes: {}, materials: {} };
+const X = (e) => typeof e == "function", ae = (e) => !!e && e.constructor === Array;
+function Xe(e) {
+  const n = { nodes: {}, materials: {} };
   return e && e.traverse((t) => {
-    t.name && (a.nodes[t.name] = t), t.material && !a.materials[t.material.name] && (a.materials[t.material.name] = t.material);
-  }), a;
+    t.name && (n.nodes[t.name] = t), t.material && !n.materials[t.material.name] && (n.materials[t.material.name] = t.material);
+  }), n;
 }
-async function ut(e, a, t, n, r) {
-  const { logError: i } = k(), l = new e();
-  r && r(l), t && t(l);
-  const s = (Array.isArray(a) ? a : [a]).map(
-    (u) => new Promise((c, f) => {
-      l.load(
+async function mt(e, n, t, a, r) {
+  const { logError: i } = b(), f = new e();
+  r && r(f), t && t(f);
+  const s = (Array.isArray(n) ? n : [n]).map(
+    (u) => new Promise((l, c) => {
+      f.load(
         u,
-        (w) => {
-          w.scene && Object.assign(w, Ne(w.scene)), c(w);
+        (p) => {
+          p.scene && Object.assign(p, Xe(p.scene)), l(p);
         },
-        n,
-        (w) => f(i("[useLoader] - Failed to load resource", w))
+        a,
+        (p) => c(i("[useLoader] - Failed to load resource", p))
       );
     })
   );
-  return Y(a) ? await Promise.all(s) : await s[0];
+  return ae(n) ? await Promise.all(s) : await s[0];
 }
-async function lt(e) {
-  const a = new Me(), t = new _e(a), n = (r) => new Promise((i, l) => {
+async function pt(e) {
+  const n = new xe(), t = new Ae(n), a = (r) => new Promise((i, f) => {
     t.load(
       r,
       (o) => i(o),
       () => null,
       () => {
-        l(new Error("[useTextures] - Failed to load texture"));
+        f(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (Y(e)) {
-    const r = await Promise.all(e.map((i) => n(i)));
+  if (ae(e)) {
+    const r = await Promise.all(e.map((i) => a(i)));
     return e.length > 1 ? r : r[0];
   } else {
     const {
       map: r,
       displacementMap: i,
-      normalMap: l,
+      normalMap: f,
       roughnessMap: o,
       metalnessMap: s,
       aoMap: u,
-      alphaMap: c,
-      matcap: f
+      alphaMap: l,
+      matcap: c
     } = e;
     return {
-      map: r ? await n(r) : null,
-      displacementMap: i ? await n(i) : null,
-      normalMap: l ? await n(l) : null,
-      roughnessMap: o ? await n(o) : null,
-      metalnessMap: s ? await n(s) : null,
-      aoMap: u ? await n(u) : null,
-      alphaMap: c ? await n(c) : null,
-      matcap: f ? await n(f) : null
+      map: r ? await a(r) : null,
+      displacementMap: i ? await a(i) : null,
+      normalMap: f ? await a(f) : null,
+      roughnessMap: o ? await a(o) : null,
+      metalnessMap: s ? await a(s) : null,
+      aoMap: u ? await a(u) : null,
+      alphaMap: l ? await a(l) : null,
+      matcap: c ? await a(c) : null
     };
   }
 }
-const qe = (e, { renderer: a, camera: t, raycaster: n }) => {
-  const r = _(() => a.value.domElement), { x: i, y: l } = ke({ target: r }), { width: o, height: s, top: u, left: c } = Se(r), f = ({ x: m, y: P }) => {
+const Ye = (e, { renderer: n, camera: t, raycaster: a }) => {
+  const r = M(() => n.value.domElement), { x: i, y: f } = Be({ target: r }), { width: o, height: s, top: u, left: l } = Re(r), c = ({ x: m, y: w }) => {
     if (r.value)
       return {
-        x: (m - c.value) / o.value * 2 - 1,
-        y: -((P - u.value) / s.value) * 2 + 1
+        x: (m - l.value) / o.value * 2 - 1,
+        y: -((w - u.value) / s.value) * 2 + 1
       };
-  }, w = ({ x: m, y: P }) => {
+  }, p = ({ x: m, y: w }) => {
     if (t.value)
-      return n.value.setFromCamera(new Ee(m, P), t.value), n.value.intersectObjects(e.value, !1);
-  }, C = (m) => {
-    const P = f({
+      return a.value.setFromCamera(new he(m, w), t.value), a.value.intersectObjects(e.value, !1);
+  }, P = (m) => {
+    const w = c({
       x: (m == null ? void 0 : m.clientX) ?? i.value,
-      y: (m == null ? void 0 : m.clientY) ?? l.value
+      y: (m == null ? void 0 : m.clientY) ?? f.value
     });
-    return P ? w(P) || [] : [];
-  }, M = _(() => C()), p = A(), d = A(), v = (m, P) => {
-    m.trigger({ event: P, intersects: C(P) });
-  }, E = (m) => {
-    v(d, m);
+    return w ? p(w) || [] : [];
+  }, L = M(() => P()), v = k(), C = k(), y = (m, w) => {
+    m.trigger({ event: w, intersects: P(w) });
+  }, _ = (m) => {
+    y(C, m);
   };
-  let L;
-  const x = (m) => {
-    var P;
-    L = (P = C(m)[0]) == null ? void 0 : P.object;
-  }, T = (m) => {
-    var P;
-    m instanceof PointerEvent && L === ((P = C(m)[0]) == null ? void 0 : P.object) && v(p, m);
-  }, S = (m) => d.trigger({ event: m, intersects: [] });
-  return r.value.addEventListener("pointerup", T), r.value.addEventListener("pointerdown", x), r.value.addEventListener("pointermove", E), r.value.addEventListener("pointerleave", S), j(() => {
-    r != null && r.value && (r.value.removeEventListener("pointerup", T), r.value.removeEventListener("pointerdown", x), r.value.removeEventListener("pointermove", E), r.value.removeEventListener("pointerleave", S));
+  let x;
+  const E = (m) => {
+    var w;
+    x = (w = P(m)[0]) == null ? void 0 : w.object;
+  }, A = (m) => {
+    var w;
+    m instanceof PointerEvent && x === ((w = P(m)[0]) == null ? void 0 : w.object) && y(v, m);
+  }, T = (m) => C.trigger({ event: m, intersects: [] });
+  return ie((m) => {
+    r.value && (r.value.addEventListener("pointerup", A), r.value.addEventListener("pointerdown", E), r.value.addEventListener("pointermove", _), r.value.addEventListener("pointerleave", T), m(() => {
+      r != null && r.value && (r.value.removeEventListener("pointerup", A), r.value.removeEventListener("pointerdown", E), r.value.removeEventListener("pointermove", _), r.value.removeEventListener("pointerleave", T));
+    }));
   }), {
-    intersects: M,
-    onClick: (m) => p.on(m).off,
-    onPointerMove: (m) => d.on(m).off
+    intersects: L,
+    onClick: (m) => v.on(m).off,
+    onPointerMove: (m) => C.on(m).off
   };
 };
-function ct() {
-  const { logWarning: e } = k();
-  function a(n, r, i) {
-    let l = null;
-    return n.traverse((o) => {
-      o[r] === i && (l = o);
-    }), l || e(`Child with ${r} '${i}' not found.`), l;
+function vt() {
+  const { logWarning: e } = b();
+  function n(a, r, i) {
+    let f = null;
+    return a.traverse((o) => {
+      o[r] === i && (f = o);
+    }), f || e(`Child with ${r} '${i}' not found.`), f;
   }
-  function t(n, r) {
-    return a(n, "name", r);
+  function t(a, r) {
+    return n(a, "name", r);
   }
   return {
-    seek: a,
+    seek: n,
     seekByName: t
   };
 }
-const Ue = ({ scene: e, contextParts: a }) => {
-  const t = re({
+const Qe = ({ scene: e, contextParts: n }) => {
+  const t = ue({
     click: /* @__PURE__ */ new Map(),
     pointerMove: /* @__PURE__ */ new Map(),
     pointerEnter: /* @__PURE__ */ new Map(),
     pointerLeave: /* @__PURE__ */ new Map()
-  }), n = (u) => {
-    Object.values(t).forEach((c) => c.delete(u));
+  }), a = (u) => {
+    Object.values(t).forEach((l) => l.delete(u));
   }, r = (u) => {
-    const { onClick: c, onPointerMove: f, onPointerEnter: w, onPointerLeave: C } = u;
-    c && t.click.set(u, c), f && t.pointerMove.set(u, f), w && t.pointerEnter.set(u, w), C && t.pointerLeave.set(u, C);
+    const { onClick: l, onPointerMove: c, onPointerEnter: p, onPointerLeave: P } = u;
+    l && t.click.set(u, l), c && t.pointerMove.set(u, c), p && t.pointerEnter.set(u, p), P && t.pointerLeave.set(u, P);
   };
-  e.userData.tres__registerAtPointerEventHandler = r, e.userData.tres__deregisterAtPointerEventHandler = n;
-  const i = _(
-    () => We(
+  e.userData.tres__registerAtPointerEventHandler = r, e.userData.tres__deregisterAtPointerEventHandler = a;
+  const i = M(
+    () => Ne(
       Object.values(t).map((u) => Array.from(u.keys())).flat(),
       ({ uuid: u }) => u
     )
-  ), { onClick: l, onPointerMove: o } = qe(i, a);
-  l(({ intersects: u, event: c }) => {
-    var f;
-    u.length && ((f = t.click.get(u[0].object)) == null || f(u[0], c));
+  ), { onClick: f, onPointerMove: o } = Ye(i, n);
+  f(({ intersects: u, event: l }) => {
+    var c;
+    u.length && ((c = t.click.get(u[0].object)) == null || c(u[0], l));
   });
   let s;
-  return o(({ intersects: u, event: c }) => {
-    var p, d, v, E;
-    const f = (p = u == null ? void 0 : u[0]) == null ? void 0 : p.object, { pointerLeave: w, pointerEnter: C, pointerMove: M } = t;
-    s && s !== f && ((d = w.get(s)) == null || d(s, c)), f && (s !== f && ((v = C.get(f)) == null || v(u[0], c)), (E = M.get(f)) == null || E(u[0], c)), s = f || null;
+  return o(({ intersects: u, event: l }) => {
+    var v, C, y, _;
+    const c = (v = u == null ? void 0 : u[0]) == null ? void 0 : v.object, { pointerLeave: p, pointerEnter: P, pointerMove: L } = t;
+    s && s !== c && ((C = p.get(s)) == null || C(s, l)), c && (s !== c && ((y = P.get(c)) == null || y(u[0], l)), (_ = L.get(c)) == null || _(u[0], l)), s = c || null;
   }), {
     registerObject: r,
-    deregisterObject: n
+    deregisterObject: a
   };
-};
-function Je({
+}, $ = j({}), oe = (e) => void Object.assign($.value, e);
+function Ze({
   scene: e,
-  canvas: a,
+  canvas: n,
   windowSize: t,
-  disableRender: n,
+  disableRender: a,
   rendererOptions: r
 }) {
-  const i = _(
-    () => y(t) ? he() : Be(y(a).parentElement)
-  ), l = _(() => i.value.width.value), o = _(() => i.value.height.value), s = _(() => l.value / o.value), u = {
+  const i = M(
+    () => {
+      var y;
+      return g(t) ? Fe() : je((y = g(n)) == null ? void 0 : y.parentElement);
+    }
+  ), f = M(() => i.value.width.value), o = M(() => i.value.height.value), s = M(() => f.value / o.value), u = {
     height: o,
-    width: l,
+    width: f,
     aspectRatio: s
-  }, c = z(e), {
-    camera: f,
-    cameras: w,
-    addCamera: C,
-    removeCamera: M,
-    setCameraActive: p
-  } = Oe({ sizes: u, scene: e }), { renderer: d } = Ie(
+  }, {
+    camera: l,
+    cameras: c,
+    addCamera: p,
+    removeCamera: P,
+    setCameraActive: L
+  } = ze({ sizes: u, scene: e }), { renderer: v } = Ke(
     {
       scene: e,
-      canvas: a,
+      canvas: n,
       options: r,
-      contextParts: { sizes: u, camera: f },
-      disableRender: n
+      contextParts: { sizes: u, camera: l },
+      disableRender: a
     }
-  ), v = {
+  ), C = {
     sizes: u,
-    scene: c,
-    camera: f,
-    cameras: ne(w),
-    renderer: d,
-    raycaster: z(new xe()),
-    addCamera: C,
-    removeCamera: M,
-    setCameraActive: p
+    scene: e,
+    camera: l,
+    cameras: le(c),
+    renderer: v,
+    raycaster: I(new ke()),
+    controls: j(null),
+    extend: oe,
+    addCamera: p,
+    removeCamera: P,
+    setCameraActive: L
   };
-  return ae("useTres", v), v;
+  return Q("useTres", C), C;
 }
-function Ke() {
-  const e = oe("useTres");
+function et() {
+  const e = ce("useTres");
   if (!e)
     throw new Error("useTresContext must be used together with useTresContextProvider");
   return e;
 }
-const ft = Ke;
-let V = null, g = null;
-const { logError: U } = k(), Xe = {
-  createElement(e, a, t, n) {
-    var l, o;
-    if (n || (n = {}), n.args || (n.args = []), e === "template" || Ve(e))
+const dt = et;
+let H = null, d = null;
+const { logError: Y } = b(), tt = {
+  createElement(e, n, t, a) {
+    var f, o;
+    if (a || (a = {}), a.args || (a.args = []), e === "template" || $e(e))
       return null;
     let r = e.replace("Tres", ""), i;
     if (e === "primitive") {
-      (n == null ? void 0 : n.object) === void 0 && U("Tres primitives need a prop 'object'");
-      const s = n.object;
-      r = s.type, i = Object.assign(s, { type: r, attach: n.attach, primitive: !0 });
+      (a == null ? void 0 : a.object) === void 0 && Y("Tres primitives need a prop 'object'");
+      const s = a.object;
+      r = s.type, i = Object.assign(s, { type: r, attach: a.attach, primitive: !0 });
     } else {
-      const s = K.value[r];
-      s || U(`${r} is not defined on the THREE namespace. Use extend to add it to the catalog.`), i = new s(...n.args);
+      const s = $.value[r];
+      s || Y(`${r} is not defined on the THREE namespace. Use extend to add it to the catalog.`), i = new s(...a.args);
     }
-    return i.isCamera && (n != null && n.position || i.position.set(3, 3, 3), n != null && n.lookAt || i.lookAt(0, 0, 0)), (n == null ? void 0 : n.attach) === void 0 && (i.isMaterial ? i.attach = "material" : i.isBufferGeometry && (i.attach = "geometry")), i.isObject3D && ((l = n == null ? void 0 : n.material) != null && l.isMaterial && (i.userData.tres__materialViaProp = !0), (o = n == null ? void 0 : n.geometry) != null && o.isBufferGeometry && (i.userData.tres__geometryViaProp = !0)), i;
+    return i.isCamera && (a != null && a.position || i.position.set(3, 3, 3), a != null && a.lookAt || i.lookAt(0, 0, 0)), (a == null ? void 0 : a.attach) === void 0 && (i.isMaterial ? i.attach = "material" : i.isBufferGeometry && (i.attach = "geometry")), i.isObject3D && ((f = a == null ? void 0 : a.material) != null && f.isMaterial && (i.userData.tres__materialViaProp = !0), (o = a == null ? void 0 : a.geometry) != null && o.isBufferGeometry && (i.userData.tres__geometryViaProp = !0)), i;
   },
-  insert(e, a) {
-    var t, n, r, i, l, o, s, u, c;
-    if (a && a.isScene && (g = a), (((t = e == null ? void 0 : e.__vnode) == null ? void 0 : t.type) === "TresGroup" || ((n = e == null ? void 0 : e.__vnode) == null ? void 0 : n.type) === "TresObject3D") && a === null && !((i = (r = e == null ? void 0 : e.__vnode) == null ? void 0 : r.ctx) != null && i.asyncResolved)) {
-      V = e;
+  insert(e, n) {
+    var t, a, r, i, f, o, s, u, l;
+    if (n && n.isScene && (d = n), (((t = e == null ? void 0 : e.__vnode) == null ? void 0 : t.type) === "TresGroup" || ((a = e == null ? void 0 : e.__vnode) == null ? void 0 : a.type) === "TresObject3D") && n === null && !((i = (r = e == null ? void 0 : e.__vnode) == null ? void 0 : r.ctx) != null && i.asyncResolved)) {
+      H = e;
       return;
     } else
-      (l = e == null ? void 0 : e.__vnode) != null && l.type.includes("Controls") && a === null && (V = g);
-    if (a || (a = V), e != null && e.isObject3D) {
+      (f = e == null ? void 0 : e.__vnode) != null && f.type.includes("Controls") && n === null && (H = d);
+    if (n || (n = H), e != null && e.isObject3D) {
       if (e != null && e.isCamera) {
-        if (!(g != null && g.userData.tres__registerCamera))
+        if (!(d != null && d.userData.tres__registerCamera))
           throw "could not find tres__registerCamera on scene's userData";
-        (s = g == null ? void 0 : (o = g.userData).tres__registerCamera) == null || s.call(o, e);
+        (s = d == null ? void 0 : (o = d.userData).tres__registerCamera) == null || s.call(o, e);
       }
       if (e != null && e.onClick || e != null && e.onPointerMove || e != null && e.onPointerEnter || e != null && e.onPointerLeave) {
-        if (!(g != null && g.userData.tres__registerAtPointerEventHandler))
+        if (!(d != null && d.userData.tres__registerAtPointerEventHandler))
           throw "could not find tres__registerAtPointerEventHandler on scene's userData";
-        (c = g == null ? void 0 : (u = g.userData).tres__registerAtPointerEventHandler) == null || c.call(u, e);
+        (l = d == null ? void 0 : (u = d.userData).tres__registerAtPointerEventHandler) == null || l.call(u, e);
       }
     }
-    e != null && e.isObject3D && (a != null && a.isObject3D) ? (a.add(e), e.dispatchEvent({ type: "added" })) : e != null && e.isFog ? a.fog = e : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[a == null ? void 0 : a.attach], a && (a[e.attach] = e));
+    e != null && e.isObject3D && (n != null && n.isObject3D) ? (n.add(e), e.dispatchEvent({ type: "added" })) : e != null && e.isFog ? n.fog = e : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[n == null ? void 0 : n.attach], n && (n[e.attach] = e));
   },
   remove(e) {
-    var a, t;
+    var n, t;
     if (e) {
       if (e.isObject3D) {
-        const n = e, r = (s) => {
-          var c, f;
+        const a = e, r = (s) => {
+          var l, c;
           const u = s;
-          s.userData.tres__materialViaProp || (c = u.material) == null || c.dispose(), s.userData.tres__geometryViaProp || (f = u.geometry) == null || f.dispose();
-        }, i = g == null ? void 0 : g.userData.tres__deregisterAtPointerEventHandler, l = (s) => {
+          s.userData.tres__materialViaProp || (l = u.material) == null || l.dispose(), s.userData.tres__geometryViaProp || (c = u.geometry) == null || c.dispose();
+        }, i = d == null ? void 0 : d.userData.tres__deregisterAtPointerEventHandler, f = (s) => {
           if (!i)
             throw "could not find tres__deregisterAtPointerEventHandler on scene's userData";
           (s != null && s.onClick || s != null && s.onPointerMove || s != null && s.onPointerEnter || s != null && s.onPointerLeave) && (i == null || i(s));
         }, o = (s) => {
-          const u = g == null ? void 0 : g.userData.tres__deregisterCamera;
+          const u = d == null ? void 0 : d.userData.tres__deregisterCamera;
           if (!u)
             throw "could not find tres__deregisterCamera on scene's userData";
           s.isCamera && (u == null || u(s));
         };
-        n.traverse((s) => {
-          r(s), o(s), l == null || l(s);
-        }), r(n), o(n), l == null || l(n);
+        a.traverse((s) => {
+          r(s), o(s), f == null || f(s);
+        }), r(a), o(a), f == null || f(a);
       }
-      (a = e.removeFromParent) == null || a.call(e), (t = e.dispose) == null || t.call(e);
+      (n = e.removeFromParent) == null || n.call(e), (t = e.dispose) == null || t.call(e);
     }
   },
-  patchProp(e, a, t, n) {
+  patchProp(e, n, t, a) {
     if (e) {
-      let r = e, i = a, l = B(i), o = r == null ? void 0 : r[l];
+      let r = e, i = n, f = S(i), o = r == null ? void 0 : r[f];
+      if (i === "args") {
+        const u = e, l = t ?? [], c = a ?? [];
+        e.type && !Ue(l, c) && (r = Object.assign(u, new $.value[e.type](...a)));
+        return;
+      }
       if (r.type === "BufferGeometry") {
         if (i === "args")
           return;
         r.setAttribute(
-          B(i),
-          new Le(...n)
+          S(i),
+          new be(...a)
         );
         return;
       }
       if (i.includes("-") && o === void 0) {
         const u = i.split("-");
-        o = u.reduce((c, f) => c[B(f)], r), i = u.pop(), l = i.toLowerCase(), o != null && o.set || (r = u.reduce((c, f) => c[B(f)], r));
+        o = u.reduce((l, c) => l[S(c)], r), i = u.pop(), f = i.toLowerCase(), o != null && o.set || (r = u.reduce((l, c) => l[S(c)], r));
       }
-      let s = n;
-      if (s === "" && (s = !0), I(o)) {
-        Array.isArray(s) ? e[l](...s) : e[l](s);
+      let s = a;
+      if (s === "" && (s = !0), X(o)) {
+        Array.isArray(s) ? e[f](...s) : e[f](s);
         return;
       }
-      !(o != null && o.set) && !I(o) ? r[l] = s : o.constructor === s.constructor && (o != null && o.copy) ? o == null || o.copy(s) : Array.isArray(s) ? o.set(...s) : !o.isColor && o.setScalar ? o.setScalar(s) : o.set(s);
+      !(o != null && o.set) && !X(o) ? r[f] = s : o.constructor === s.constructor && (o != null && o.copy) ? o == null || o.copy(s) : Array.isArray(s) ? o.set(...s) : !o.isColor && o.setScalar ? o.setScalar(s) : o.set(s);
     }
   },
   parentNode(e) {
@@ -482,15 +513,9 @@ const { logError: U } = k(), Xe = {
   setScopeId: () => void 0,
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
-}, { createApp: Ye } = se(Xe), Qe = (e) => {
-  const a = Ye(t);
-  function t() {
-    return e && e.default ? e.default() : [];
-  }
-  return a;
-};
-X(pe);
-const Ze = ["data-scene"], et = /* @__PURE__ */ ie({
+}, { render: rt } = fe(tt);
+oe(ye);
+const nt = ["data-scene"], at = /* @__PURE__ */ q({
   __name: "TresCanvas",
   props: {
     shadows: { type: Boolean },
@@ -517,92 +542,89 @@ const Ze = ["data-scene"], et = /* @__PURE__ */ ie({
     failIfMajorPerformanceCaveat: { type: Boolean }
   },
   setup(e) {
-    const a = e, { logWarning: t } = k(), n = W(), r = z(new Te());
-    ee();
-    const i = ue();
-    let l;
-    const o = (u) => {
-      l = Qe(i), l.provide("useTres", u), l.provide("extend", X), l.mount(r.value);
-    }, s = _(() => a.disableRender);
-    return le(() => {
-      const u = n, c = Je({
-        scene: r.value,
-        canvas: u,
-        windowSize: a.windowSize,
-        disableRender: s,
-        rendererOptions: a
-      });
-      Ue({ scene: r.value, contextParts: c });
-      const { addCamera: f, camera: w, cameras: C, removeCamera: M } = c;
-      o(c);
-      const p = () => {
-        const d = new G(45, window.innerWidth / window.innerHeight, 0.1, 1e3);
-        d.position.set(3, 3, 3), d.lookAt(0, 0, 0), f(d);
-        const v = b(
-          () => {
-            C.value.length >= 2 && (d.removeFromParent(), M(d), v == null || v());
-          }
-        );
-      };
-      J(() => a.camera, (d, v) => {
-        d ? f(d) : v && (v.removeFromParent(), M(v));
-      }, {
-        immediate: !0
-      }), w.value || (t(
+    const n = e, { logWarning: t } = b(), a = j(), r = I(new Te());
+    te();
+    const i = me(), f = M(() => n.disableRender), o = Ze({
+      scene: r,
+      canvas: a,
+      windowSize: M(() => n.windowSize),
+      disableRender: f,
+      rendererOptions: n
+    });
+    Qe({ scene: r.value, contextParts: o });
+    const s = q({
+      setup() {
+        return Q("useTres", o), () => U(pe, null, i && i.default ? i.default() : []);
+      }
+    }), u = () => {
+      const c = r.value;
+      rt(U(s), c), G(r);
+    };
+    V(a, (c) => {
+      c && (u(), !o.camera.value && !n.camera && (t(
         "No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."
-      ), p());
-    }), (u, c) => (ce(), fe("canvas", {
+      ), l()));
+    }), V(() => n.camera, (c, p) => {
+      c ? o.addCamera(c, !0) : p && (p.removeFromParent(), o.removeCamera(p));
+    }, {
+      immediate: !0
+    });
+    const l = () => {
+      const c = new W(45, window.innerWidth / window.innerHeight, 0.1, 1e3);
+      c.position.set(3, 3, 3), c.lookAt(0, 0, 0), o.addCamera(c), o.cameras.value.length >= 2 && (c.removeFromParent(), o.removeCamera(c));
+    };
+    return (c, p) => (ve(), de("canvas", {
       ref_key: "canvas",
-      ref: n,
+      ref: a,
       "data-scene": r.value.uuid,
-      style: me({
+      style: ge({
         display: "block",
         width: "100%",
         height: "100%",
-        position: u.windowSize ? "fixed" : "relative",
+        position: c.windowSize ? "fixed" : "relative",
         top: 0,
         left: 0,
         pointerEvents: "auto",
         touchAction: "none",
         zIndex: 1
       })
-    }, null, 12, Ze));
+    }, null, 12, nt));
   }
-}), tt = [
+}), ot = [
   "TresCanvas",
   "TresLeches",
   "TresScene"
-], rt = {
+], st = {
   template: {
     compilerOptions: {
-      isCustomElement: (e) => e.startsWith("Tres") && !tt.includes(e) || e === "primitive"
+      isCustomElement: (e) => e.startsWith("Tres") && !ot.includes(e) || e === "primitive"
     }
   }
-}, mt = rt, pt = {
+}, gt = st, yt = {
   install(e) {
-    e.component("TresCanvas", et);
+    e.component("TresCanvas", at);
   }
 };
 export {
-  et as TresCanvas,
-  K as catalogue,
-  pt as default,
-  X as extend,
-  st as isProd,
-  $e as normalizeColor,
-  it as normalizeVectorFlexibleParam,
-  mt as templateCompilerOptions,
-  Ne as trasverseObjects,
-  Oe as useCamera,
-  ut as useLoader,
-  k as useLogger,
-  Ue as usePointerEventHandler,
-  qe as useRaycaster,
-  ee as useRenderLoop,
-  Ie as useRenderer,
-  ct as useSeek,
-  lt as useTexture,
-  ft as useTres,
-  Ke as useTresContext,
-  Je as useTresContextProvider
+  at as TresCanvas,
+  $ as catalogue,
+  yt as default,
+  oe as extend,
+  ct as isProd,
+  Je as normalizeColor,
+  ft as normalizeVectorFlexibleParam,
+  gt as templateCompilerOptions,
+  Xe as trasverseObjects,
+  ze as useCamera,
+  mt as useLoader,
+  b as useLogger,
+  Qe as usePointerEventHandler,
+  Ye as useRaycaster,
+  te as useRenderLoop,
+  Ke as useRenderer,
+  vt as useSeek,
+  pt as useTexture,
+  dt as useTres,
+  et as useTresContext,
+  Ze as useTresContextProvider
 };