@tresjs/core 2.4.0-next.6 → 2.4.0-next.8

package/dist/composables/useCamera/index.d.ts

@@ -7,9 +7,9 @@ interface TresCamera extends Camera {
         [key: string]: any;
     };
 }
-export declare function useCamera({ sizes, scene }: Pick<TresContext, 'sizes'> & {
+export declare const useCamera: ({ sizes, scene }: Pick<TresContext, "sizes"> & {
     scene: TresScene;
-}): {
+}) => {
     camera: import("vue").ComputedRef<TresCamera | undefined>;
     cameras: import("vue").Ref<{
         userData: {

package/dist/composables/usePointerEventHandler/index.d.ts

@@ -9,7 +9,10 @@ export type EventProps = {
     onPointerMove?: CallbackFn;
     onPointerLeave?: CallbackFnPointerLeave;
 };
-export declare const usePointerEventHandler: (scene: TresScene, contextParts: Pick<TresContext, 'renderer' | 'camera'>) => {
+export declare const usePointerEventHandler: ({ scene, contextParts }: {
+    scene: TresScene;
+    contextParts: Pick<TresContext, 'renderer' | 'camera'>;
+}) => {
     registerObject: (object: Object3D & EventProps) => void;
     deregisterObject: (object: Object3D) => void;
 };

package/dist/composables/useTresContextProvider/index.d.ts

@@ -2,7 +2,7 @@ import { Camera, Scene, WebGLRenderer } from 'three';
 import { UseRendererOptions } from '../useRenderer';
 import type { ComputedRef, DeepReadonly, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
 export type TresContext = {
-    scene: DeepReadonly<ShallowRef<Scene>>;
+    scene: ShallowRef<Scene>;
     camera: ComputedRef<Camera | undefined>;
     cameras: DeepReadonly<Ref<Camera[]>>;
     renderer: ShallowRef<WebGLRenderer>;

package/dist/tres.js

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

package/dist/tres.umd.cjs

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

package/dist/utils/index.d.ts

@@ -4,3 +4,5 @@ export declare const isHTMLTag: (key: string) => boolean;
 export declare function kebabToCamel(str: string): string;
 export declare function makeMap(str: string, expectsLowerCase?: boolean): (key: string) => boolean;
 export declare const uniqueBy: <T, K>(array: T[], iteratee: (value: T) => K) => T[];
+export declare const get: <T>(obj: any, path: string | string[]) => T | undefined;
+export declare const set: (obj: any, path: string | string[], value: any) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.4.0-next.6",
+  "version": "2.4.0-next.8",
   "type": "module",
   "packageManager": "pnpm@8.3.1",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",