@tresjs/core 3.0.1 → 3.1.0-next.1

package/dist/tres.js

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