@tresjs/core 2.0.0-alpha.2 → 2.0.0-alpha.4

package/dist/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-alpha.2
+ * version: v2.0.0-alpha.4
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { ref as M, watchEffect as Ee, toRef as xe, shallowRef as ne, toRefs as ae, computed as re, watch as O, shallowReactive as Pe, createRenderer as Re, defineComponent as Se, h as P } from "vue";
+import { ref as M, watchEffect as Ee, toRef as xe, shallowRef as ne, toRefs as ae, computed as re, watch as O, shallowReactive as Pe, createRenderer as Te, defineComponent as Re, onUnmounted as Se, h as P } from "vue";
 import * as oe from "three";
-import { MathUtils as Te, PerspectiveCamera as _, OrthographicCamera as Ae, Clock as ie, Color as W, sRGBEncoding as Oe, ACESFilmicToneMapping as ke, PCFSoftShadowMap as je, PCFShadowMap as Be, LinearEncoding as Y, NoToneMapping as Q, WebGLRenderer as De, LoadingManager as Fe, TextureLoader as _e, Raycaster as We, Vector2 as ze, Mesh as Ie, BufferAttribute as He } from "three";
-import { createEventHook as U, useRafFn as Ge, resolveUnref as u, useWindowSize as Ue, useElementSize as $e, useDevicePixelRatio as Ne, unrefElement as z, useEventListener as Ve, isFunction as Z } from "@vueuse/core";
-const G = M({ uuid: Te.generateUUID() }), se = (e) => void Object.assign(G.value, e);
-var qe = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(qe || {});
-const Je = 45;
+import { MathUtils as Ae, PerspectiveCamera as F, OrthographicCamera as Oe, Clock as ie, Color as I, sRGBEncoding as ke, ACESFilmicToneMapping as je, PCFSoftShadowMap as _e, PCFShadowMap as Be, LinearEncoding as Y, NoToneMapping as Q, WebGLRenderer as De, LoadingManager as Fe, TextureLoader as Ie, Raycaster as We, Vector2 as ze, Mesh as He, BufferAttribute as Ge } from "three";
+import { createEventHook as U, useRafFn as Ue, resolveUnref as u, useWindowSize as Ne, useElementSize as $e, useDevicePixelRatio as Ve, unrefElement as W, useEventListener as qe, isFunction as Z } from "@vueuse/core";
+const G = M({ uuid: Ae.generateUUID() }), se = (e) => void Object.assign(G.value, e);
+var Je = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Je || {});
+const Ke = 45;
 let y;
 function ce() {
   const { state: e, setState: t, aspectRatio: r } = L();
   function o(a = "Perspective", s) {
-    var l, p, m;
+    var l, p, d;
     if (a === "Perspective") {
-      const { near: d, far: w, fov: v } = s || {
+      const { near: m, far: w, fov: v } = s || {
         near: 0.1,
         far: 1e3,
-        fov: Je
+        fov: Ke
       };
-      y = new _(v, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, d, w), (p = e.cameras) == null || p.push(y);
+      y = new F(v, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, m, w), (p = e.cameras) == null || p.push(y);
     } else {
-      const { left: d, right: w, top: v, bottom: g, near: E, far: x } = s || {
+      const { left: m, right: w, top: v, bottom: g, near: E, far: x } = s || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,17 +33,17 @@ function ce() {
         near: 0.1,
         far: 1e3
       };
-      y = new Ae(d, w, v, g, E, x), (m = e.cameras) == null || m.push(y);
+      y = new Oe(m, w, v, g, E, x), (d = e.cameras) == null || d.push(y);
     }
     return e.camera = y, t("camera", e.camera), y;
   }
   function n() {
     var a;
-    e.camera instanceof _ && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (a = e.camera) == null || a.updateProjectionMatrix();
+    e.camera instanceof F && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (a = e.camera) == null || a.updateProjectionMatrix();
   }
   function i(a) {
     var s;
-    (s = e.cameras) == null || s.push(a), a instanceof _ && e.aspectRatio && (a.aspect = e.aspectRatio.value), a.updateProjectionMatrix(), t("camera", a);
+    (s = e.cameras) == null || s.push(a), a instanceof F && e.aspectRatio && (a.aspect = e.aspectRatio.value), a.updateProjectionMatrix(), t("camera", a);
   }
   function c() {
     e.cameras = [];
@@ -58,56 +58,56 @@ function ce() {
     clearCameras: c
   };
 }
-const ue = U(), le = U(), $ = U(), C = new ie();
+const ue = U(), le = U(), N = U(), C = new ie();
 let k = 0, j = 0;
-const { pause: Ke, resume: Xe, isActive: Ye } = Ge(
+const { pause: Xe, resume: Ye, isActive: Qe } = Ue(
   () => {
-    ue.trigger({ delta: k, elapsed: j, clock: C }), le.trigger({ delta: k, elapsed: j, clock: C }), $.trigger({ delta: k, elapsed: j, clock: C });
+    ue.trigger({ delta: k, elapsed: j, clock: C }), le.trigger({ delta: k, elapsed: j, clock: C }), N.trigger({ delta: k, elapsed: j, clock: C });
   },
   { immediate: !1 }
 );
-$.on(() => {
+N.on(() => {
   k = C.getDelta(), j = C.getElapsedTime();
 });
-function N() {
+function $() {
   return {
     onBeforeLoop: ue.on,
     onLoop: le.on,
-    onAfterLoop: $.on,
-    pause: Ke,
-    resume: Xe,
-    isActive: Ye
+    onAfterLoop: N.on,
+    pause: Xe,
+    resume: Ye,
+    isActive: Qe
   };
 }
-function Qe(e) {
-  return e instanceof W ? e : Array.isArray(e) ? new W(...e) : new W(e);
+function Ze(e) {
+  return e instanceof I ? e : Array.isArray(e) ? new I(...e) : new I(e);
 }
-const I = {
+const z = {
   realistic: {
-    outputEncoding: Oe,
-    toneMapping: ke,
+    outputEncoding: ke,
+    toneMapping: je,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: je
+      type: _e
     }
   }
 }, fe = (e, t) => {
   for (const r of Object.keys(t))
     t[r] instanceof Object && Object.assign(t[r], fe(e[r], t[r]));
   return Object.assign(e || {}, t), e;
-}, Ze = "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", et = /* @__PURE__ */ tt(Ze);
-function R(e) {
+}, et = "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", tt = /* @__PURE__ */ nt(et);
+function T(e) {
   return e.replace(/-([a-z])/g, (t, r) => r.toUpperCase());
 }
-function tt(e, t) {
+function nt(e, t) {
   const r = /* @__PURE__ */ Object.create(null), o = e.split(",");
   for (let n = 0; n < o.length; n++)
     r[o[n]] = !0;
   return t ? (n) => !!r[n.toLowerCase()] : (n) => !!r[n];
 }
 const f = ne(), H = M(!1);
-function nt(e, t, r) {
+function at(e, t, r) {
   const {
     alpha: o = !0,
     antialias: n = !0,
@@ -117,37 +117,37 @@ function nt(e, t, r) {
     precision: s,
     premultipliedAlpha: l,
     stencil: p,
-    shadows: m = !1,
-    shadowMapType: d = Be,
+    shadows: d = !1,
+    shadowMapType: m = Be,
     physicallyCorrectLights: w = !1,
     useLegacyLights: v = !1,
     outputEncoding: g = Y,
     toneMapping: E = Q,
     toneMappingExposure: x = 1,
-    context: de = void 0,
+    context: me = void 0,
     powerPreference: ve = "default",
     preserveDrawingBuffer: ge = !1,
     clearColor: b,
     windowSize: we = !1,
     preset: he = void 0
-  } = ae(r), { setState: D } = L(), { width: V, height: q } = u(we) ? Ue() : $e(t), { logError: ye } = B(), { pixelRatio: J } = Ne(), { pause: Me, resume: be } = N(), F = re(() => V.value / q.value), K = () => {
+  } = ae(r), { setState: B } = L(), { width: V, height: q } = u(we) ? Ne() : $e(t), { logError: ye } = _(), { pixelRatio: J } = Ve(), { pause: Me, resume: be } = $(), D = re(() => V.value / q.value), K = () => {
     f.value && (f.value.setSize(V.value, q.value), f.value.setPixelRatio(Math.min(J.value, 2)));
   }, X = () => {
     if (!f.value)
       return;
     const h = u(he);
     if (h) {
-      h in I || ye("Renderer Preset must be one of these: " + Object.keys(I).join(", ")), fe(f.value, I[h]);
+      h in z || ye("Renderer Preset must be one of these: " + Object.keys(z).join(", ")), fe(f.value, z[h]);
       return;
     }
-    f.value.shadowMap.enabled = u(m), f.value.shadowMap.type = u(d), f.value.toneMapping = u(E) || Q, f.value.toneMappingExposure = u(x), f.value.outputEncoding = u(g) || Y, b != null && b.value && f.value.setClearColor(Qe(u(b))), f.value.useLegacyLights = u(v);
+    f.value.shadowMap.enabled = u(d), f.value.shadowMap.type = u(m), f.value.toneMapping = u(E) || Q, f.value.toneMappingExposure = u(x), f.value.outputEncoding = u(g) || Y, b != null && b.value && f.value.setClearColor(Ze(u(b))), f.value.useLegacyLights = u(v);
   }, Ce = () => {
-    const h = z(e);
+    const h = W(e);
     h && (f.value = new De({
       canvas: h,
       alpha: u(o),
       antialias: u(n),
-      context: u(de),
+      context: u(me),
       depth: u(i),
       failIfMajorPerformanceCaveat: u(a),
       logarithmicDepthBuffer: u(c),
@@ -156,52 +156,52 @@ function nt(e, t, r) {
       stencil: u(p),
       preserveDrawingBuffer: u(ge),
       premultipliedAlpha: u(l)
-    }), D("renderer", f.value), D("clock", new ie()), D("aspectRatio", F), X(), K(), be(), H.value = !0);
+    }), B("renderer", f.value), B("clock", new ie()), B("aspectRatio", D), X(), K(), be(), H.value = !0);
   }, Le = () => {
     f.value && (f.value.dispose(), f.value = void 0, H.value = !1, Me());
   };
-  return O([F, J], K), O(
-    [m, d, g, v, E, x, b],
+  return O([D, J], K), O(
+    [d, m, g, v, E, x, b],
     X
   ), O(
     () => [e, t],
     () => {
-      z(e) && z(t) && Ce();
+      W(e) && W(t) && Ce();
     },
     { immediate: !0, deep: !0 }
   ), {
     renderer: f,
     isReady: H,
     dispose: Le,
-    aspectRatio: F
+    aspectRatio: D
   };
 }
 const pe = (e) => !!e && e.constructor === Array;
-function at(e) {
+function rt(e) {
   const t = { nodes: {}, materials: {} };
   return e && e.traverse((r) => {
     r.name && (t.nodes[r.name] = r), r.material && !t.materials[r.material.name] && (t.materials[r.material.name] = r.material);
   }), t;
 }
-async function vt(e, t, r, o, n) {
-  const { logError: i } = B(), c = new e();
+async function wt(e, t, r, o, n) {
+  const { logError: i } = _(), c = new e();
   n && n(c), r && r(c);
   const s = (Array.isArray(t) ? t : [t]).map(
-    (l) => new Promise((p, m) => {
+    (l) => new Promise((p, d) => {
       c.load(
         l,
-        (d) => {
-          d.scene && Object.assign(d, at(d.scene)), p(d);
+        (m) => {
+          m.scene && Object.assign(m, rt(m.scene)), p(m);
         },
         o,
-        (d) => m(i("[useLoader] - Failed to load resource", d))
+        (m) => d(i("[useLoader] - Failed to load resource", m))
       );
     })
   );
   return pe(t) ? await Promise.all(s) : await s[0];
 }
-async function gt(e) {
-  const t = new Fe(), r = new _e(t), o = (n) => new Promise((i, c) => {
+async function ht(e) {
+  const t = new Fe(), r = new Ie(t), o = (n) => new Promise((i, c) => {
     r.load(
       n,
       (a) => i(a),
@@ -226,39 +226,41 @@ async function gt(e) {
     };
   }
 }
-const S = Pe({
+const ot = {
   camera: void 0,
   cameras: [],
+  scene: void 0,
+  renderer: void 0,
   aspectRatio: re(() => window.innerWidth / window.innerHeight)
-});
+}, R = Pe(ot);
 function L() {
   function e(r) {
-    return S[r];
+    return R[r];
   }
   function t(r, o) {
-    S[r] = o;
+    R[r] = o;
   }
   return {
-    state: S,
-    ...ae(S),
+    state: R,
+    ...ae(R),
     getState: e,
     setState: t
   };
 }
-const ee = ne(new We()), T = M(new ze()), rt = M(null);
-function me() {
+const ee = ne(new We()), S = M(new ze()), it = M(null);
+function de() {
   const { setState: e } = L();
-  e("raycaster", ee.value), e("pointer", T), e("currentInstance", rt);
+  e("raycaster", ee.value), e("pointer", S), e("currentInstance", it);
   function t(r) {
-    T.value.x = r.clientX / window.innerWidth * 2 - 1, T.value.y = -(r.clientY / window.innerHeight) * 2 + 1;
+    S.value.x = r.clientX / window.innerWidth * 2 - 1, S.value.y = -(r.clientY / window.innerHeight) * 2 + 1;
   }
   return window.addEventListener("pointermove", t), {
     raycaster: ee,
-    pointer: T
+    pointer: S
   };
 }
-const wt = !0, te = "[TresJS ▲ ■ ●] ";
-function B() {
+const yt = !0, te = "[TresJS ▲ ■ ●] ";
+function _() {
   function e(o, n) {
     console.error(`${te} ${o}`, n || "");
   }
@@ -273,21 +275,21 @@ function B() {
     logMessage: r
   };
 }
-const { logWarning: ot } = B();
-function it(e) {
+const { logWarning: st } = _();
+function ct(e) {
   for (const t in e)
     if (t.indexOf("on") === 0)
       return !0;
   return !1;
 }
 let A = null;
-const st = {
+const ut = {
   createElement(e, t, r, o) {
-    if (e === "template" || et(e))
+    if (e === "template" || tt(e))
       return null;
     let n;
     if (o === null && (o = {}), o != null && o.args ? n = new G.value[e.replace("Tres", "")](...o.args) : n = new G.value[e.replace("Tres", "")](), n.isCamera) {
-      (!(o != null && o.position) || o != null && o.position.every((c) => c == 0)) && ot(
+      (!(o != null && o.position) || o != null && o.position.every((c) => c == 0)) && st(
         // eslint-disable-next-line max-len
         "Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗"
       );
@@ -302,16 +304,16 @@ const st = {
       e.parent = t, t.children.splice(a, 0, e), e.dispatchEvent({ type: "added" });
     } else
       typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[t == null ? void 0 : t.attach], t && (t[e.attach] = e));
-    const { onLoop: o } = N();
+    const { onLoop: o } = $();
     let n = null, i = null;
-    const { raycaster: c } = me();
-    e && e instanceof Ie && it(e) && (o(() => {
+    const { raycaster: c } = de();
+    e && e instanceof He && ct(e) && (o(() => {
       var a, s, l;
       if (t != null && t.children && e && c) {
         const p = c.value.intersectObjects(t.children);
         p.length > 0 && p[0].object.uuid === e.uuid ? (i = p[0], (n === null || n.object.uuid !== (i == null ? void 0 : i.object.uuid)) && ((a = e.onPointerEnter) == null || a.call(e, i)), (s = e.onPointerMove) == null || s.call(e, i)) : (i = null, n !== null && ((l = e.onPointerLeave) == null || l.call(e, n))), n = i;
       }
-    }), Ve(window, "click", () => {
+    }), qe(window, "click", () => {
       var a;
       i !== null && ((a = e.onClick) == null || a.call(e, i));
     }));
@@ -325,18 +327,20 @@ const st = {
   patchProp(e, t, r, o) {
     if (e) {
       let n = e, i = t;
-      const c = R(i);
+      const c = T(i);
       let a = n == null ? void 0 : n[c];
       if (e.parent || (e.parent = A), n.type === "BufferGeometry" && (i = i.split("-").pop(), n.setAttribute(
-        R(i),
-        new He(...o)
+        T(i),
+        new Ge(...o)
       )), i.includes("-") && a === void 0) {
         const l = i.split("-");
-        a = l.reduce((p, m) => p[R(m)], n), i = l.pop(), a != null && a.set || (n = l.reduce((p, m) => p[R(m)], n));
+        a = l.reduce((p, d) => p[T(d)], n), i = l.pop(), a != null && a.set || (n = l.reduce((p, d) => p[T(d)], n));
       }
       let s = o;
-      if (s === "" && (s = !0), Z(a))
+      if (s === "" && (s = !0), Z(a)) {
+        Array.isArray(s) ? e[c](...s) : e[c](s);
         return;
+      }
       !(a != null && a.set) && !Z(a) ? n[c] = s : a.constructor === s.constructor && (a != null && a.copy) ? a == null || a.copy(s) : Array.isArray(s) ? a.set(...s) : !a.isColor && a.setScalar ? a.setScalar(s) : a.set(s);
     }
   },
@@ -352,15 +356,15 @@ const st = {
   setScopeId: () => void 0,
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
-}, { createApp: ct } = Re(st), ut = (e) => {
-  const t = ct(r);
+}, { createApp: lt } = Te(ut), ft = (e) => {
+  const t = lt(r);
   function r() {
     return e && e.default ? e.default() : [];
   }
   return t;
 };
 se(oe);
-const { logWarning: lt } = B(), ft = Se({
+const { logWarning: pt } = _(), dt = Re({
   name: "TresCanvas",
   props: [
     "shadows",
@@ -378,20 +382,22 @@ const { logWarning: lt } = B(), ft = Se({
     "preset"
   ],
   setup(e, { slots: t, expose: r }) {
-    e.physicallyCorrectLights === !0 && lt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
+    e.physicallyCorrectLights === !0 && pt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
     const o = M(), n = M(), i = new oe.Scene(), { setState: c } = L();
-    c("scene", i);
+    c("scene", i), Se(() => {
+      c("renderer", null);
+    });
     function a() {
-      const { renderer: p } = nt(n, o, e), { activeCamera: m } = ce(), { onLoop: d } = N(), { raycaster: w, pointer: v } = me();
-      d(() => {
+      const { renderer: p } = at(n, o, e), { activeCamera: d } = ce(), { onLoop: m } = $(), { raycaster: w, pointer: v } = de();
+      m(() => {
         var g;
-        m.value && (w.value.setFromCamera(v.value, m.value), (g = p.value) == null || g.render(i, m.value));
+        d.value && (w.value.setFromCamera(v.value, d.value), (g = p.value) == null || g.render(i, d.value));
       });
     }
     O(n, a);
     let s;
     function l() {
-      s = ut(t), s.provide("useTres", L()), s.provide("extend", se), s.mount(i);
+      s = ft(t), s.provide("useTres", L()), s.provide("extend", se), s.mount(i);
     }
     return l(), r({
       scene: i
@@ -400,6 +406,8 @@ const { logWarning: lt } = B(), ft = Se({
         "div",
         {
           ref: o,
+          "data-scene": i.uuid,
+          key: i.uuid,
           style: {
             position: "relative",
             width: "100%",
@@ -420,6 +428,7 @@ const { logWarning: lt } = B(), ft = Se({
             [
               P("canvas", {
                 ref: n,
+                "data-scene": i.uuid,
                 style: {
                   display: "block",
                   width: "100%",
@@ -435,25 +444,25 @@ const { logWarning: lt } = B(), ft = Se({
       )
     );
   }
-}), ht = {
+}), Mt = {
   install(e) {
-    e.component("TresCanvas", ft);
+    e.component("TresCanvas", dt);
   }
 };
 export {
-  qe as CameraType,
-  ft as TresCanvas,
+  Je as CameraType,
+  dt as TresCanvas,
   G as catalogue,
-  ht as default,
+  Mt as default,
   se as extend,
-  wt as isProd,
-  at as trasverseObjects,
+  yt as isProd,
+  rt as trasverseObjects,
   ce as useCamera,
-  vt as useLoader,
-  B as useLogger,
-  me as useRaycaster,
-  N as useRenderLoop,
-  nt as useRenderer,
-  gt as useTexture,
+  wt as useLoader,
+  _ as useLogger,
+  de as useRaycaster,
+  $ as useRenderLoop,
+  at as useRenderer,
+  ht as useTexture,
   L as useTres
 };

package/dist/tres.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-alpha.2
+ * version: v2.0.0-alpha.4
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(f,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],l):(f=typeof globalThis<"u"?globalThis:f||self,l(f.tres={},f.Vue,f.Three,f.VueUseCore))})(this,function(f,l,c,s){"use strict";function se(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const $=se(c),U=l.ref({uuid:c.MathUtils.generateUUID()}),z=e=>void Object.assign(U.value,e);var J=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(J||{});const ue=45;let C;function W(){const{state:e,setState:t,aspectRatio:a}=M();function o(r="Perspective",u){var d,v,g;if(r==="Perspective"){const{near:w,far:b,fov:h}=u||{near:.1,far:1e3,fov:ue};C=new c.PerspectiveCamera(h,((d=e.aspectRatio)==null?void 0:d.value)||window.innerWidth/window.innerHeight,w,b),(v=e.cameras)==null||v.push(C)}else{const{left:w,right:b,top:h,bottom:y,near:F,far:B}=u||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};C=new c.OrthographicCamera(w,b,h,y,F,B),(g=e.cameras)==null||g.push(C)}return e.camera=C,t("camera",e.camera),C}function n(){var r;e.camera instanceof c.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(r=e.camera)==null||r.updateProjectionMatrix()}function i(r){var u;(u=e.cameras)==null||u.push(r),r instanceof c.PerspectiveCamera&&e.aspectRatio&&(r.aspect=e.aspectRatio.value),r.updateProjectionMatrix(),t("camera",r)}function p(){e.cameras=[]}return l.watchEffect(()=>{a!=null&&a.value&&n()}),{activeCamera:l.toRef(e,"camera"),createCamera:o,updateCamera:n,pushCamera:i,clearCameras:p}}const K=s.createEventHook(),X=s.createEventHook(),I=s.createEventHook(),P=new c.Clock;let k=0,A=0;const{pause:le,resume:ce,isActive:fe}=s.useRafFn(()=>{K.trigger({delta:k,elapsed:A,clock:P}),X.trigger({delta:k,elapsed:A,clock:P}),I.trigger({delta:k,elapsed:A,clock:P})},{immediate:!1});I.on(()=>{k=P.getDelta(),A=P.getElapsedTime()});function j(){return{onBeforeLoop:K.on,onLoop:X.on,onAfterLoop:I.on,pause:le,resume:ce,isActive:fe}}function pe(e){return e instanceof c.Color?e:Array.isArray(e)?new c.Color(...e):new c.Color(e)}const R={realistic:{outputEncoding:c.sRGBEncoding,toneMapping:c.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:c.PCFSoftShadowMap}}},Y=(e,t)=>{for(const a of Object.keys(t))t[a]instanceof Object&&Object.assign(t[a],Y(e[a],t[a]));return Object.assign(e||{},t),e},de=me("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 x(e){return e.replace(/-([a-z])/g,(t,a)=>a.toUpperCase())}function me(e,t){const a=Object.create(null),o=e.split(",");for(let n=0;n<o.length;n++)a[o[n]]=!0;return t?n=>!!a[n.toLowerCase()]:n=>!!a[n]}const m=l.shallowRef(),G=l.ref(!1);function Q(e,t,a){const{alpha:o=!0,antialias:n=!0,depth:i,logarithmicDepthBuffer:p,failIfMajorPerformanceCaveat:r,precision:u,premultipliedAlpha:d,stencil:v,shadows:g=!1,shadowMapType:w=c.PCFShadowMap,physicallyCorrectLights:b=!1,useLegacyLights:h=!1,outputEncoding:y=c.LinearEncoding,toneMapping:F=c.NoToneMapping,toneMappingExposure:B=1,context:Oe=void 0,powerPreference:Ue="default",preserveDrawingBuffer:ke=!1,clearColor:O,windowSize:Ae=!1,preset:je=void 0}=l.toRefs(a),{setState:N}=M(),{width:ne,height:ae}=s.resolveUnref(Ae)?s.useWindowSize():s.useElementSize(t),{logError:xe}=S(),{pixelRatio:re}=s.useDevicePixelRatio(),{pause:_e,resume:Te}=j(),V=l.computed(()=>ne.value/ae.value),oe=()=>{m.value&&(m.value.setSize(ne.value,ae.value),m.value.setPixelRatio(Math.min(re.value,2)))},ie=()=>{if(!m.value)return;const L=s.resolveUnref(je);if(L){L in R||xe("Renderer Preset must be one of these: "+Object.keys(R).join(", ")),Y(m.value,R[L]);return}m.value.shadowMap.enabled=s.resolveUnref(g),m.value.shadowMap.type=s.resolveUnref(w),m.value.toneMapping=s.resolveUnref(F)||c.NoToneMapping,m.value.toneMappingExposure=s.resolveUnref(B),m.value.outputEncoding=s.resolveUnref(y)||c.LinearEncoding,O!=null&&O.value&&m.value.setClearColor(pe(s.resolveUnref(O))),m.value.useLegacyLights=s.resolveUnref(h)},De=()=>{const L=s.unrefElement(e);L&&(m.value=new c.WebGLRenderer({canvas:L,alpha:s.resolveUnref(o),antialias:s.resolveUnref(n),context:s.resolveUnref(Oe),depth:s.resolveUnref(i),failIfMajorPerformanceCaveat:s.resolveUnref(r),logarithmicDepthBuffer:s.resolveUnref(p),powerPreference:s.resolveUnref(Ue),precision:s.resolveUnref(u),stencil:s.resolveUnref(v),preserveDrawingBuffer:s.resolveUnref(ke),premultipliedAlpha:s.resolveUnref(d)}),N("renderer",m.value),N("clock",new c.Clock),N("aspectRatio",V),ie(),oe(),Te(),G.value=!0)},Fe=()=>{m.value&&(m.value.dispose(),m.value=void 0,G.value=!1,_e())};return l.watch([V,re],oe),l.watch([g,w,y,h,F,B,O],ie),l.watch(()=>[e,t],()=>{s.unrefElement(e)&&s.unrefElement(t)&&De()},{immediate:!0,deep:!0}),{renderer:m,isReady:G,dispose:Fe,aspectRatio:V}}const Z=e=>!!e&&e.constructor===Array;function E(e){const t={nodes:{},materials:{}};return e&&e.traverse(a=>{a.name&&(t.nodes[a.name]=a),a.material&&!t.materials[a.material.name]&&(t.materials[a.material.name]=a.material)}),t}async function ve(e,t,a,o,n){const{logError:i}=S(),p=new e;n&&n(p),a&&a(p);const u=(Array.isArray(t)?t:[t]).map(d=>new Promise((v,g)=>{p.load(d,w=>{w.scene&&Object.assign(w,E(w.scene)),v(w)},o,w=>g(i("[useLoader] - Failed to load resource",w)))}));return Z(t)?await Promise.all(u):await u[0]}async function ge(e){const t=new c.LoadingManager,a=new c.TextureLoader(t),o=n=>new Promise((i,p)=>{a.load(n,r=>i(r),()=>null,()=>{p(new Error("[useTextures] - Failed to load texture"))})});if(Z(e)){const n=await Promise.all(e.map(i=>o(i)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:i,normalMap:p,roughnessMap:r,metalnessMap:u,aoMap:d}=e;return{map:n?await o(n):null,displacementMap:i?await o(i):null,normalMap:p?await o(p):null,roughnessMap:r?await o(r):null,metalnessMap:u?await o(u):null,aoMap:d?await o(d):null}}}const _=l.shallowReactive({camera:void 0,cameras:[],aspectRatio:l.computed(()=>window.innerWidth/window.innerHeight)});function M(){function e(a){return _[a]}function t(a,o){_[a]=o}return{state:_,...l.toRefs(_),getState:e,setState:t}}const H=l.shallowRef(new c.Raycaster),T=l.ref(new c.Vector2),we=l.ref(null);function q(){const{setState:e}=M();e("raycaster",H.value),e("pointer",T),e("currentInstance",we);function t(a){T.value.x=a.clientX/window.innerWidth*2-1,T.value.y=-(a.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),{raycaster:H,pointer:T}}const he=!0,ee="[TresJS ▲ ■ ●] ";function S(){function e(o,n){console.error(`${ee} ${o}`,n||"")}function t(o){console.warn(`${ee} ${o}`)}function a(o,n){}return{logError:e,logWarning:t,logMessage:a}}const{logWarning:ye}=S();function Ce(e){for(const t in e)if(t.indexOf("on")===0)return!0;return!1}function ze(e){}let D=null;const Me={createElement(e,t,a,o){if(e==="template"||de(e))return null;let n;if(o===null&&(o={}),o!=null&&o.args?n=new U.value[e.replace("Tres","")](...o.args):n=new U.value[e.replace("Tres","")],n.isCamera){(!(o!=null&&o.position)||o!=null&&o.position.every(p=>p==0))&&ye("Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗");const{pushCamera:i}=W();i(n)}return(o==null?void 0:o.attach)===void 0&&(n.isMaterial?n.attach="material":n.isBufferGeometry&&(n.attach="geometry")),n},insert(e,t,a){if(D===null&&t.isScene&&(D=t),t===null&&(t=D),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const r=a?t.children.indexOf(a):0;e.parent=t,t.children.splice(r,0,e),e.dispatchEvent({type:"added"})}else typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e));const{onLoop:o}=j();let n=null,i=null;const{raycaster:p}=q();e&&e instanceof c.Mesh&&Ce(e)&&(o(()=>{var r,u,d;if(t!=null&&t.children&&e&&p){const v=p.value.intersectObjects(t.children);v.length>0&&v[0].object.uuid===e.uuid?(i=v[0],(n===null||n.object.uuid!==(i==null?void 0:i.object.uuid))&&((r=e.onPointerEnter)==null||r.call(e,i)),(u=e.onPointerMove)==null||u.call(e,i)):(i=null,n!==null&&((d=e.onPointerLeave)==null||d.call(e,n))),n=i}}),s.useEventListener(window,"click",()=>{var r;i!==null&&((r=e.onClick)==null||r.call(e,i))}))},remove(e){if(!e)return;const t=e.parentNode;t&&t.removeChild(e)},patchProp(e,t,a,o){if(e){let n=e,i=t;const p=x(i);let r=n==null?void 0:n[p];if(e.parent||(e.parent=D),n.type==="BufferGeometry"&&(i=i.split("-").pop(),n.setAttribute(x(i),new c.BufferAttribute(...o))),i.includes("-")&&r===void 0){const d=i.split("-");r=d.reduce((v,g)=>v[x(g)],n),i=d.pop(),r!=null&&r.set||(n=d.reduce((v,g)=>v[x(g)],n))}let u=o;if(u===""&&(u=!0),s.isFunction(r))return;!(r!=null&&r.set)&&!s.isFunction(r)?n[p]=u:r.constructor===u.constructor&&(r!=null&&r.copy)?r==null||r.copy(u):Array.isArray(u)?r.set(...u):!r.isColor&&r.setScalar?r.setScalar(u):r.set(u)}},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:be}=l.createRenderer(Me),Le=e=>{const t=be(a);function a(){return e&&e.default?e.default():[]}return t};z($);const{logWarning:Pe}=S(),te=l.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:a}){e.physicallyCorrectLights===!0&&Pe("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const o=l.ref(),n=l.ref(),i=new $.Scene,{setState:p}=M();p("scene",i);function r(){const{renderer:v}=Q(n,o,e),{activeCamera:g}=W(),{onLoop:w}=j(),{raycaster:b,pointer:h}=q();w(()=>{var y;g.value&&(b.value.setFromCamera(h.value,g.value),(y=v.value)==null||y.render(i,g.value))})}l.watch(n,r);let u;function d(){u=Le(t),u.provide("useTres",M()),u.provide("extend",z),u.mount(i)}return d(),a({scene:i}),()=>l.h(l.h("div",{ref:o,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[l.h("div",{style:{width:"100%",height:"100%"}},[l.h("canvas",{ref:n,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),Se={install(e){e.component("TresCanvas",te)}};f.CameraType=J,f.TresCanvas=te,f.catalogue=U,f.default=Se,f.extend=z,f.isProd=he,f.trasverseObjects=E,f.useCamera=W,f.useLoader=ve,f.useLogger=S,f.useRaycaster=q,f.useRenderLoop=j,f.useRenderer=Q,f.useTexture=ge,f.useTres=M,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(p,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],l):(p=typeof globalThis<"u"?globalThis:p||self,l(p.tres={},p.Vue,p.Three,p.VueUseCore))})(this,function(p,l,c,u){"use strict";function se(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const $=se(c),U=l.ref({uuid:c.MathUtils.generateUUID()}),I=e=>void Object.assign(U.value,e);var J=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(J||{});const ue=45;let C;function z(){const{state:e,setState:t,aspectRatio:a}=M();function o(r="Perspective",s){var d,v,g;if(r==="Perspective"){const{near:w,far:b,fov:h}=s||{near:.1,far:1e3,fov:ue};C=new c.PerspectiveCamera(h,((d=e.aspectRatio)==null?void 0:d.value)||window.innerWidth/window.innerHeight,w,b),(v=e.cameras)==null||v.push(C)}else{const{left:w,right:b,top:h,bottom:y,near:F,far:B}=s||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};C=new c.OrthographicCamera(w,b,h,y,F,B),(g=e.cameras)==null||g.push(C)}return e.camera=C,t("camera",e.camera),C}function n(){var r;e.camera instanceof c.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(r=e.camera)==null||r.updateProjectionMatrix()}function i(r){var s;(s=e.cameras)==null||s.push(r),r instanceof c.PerspectiveCamera&&e.aspectRatio&&(r.aspect=e.aspectRatio.value),r.updateProjectionMatrix(),t("camera",r)}function f(){e.cameras=[]}return l.watchEffect(()=>{a!=null&&a.value&&n()}),{activeCamera:l.toRef(e,"camera"),createCamera:o,updateCamera:n,pushCamera:i,clearCameras:f}}const K=u.createEventHook(),X=u.createEventHook(),W=u.createEventHook(),P=new c.Clock;let A=0,k=0;const{pause:le,resume:ce,isActive:fe}=u.useRafFn(()=>{K.trigger({delta:A,elapsed:k,clock:P}),X.trigger({delta:A,elapsed:k,clock:P}),W.trigger({delta:A,elapsed:k,clock:P})},{immediate:!1});W.on(()=>{A=P.getDelta(),k=P.getElapsedTime()});function j(){return{onBeforeLoop:K.on,onLoop:X.on,onAfterLoop:W.on,pause:le,resume:ce,isActive:fe}}function pe(e){return e instanceof c.Color?e:Array.isArray(e)?new c.Color(...e):new c.Color(e)}const R={realistic:{outputEncoding:c.sRGBEncoding,toneMapping:c.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:c.PCFSoftShadowMap}}},Y=(e,t)=>{for(const a of Object.keys(t))t[a]instanceof Object&&Object.assign(t[a],Y(e[a],t[a]));return Object.assign(e||{},t),e},de=me("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 x(e){return e.replace(/-([a-z])/g,(t,a)=>a.toUpperCase())}function me(e,t){const a=Object.create(null),o=e.split(",");for(let n=0;n<o.length;n++)a[o[n]]=!0;return t?n=>!!a[n.toLowerCase()]:n=>!!a[n]}const m=l.shallowRef(),G=l.ref(!1);function Q(e,t,a){const{alpha:o=!0,antialias:n=!0,depth:i,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:r,precision:s,premultipliedAlpha:d,stencil:v,shadows:g=!1,shadowMapType:w=c.PCFShadowMap,physicallyCorrectLights:b=!1,useLegacyLights:h=!1,outputEncoding:y=c.LinearEncoding,toneMapping:F=c.NoToneMapping,toneMappingExposure:B=1,context:Ue=void 0,powerPreference:Ae="default",preserveDrawingBuffer:ke=!1,clearColor:O,windowSize:je=!1,preset:xe=void 0}=l.toRefs(a),{setState:q}=M(),{width:ne,height:ae}=u.resolveUnref(je)?u.useWindowSize():u.useElementSize(t),{logError:_e}=S(),{pixelRatio:re}=u.useDevicePixelRatio(),{pause:Te,resume:De}=j(),V=l.computed(()=>ne.value/ae.value),oe=()=>{m.value&&(m.value.setSize(ne.value,ae.value),m.value.setPixelRatio(Math.min(re.value,2)))},ie=()=>{if(!m.value)return;const L=u.resolveUnref(xe);if(L){L in R||_e("Renderer Preset must be one of these: "+Object.keys(R).join(", ")),Y(m.value,R[L]);return}m.value.shadowMap.enabled=u.resolveUnref(g),m.value.shadowMap.type=u.resolveUnref(w),m.value.toneMapping=u.resolveUnref(F)||c.NoToneMapping,m.value.toneMappingExposure=u.resolveUnref(B),m.value.outputEncoding=u.resolveUnref(y)||c.LinearEncoding,O!=null&&O.value&&m.value.setClearColor(pe(u.resolveUnref(O))),m.value.useLegacyLights=u.resolveUnref(h)},Fe=()=>{const L=u.unrefElement(e);L&&(m.value=new c.WebGLRenderer({canvas:L,alpha:u.resolveUnref(o),antialias:u.resolveUnref(n),context:u.resolveUnref(Ue),depth:u.resolveUnref(i),failIfMajorPerformanceCaveat:u.resolveUnref(r),logarithmicDepthBuffer:u.resolveUnref(f),powerPreference:u.resolveUnref(Ae),precision:u.resolveUnref(s),stencil:u.resolveUnref(v),preserveDrawingBuffer:u.resolveUnref(ke),premultipliedAlpha:u.resolveUnref(d)}),q("renderer",m.value),q("clock",new c.Clock),q("aspectRatio",V),ie(),oe(),De(),G.value=!0)},Be=()=>{m.value&&(m.value.dispose(),m.value=void 0,G.value=!1,Te())};return l.watch([V,re],oe),l.watch([g,w,y,h,F,B,O],ie),l.watch(()=>[e,t],()=>{u.unrefElement(e)&&u.unrefElement(t)&&Fe()},{immediate:!0,deep:!0}),{renderer:m,isReady:G,dispose:Be,aspectRatio:V}}const Z=e=>!!e&&e.constructor===Array;function E(e){const t={nodes:{},materials:{}};return e&&e.traverse(a=>{a.name&&(t.nodes[a.name]=a),a.material&&!t.materials[a.material.name]&&(t.materials[a.material.name]=a.material)}),t}async function ve(e,t,a,o,n){const{logError:i}=S(),f=new e;n&&n(f),a&&a(f);const s=(Array.isArray(t)?t:[t]).map(d=>new Promise((v,g)=>{f.load(d,w=>{w.scene&&Object.assign(w,E(w.scene)),v(w)},o,w=>g(i("[useLoader] - Failed to load resource",w)))}));return Z(t)?await Promise.all(s):await s[0]}async function ge(e){const t=new c.LoadingManager,a=new c.TextureLoader(t),o=n=>new Promise((i,f)=>{a.load(n,r=>i(r),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(Z(e)){const n=await Promise.all(e.map(i=>o(i)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:i,normalMap:f,roughnessMap:r,metalnessMap:s,aoMap:d}=e;return{map:n?await o(n):null,displacementMap:i?await o(i):null,normalMap:f?await o(f):null,roughnessMap:r?await o(r):null,metalnessMap:s?await o(s):null,aoMap:d?await o(d):null}}}const we={camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:l.computed(()=>window.innerWidth/window.innerHeight)},_=l.shallowReactive(we);function M(){function e(a){return _[a]}function t(a,o){_[a]=o}return{state:_,...l.toRefs(_),getState:e,setState:t}}const H=l.shallowRef(new c.Raycaster),T=l.ref(new c.Vector2),he=l.ref(null);function N(){const{setState:e}=M();e("raycaster",H.value),e("pointer",T),e("currentInstance",he);function t(a){T.value.x=a.clientX/window.innerWidth*2-1,T.value.y=-(a.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),{raycaster:H,pointer:T}}const ye=!0,ee="[TresJS ▲ ■ ●] ";function S(){function e(o,n){console.error(`${ee} ${o}`,n||"")}function t(o){console.warn(`${ee} ${o}`)}function a(o,n){}return{logError:e,logWarning:t,logMessage:a}}const{logWarning:Ce}=S();function Me(e){for(const t in e)if(t.indexOf("on")===0)return!0;return!1}function ze(e){}let D=null;const be={createElement(e,t,a,o){if(e==="template"||de(e))return null;let n;if(o===null&&(o={}),o!=null&&o.args?n=new U.value[e.replace("Tres","")](...o.args):n=new U.value[e.replace("Tres","")],n.isCamera){(!(o!=null&&o.position)||o!=null&&o.position.every(f=>f==0))&&Ce("Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗");const{pushCamera:i}=z();i(n)}return(o==null?void 0:o.attach)===void 0&&(n.isMaterial?n.attach="material":n.isBufferGeometry&&(n.attach="geometry")),n},insert(e,t,a){if(D===null&&t.isScene&&(D=t),t===null&&(t=D),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const r=a?t.children.indexOf(a):0;e.parent=t,t.children.splice(r,0,e),e.dispatchEvent({type:"added"})}else typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e));const{onLoop:o}=j();let n=null,i=null;const{raycaster:f}=N();e&&e instanceof c.Mesh&&Me(e)&&(o(()=>{var r,s,d;if(t!=null&&t.children&&e&&f){const v=f.value.intersectObjects(t.children);v.length>0&&v[0].object.uuid===e.uuid?(i=v[0],(n===null||n.object.uuid!==(i==null?void 0:i.object.uuid))&&((r=e.onPointerEnter)==null||r.call(e,i)),(s=e.onPointerMove)==null||s.call(e,i)):(i=null,n!==null&&((d=e.onPointerLeave)==null||d.call(e,n))),n=i}}),u.useEventListener(window,"click",()=>{var r;i!==null&&((r=e.onClick)==null||r.call(e,i))}))},remove(e){if(!e)return;const t=e.parentNode;t&&t.removeChild(e)},patchProp(e,t,a,o){if(e){let n=e,i=t;const f=x(i);let r=n==null?void 0:n[f];if(e.parent||(e.parent=D),n.type==="BufferGeometry"&&(i=i.split("-").pop(),n.setAttribute(x(i),new c.BufferAttribute(...o))),i.includes("-")&&r===void 0){const d=i.split("-");r=d.reduce((v,g)=>v[x(g)],n),i=d.pop(),r!=null&&r.set||(n=d.reduce((v,g)=>v[x(g)],n))}let s=o;if(s===""&&(s=!0),u.isFunction(r)){Array.isArray(s)?e[f](...s):e[f](s);return}!(r!=null&&r.set)&&!u.isFunction(r)?n[f]=s:r.constructor===s.constructor&&(r!=null&&r.copy)?r==null||r.copy(s):Array.isArray(s)?r.set(...s):!r.isColor&&r.setScalar?r.setScalar(s):r.set(s)}},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:Le}=l.createRenderer(be),Pe=e=>{const t=Le(a);function a(){return e&&e.default?e.default():[]}return t};I($);const{logWarning:Se}=S(),te=l.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:a}){e.physicallyCorrectLights===!0&&Se("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const o=l.ref(),n=l.ref(),i=new $.Scene,{setState:f}=M();f("scene",i),l.onUnmounted(()=>{f("renderer",null)});function r(){const{renderer:v}=Q(n,o,e),{activeCamera:g}=z(),{onLoop:w}=j(),{raycaster:b,pointer:h}=N();w(()=>{var y;g.value&&(b.value.setFromCamera(h.value,g.value),(y=v.value)==null||y.render(i,g.value))})}l.watch(n,r);let s;function d(){s=Pe(t),s.provide("useTres",M()),s.provide("extend",I),s.mount(i)}return d(),a({scene:i}),()=>l.h(l.h("div",{ref:o,"data-scene":i.uuid,key:i.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[l.h("div",{style:{width:"100%",height:"100%"}},[l.h("canvas",{ref:n,"data-scene":i.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),Oe={install(e){e.component("TresCanvas",te)}};p.CameraType=J,p.TresCanvas=te,p.catalogue=U,p.default=Oe,p.extend=I,p.isProd=ye,p.trasverseObjects=E,p.useCamera=z,p.useLoader=ve,p.useLogger=S,p.useRaycaster=N,p.useRenderLoop=j,p.useRenderer=Q,p.useTexture=ge,p.useTres=M,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.4",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -63,7 +63,7 @@
     "@alvarosabu/prettier-config": "^1.2.0",
     "@release-it/conventional-changelog": "^5.1.1",
     "@stackblitz/sdk": "^1.8.1",
-    "@tresjs/cientos": "2.0.0-alpha.1",
+    "@tresjs/cientos": "2.0.0-alpha.5",
     "@types/three": "latest",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",