@tresjs/core 2.0.0-beta.2 → 2.0.0-beta.3

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

@@ -78,7 +78,7 @@ export interface UseRendererOptions extends WebGLRendererParameters {
      * @default 0x000000
      */
     clearColor?: MaybeComputedRef<TresColor>;
-    windowSize?: MaybeComputedRef<boolean>;
+    windowSize?: MaybeComputedRef<boolean | string>;
     preset?: RendererPresetsType;
 }
 /**

package/dist/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-beta.2
+ * version: v2.0.0-beta.3
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { ref as S, watchEffect as ie, toRef as Pe, shallowRef as se, toRefs as ce, computed as ue, watch as H, shallowReactive as le, provide as Re, inject as ke, onUnmounted as fe, createRenderer as Ae, defineComponent as de, onMounted as Oe, h as P } from "vue";
+import { ref as T, watchEffect as ie, toRef as Pe, shallowRef as se, toRefs as ce, computed as ue, watch as H, shallowReactive as le, provide as Re, inject as ke, onUnmounted as fe, createRenderer as Ae, defineComponent as de, onMounted as Oe, h as P } from "vue";
 import * as pe from "three";
-import { MathUtils as je, PerspectiveCamera as B, OrthographicCamera as _e, Clock as me, Color as U, sRGBEncoding as ze, ACESFilmicToneMapping as Be, PCFSoftShadowMap as De, PCFShadowMap as We, LinearEncoding as ne, NoToneMapping as ae, WebGLRenderer as Fe, LoadingManager as Ie, TextureLoader as He, Raycaster as Ue, Vector2 as $e, BufferAttribute as Ge } from "three";
-import { createEventHook as V, useRafFn as Ne, resolveUnref as u, useWindowSize as qe, useElementSize as Ve, useDevicePixelRatio as Ye, unrefElement as $, isFunction as re, useEventListener as Ke } from "@vueuse/core";
-const N = S({ uuid: je.generateUUID() }), ve = (e) => void Object.assign(N.value, e);
+import { MathUtils as je, PerspectiveCamera as z, OrthographicCamera as _e, Clock as me, Color as U, sRGBEncoding as ze, ACESFilmicToneMapping as Be, PCFSoftShadowMap as De, PCFShadowMap as Fe, LinearEncoding as ne, NoToneMapping as ae, WebGLRenderer as Ie, LoadingManager as We, TextureLoader as He, Raycaster as Ue, Vector2 as Ge, BufferAttribute as Ne } from "three";
+import { createEventHook as V, useRafFn as $e, resolveUnref as u, useWindowSize as qe, useElementSize as Ve, useDevicePixelRatio as Ye, unrefElement as G, isFunction as re, useEventListener as Ke } from "@vueuse/core";
+const $ = T({ uuid: je.generateUUID() }), ve = (e) => void Object.assign($.value, e);
 var Xe = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Xe || {});
 const Je = 45;
-let L;
+let S;
 function q() {
   const { state: e, setState: t, aspectRatio: r } = k();
   function a(o = "Perspective", c) {
     var l, v, d;
     if (o === "Perspective") {
-      const { near: f, far: M, fov: h } = c || {
+      const { near: f, far: C, fov: h } = c || {
         near: 0.1,
         far: 1e3,
         fov: Je
       };
-      L = new B(h, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, f, M), (v = e.cameras) == null || v.push(L);
+      S = new z(h, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, f, C), (v = e.cameras) == null || v.push(S);
     } else {
-      const { left: f, right: M, top: h, bottom: C, near: g, far: p } = c || {
+      const { left: f, right: C, top: h, bottom: E, near: g, far: p } = c || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,17 +33,17 @@ function q() {
         near: 0.1,
         far: 1e3
       };
-      L = new _e(f, M, h, C, g, p), (d = e.cameras) == null || d.push(L);
+      S = new _e(f, C, h, E, g, p), (d = e.cameras) == null || d.push(S);
     }
-    return e.camera = L, t("camera", e.camera), L;
+    return e.camera = S, t("camera", e.camera), S;
   }
   function n() {
     var o;
-    e.camera instanceof B && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (o = e.camera) == null || o.updateProjectionMatrix();
+    e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (o = e.camera) == null || o.updateProjectionMatrix();
   }
   function i(o) {
     var c;
-    (c = e.cameras) == null || c.push(o), o instanceof B && e.aspectRatio && (o.aspect = e.aspectRatio.value), o.updateProjectionMatrix(), t("camera", o);
+    (c = e.cameras) == null || c.push(o), o instanceof z && e.aspectRatio && (o.aspect = e.aspectRatio.value), o.updateProjectionMatrix(), t("camera", o);
   }
   function s() {
     e.cameras = [];
@@ -59,15 +59,15 @@ function q() {
   };
 }
 const he = V(), ge = V(), Y = V(), R = new me();
-let D = 0, W = 0;
-const { pause: Qe, resume: Ze, isActive: et } = Ne(
+let B = 0, D = 0;
+const { pause: Qe, resume: Ze, isActive: et } = $e(
   () => {
-    he.trigger({ delta: D, elapsed: W, clock: R }), ge.trigger({ delta: D, elapsed: W, clock: R }), Y.trigger({ delta: D, elapsed: W, clock: R });
+    he.trigger({ delta: B, elapsed: D, clock: R }), ge.trigger({ delta: B, elapsed: D, clock: R }), Y.trigger({ delta: B, elapsed: D, clock: R });
   },
   { immediate: !1 }
 );
 Y.on(() => {
-  D = R.getDelta(), W = R.getElapsedTime();
+  B = R.getDelta(), D = R.getElapsedTime();
 });
 function we() {
   return {
@@ -82,7 +82,7 @@ function we() {
 function tt(e) {
   return e instanceof U ? e : Array.isArray(e) ? new U(...e) : new U(e);
 }
-const G = {
+const N = {
   realistic: {
     outputEncoding: ze,
     toneMapping: Be,
@@ -97,7 +97,7 @@ const G = {
     t[r] instanceof Object && Object.assign(t[r], be(e[r], t[r]));
   return Object.assign(e || {}, t), e;
 }, nt = "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", at = /* @__PURE__ */ rt(nt);
-function _(e) {
+function j(e) {
   return e.replace(/-([a-z])/g, (t, r) => r.toUpperCase());
 }
 function rt(e, t) {
@@ -108,7 +108,7 @@ function rt(e, t) {
 }
 function ot(e) {
   var ee, te;
-  const t = se(), r = S(!1), {
+  const t = se(), r = T(!1), {
     alpha: a = !0,
     antialias: n = !0,
     depth: i,
@@ -118,36 +118,36 @@ function ot(e) {
     premultipliedAlpha: l,
     stencil: v,
     shadows: d = !1,
-    shadowMapType: f = We,
-    physicallyCorrectLights: M = !1,
+    shadowMapType: f = Fe,
+    physicallyCorrectLights: C = !1,
     useLegacyLights: h = !1,
-    outputEncoding: C = ne,
+    outputEncoding: E = ne,
     toneMapping: g = ae,
     toneMappingExposure: p = 1,
     context: b = void 0,
     powerPreference: y = "default",
-    preserveDrawingBuffer: O = !1,
+    preserveDrawingBuffer: A = !1,
     clearColor: w,
-    windowSize: T = !1,
-    preset: j = void 0
-  } = ce(e), { state: x, setState: F } = k(), { width: K, height: X } = u(T) ? qe() : Ve(x.container), { logError: Me, logWarning: Ce } = A(), { pixelRatio: J } = Ye(), { pause: Ee, resume: Le } = we(), I = ue(() => K.value / X.value);
-  !u(T) && ((te = (ee = x.container) == null ? void 0 : ee.value) == null ? void 0 : te.offsetHeight) === 0 && Ce(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
+    windowSize: x = !1,
+    preset: O = void 0
+  } = ce(e), { state: M, setState: I } = k(), { width: K, height: X } = u(x) == !0 || u(x) === "" || u(x) === "true" ? qe() : Ve(M.container), { logError: Me, logWarning: Ce } = F(), { pixelRatio: J } = Ye(), { pause: Ee, resume: Le } = we(), W = ue(() => K.value / X.value);
+  !u(x) && ((te = (ee = M.container) == null ? void 0 : ee.value) == null ? void 0 : te.offsetHeight) === 0 && Ce(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
 You could set windowSize=true to force the canvas to be the size of the window.`);
   const Q = () => {
     t.value && (t.value.setSize(K.value, X.value), t.value.setPixelRatio(Math.min(J.value, 2)));
   }, Z = () => {
     if (!t.value)
       return;
-    const E = u(j);
-    if (E) {
-      E in G || Me("Renderer Preset must be one of these: " + Object.keys(G).join(", ")), be(t.value, G[E]);
+    const L = u(O);
+    if (L) {
+      L in N || Me("Renderer Preset must be one of these: " + Object.keys(N).join(", ")), be(t.value, N[L]);
       return;
     }
-    t.value.shadowMap.enabled = u(d), t.value.shadowMap.type = u(f), t.value.toneMapping = u(g) || ae, t.value.toneMappingExposure = u(p), t.value.outputEncoding = u(C) || ne, w != null && w.value && t.value.setClearColor(tt(u(w))), t.value.useLegacyLights = u(h);
+    t.value.shadowMap.enabled = u(d), t.value.shadowMap.type = u(f), t.value.toneMapping = u(g) || ae, t.value.toneMappingExposure = u(p), t.value.outputEncoding = u(E) || ne, w != null && w.value && t.value.setClearColor(tt(u(w))), t.value.useLegacyLights = u(h);
   }, Se = () => {
-    const E = $(x.canvas);
-    E && (t.value = new Fe({
-      canvas: E,
+    const L = G(M.canvas);
+    L && (t.value = new Ie({
+      canvas: L,
       alpha: u(a),
       antialias: u(n),
       context: u(b),
@@ -157,26 +157,26 @@ You could set windowSize=true to force the canvas to be the size of the window.`
       powerPreference: u(y),
       precision: u(c),
       stencil: u(v),
-      preserveDrawingBuffer: u(O),
+      preserveDrawingBuffer: u(A),
       premultipliedAlpha: u(l)
-    }), F("renderer", t.value), F("clock", new me()), F("aspectRatio", I), Z(), Q(), Le(), r.value = !0);
+    }), I("renderer", t.value), I("clock", new me()), I("aspectRatio", W), Z(), Q(), Le(), r.value = !0);
   }, Te = () => {
     t.value && (t.value.dispose(), t.value = void 0, r.value = !1, Ee());
   };
-  return H([I, J], Q), H(
-    [d, f, C, h, g, p, w],
+  return H([W, J], Q), H(
+    [d, f, E, h, g, p, w],
     Z
   ), H(
-    () => [x.canvas, x.container],
+    () => [M.canvas, M.container],
     () => {
-      $(x.canvas) && $(x.container) && Se();
+      G(M.canvas) && G(M.container) && Se();
     },
     { immediate: !0, deep: !0 }
   ), {
     renderer: t,
     isReady: r,
     dispose: Te,
-    aspectRatio: I
+    aspectRatio: W
   };
 }
 const ye = (e) => !!e && e.constructor === Array;
@@ -186,8 +186,8 @@ function it(e) {
     r.name && (t.nodes[r.name] = r), r.material && !t.materials[r.material.name] && (t.materials[r.material.name] = r.material);
   }), t;
 }
-async function Mt(e, t, r, a, n) {
-  const { logError: i } = A(), s = new e();
+async function xt(e, t, r, a, n) {
+  const { logError: i } = F(), s = new e();
   n && n(s), r && r(s);
   const c = (Array.isArray(t) ? t : [t]).map(
     (l) => new Promise((v, d) => {
@@ -203,8 +203,8 @@ async function Mt(e, t, r, a, n) {
   );
   return ye(t) ? await Promise.all(c) : await c[0];
 }
-async function Ct(e) {
-  const t = new Ie(), r = new He(t), a = (n) => new Promise((i, s) => {
+async function Mt(e) {
+  const t = new We(), r = new He(t), a = (n) => new Promise((i, s) => {
     r.load(
       n,
       (o) => i(o),
@@ -279,7 +279,7 @@ const k = () => ke(xe, {
 });
 function ut() {
   var s;
-  const e = se(new Ue()), t = S(new $e()), r = S(null), { setState: a, state: n } = k();
+  const e = se(new Ue()), t = T(new Ge()), r = T(null), { setState: a, state: n } = k();
   a("raycaster", e.value), a("pointer", t), a("currentInstance", r);
   function i(o) {
     t.value.x = o.clientX / window.innerWidth * 2 - 1, t.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
@@ -292,8 +292,8 @@ function ut() {
     pointer: t
   };
 }
-const Et = !0, oe = "[TresJS ▲ ■ ●] ";
-function A() {
+const Ct = !0, oe = "[TresJS ▲ ■ ●] ";
+function F() {
   function e(a, n) {
     console.error(`${oe} ${a}`, n || "");
   }
@@ -308,8 +308,8 @@ function A() {
     logMessage: r
   };
 }
-function Lt() {
-  const { logWarning: e } = A();
+function Et() {
+  const { logWarning: e } = F();
   function t(a, n, i) {
     let s = null;
     return a.traverse((o) => {
@@ -324,25 +324,22 @@ function Lt() {
     seekByName: r
   };
 }
-const { logWarning: lt } = A(), ft = /^on[^a-z]/, dt = (e) => ft.test(e);
-let z = null;
-const pt = {
+const lt = /^on[^a-z]/, ft = (e) => lt.test(e);
+let _ = null;
+const dt = {
   createElement(e, t, r, a) {
     if (e === "template" || at(e))
       return null;
     let n;
-    if (a === null && (a = {}), a != null && a.args ? n = new N.value[e.replace("Tres", "")](...a.args) : n = new N.value[e.replace("Tres", "")](), n.isCamera) {
-      (!(a != null && a.position) || a != null && a.position.every((s) => s == 0)) && lt(
-        // 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 🤗"
-      );
+    if (a === null && (a = {}), a != null && a.args ? n = new $.value[e.replace("Tres", "")](...a.args) : n = new $.value[e.replace("Tres", "")](), n.isCamera) {
+      a != null && a.position || n.position.set(3, 3, 3), a != null && a.lookAt || n.lookAt(0, 0, 0);
       const { pushCamera: i } = q();
       i(n);
     }
     return (a == null ? void 0 : a.attach) === void 0 && (n.isMaterial ? n.attach = "material" : n.isBufferGeometry && (n.attach = "geometry")), n.events = {}, n;
   },
   insert(e, t, r) {
-    if (z === null && t.isScene && (z = t), t === null && (t = z), t != null && t.isObject3D && (e != null && e.isObject3D)) {
+    if (_ === null && t.isScene && (_ = t), t === null && (t = _), t != null && t.isObject3D && (e != null && e.isObject3D)) {
       const a = r ? t.children.indexOf(r) : 0;
       e.parent = t, t.children.splice(a, 0, e), e.dispatchEvent({ type: "added" });
     } else
@@ -357,20 +354,20 @@ const pt = {
   patchProp(e, t, r, a) {
     if (e) {
       let n = e, i = t;
-      const s = _(i);
+      const s = j(i);
       let o = n == null ? void 0 : n[s];
-      if (e.parent || (e.parent = z), n.type === "BufferGeometry") {
+      if (e.parent || (e.parent = _), n.type === "BufferGeometry") {
         n.setAttribute(
-          _(i),
-          new Ge(...a)
+          j(i),
+          new Ne(...a)
         );
         return;
       }
       if (i.includes("-") && o === void 0) {
         const l = i.split("-");
-        o = l.reduce((v, d) => v[_(d)], n), i = l.pop(), o != null && o.set || (n = l.reduce((v, d) => v[_(d)], n));
+        o = l.reduce((v, d) => v[j(d)], n), i = l.pop(), o != null && o.set || (n = l.reduce((v, d) => v[j(d)], n));
       }
-      dt(i) && (e.events[i] = a);
+      ft(i) && (e.events[i] = a);
       let c = a;
       if (c === "" && (c = !0), re(o)) {
         Array.isArray(c) ? e[s](...c) : e[s](c);
@@ -391,15 +388,15 @@ const pt = {
   setScopeId: () => void 0,
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
-}, { createApp: mt } = Ae(pt), vt = (e) => {
-  const t = mt(r);
+}, { createApp: pt } = Ae(dt), mt = (e) => {
+  const t = pt(r);
   function r() {
     return e && e.default ? e.default() : [];
   }
   return t;
 };
 ve(pe);
-const { logWarning: ht } = A(), gt = de({
+const { logWarning: vt } = F(), ht = de({
   name: "TresScene",
   props: [
     "shadows",
@@ -417,25 +414,25 @@ const { logWarning: ht } = A(), gt = de({
     "preset"
   ],
   setup(e, { slots: t, expose: r }) {
-    e.physicallyCorrectLights === !0 && ht("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const a = S(), n = S(), i = new pe.Scene(), { setState: s } = k();
+    e.physicallyCorrectLights === !0 && vt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
+    const a = T(), n = T(), i = new pe.Scene(), { setState: s } = k();
     s("scene", i), s("canvas", n), s("container", a);
     const { pushCamera: o } = q();
-    o(new B()), Oe(() => {
+    o(new z()), Oe(() => {
       c();
     }), fe(() => {
       s("renderer", null);
     });
     function c() {
-      const { renderer: d } = ot(e), { activeCamera: f } = q(), { onLoop: M } = we(), { raycaster: h, pointer: C } = ut();
+      const { renderer: d } = ot(e), { activeCamera: f } = q(), { onLoop: C } = we(), { raycaster: h, pointer: E } = ut();
       let g = null, p = null;
       ie(() => {
-        f.value && h.value.setFromCamera(C.value, f.value);
-      }), M(() => {
-        var b, y, O, w, T;
+        f.value && h.value.setFromCamera(E.value, f.value);
+      }), C(() => {
+        var b, y, A, w, x;
         if (f.value && ((b = d.value) == null || b.render(i, f.value)), h.value) {
-          const j = h.value.intersectObjects(i.children);
-          j.length > 0 ? (p = j[0], g === null && ((O = (y = p.object.events).onPointerEnter) == null || O.call(y, p))) : g !== null && ((T = p == null ? void 0 : (w = p.object.events).onPointerLeave) == null || T.call(w, g), p = null), g = p;
+          const O = h.value.intersectObjects(i.children);
+          O.length > 0 ? (p = O[0], g === null && ((A = (y = p.object.events).onPointerEnter) == null || A.call(y, p))) : g !== null && ((x = p == null ? void 0 : (w = p.object.events).onPointerLeave) == null || x.call(w, g), p = null), g = p;
         }
       }), Ke(n.value, "click", () => {
         var b, y;
@@ -444,7 +441,7 @@ const { logWarning: ht } = A(), gt = de({
     }
     let l;
     function v() {
-      l = vt(t), l.provide("useTres", k()), l.provide("extend", ve), l.mount(i);
+      l = mt(t), l.provide("useTres", k()), l.provide("extend", ve), l.mount(i);
     }
     return v(), r({
       scene: i
@@ -491,7 +488,7 @@ const { logWarning: ht } = A(), gt = de({
       )
     );
   }
-}), wt = de({
+}), gt = de({
   name: "TresCanvas",
   props: [
     "shadows",
@@ -510,29 +507,29 @@ const { logWarning: ht } = A(), gt = de({
   ],
   setup(e, { slots: t, expose: r }) {
     const a = ct();
-    return r(a), () => P(gt, e, t);
+    return r(a), () => P(ht, e, t);
   }
-}), St = {
+}), Lt = {
   install(e) {
-    e.component("TresCanvas", wt);
+    e.component("TresCanvas", gt);
   }
 };
 export {
   Xe as CameraType,
-  wt as TresCanvas,
-  N as catalogue,
-  St as default,
+  gt as TresCanvas,
+  $ as catalogue,
+  Lt as default,
   ve as extend,
-  Et as isProd,
+  Ct as isProd,
   it as trasverseObjects,
   q as useCamera,
-  Mt as useLoader,
-  A as useLogger,
+  xt as useLoader,
+  F as useLogger,
   ut as useRaycaster,
   we as useRenderLoop,
   ot as useRenderer,
-  Lt as useSeek,
-  Ct as useTexture,
+  Et as useSeek,
+  Mt as useTexture,
   k as useTres,
   ct as useTresProvider
 };

package/dist/tres.umd.cjs

@@ -1,9 +1,9 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-beta.2
+ * version: v2.0.0-beta.3
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,s,u,c){"use strict";function pe(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const K=pe(u),_=s.ref({uuid:u.MathUtils.generateUUID()}),N=e=>void Object.assign(_.value,e);var X=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(X||{});const me=45;let x;function D(){const{state:e,setState:t,aspectRatio:r}=P();function n(o="Perspective",l){var p,w,v;if(o==="Perspective"){const{near:m,far:U,fov:b}=l||{near:.1,far:1e3,fov:me};x=new u.PerspectiveCamera(b,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,m,U),(w=e.cameras)==null||w.push(x)}else{const{left:m,right:U,top:b,bottom:O,near:y,far:g}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};x=new u.OrthographicCamera(m,U,b,O,y,g),(v=e.cameras)==null||v.push(x)}return e.camera=x,t("camera",e.camera),x}function a(){var o;e.camera instanceof u.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(o=e.camera)==null||o.updateProjectionMatrix()}function i(o){var l;(l=e.cameras)==null||l.push(o),o instanceof u.PerspectiveCamera&&e.aspectRatio&&(o.aspect=e.aspectRatio.value),o.updateProjectionMatrix(),t("camera",o)}function f(){e.cameras=[]}return s.watchEffect(()=>{r!=null&&r.value&&a()}),{activeCamera:s.toRef(e,"camera"),createCamera:n,updateCamera:a,pushCamera:i,clearCameras:f}}const J=c.createEventHook(),Q=c.createEventHook(),G=c.createEventHook(),j=new u.Clock;let z=0,B=0;const{pause:he,resume:ve,isActive:ge}=c.useRafFn(()=>{J.trigger({delta:z,elapsed:B,clock:j}),Q.trigger({delta:z,elapsed:B,clock:j}),G.trigger({delta:z,elapsed:B,clock:j})},{immediate:!1});G.on(()=>{z=j.getDelta(),B=j.getElapsedTime()});function $(){return{onBeforeLoop:J.on,onLoop:Q.on,onAfterLoop:G.on,pause:he,resume:ve,isActive:ge}}function we(e){return e instanceof u.Color?e:Array.isArray(e)?new u.Color(...e):new u.Color(e)}const q={realistic:{outputEncoding:u.sRGBEncoding,toneMapping:u.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:u.PCFSoftShadowMap}}},Z=(e,t)=>{for(const r of Object.keys(t))t[r]instanceof Object&&Object.assign(t[r],Z(e[r],t[r]));return Object.assign(e||{},t),e},be=ye("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 F(e){return e.replace(/-([a-z])/g,(t,r)=>r.toUpperCase())}function ye(e,t){const r=Object.create(null),n=e.split(",");for(let a=0;a<n.length;a++)r[n[a]]=!0;return t?a=>!!r[a.toLowerCase()]:a=>!!r[a]}function E(e){var ue,de;const t=s.shallowRef(),r=s.ref(!1),{alpha:n=!0,antialias:a=!0,depth:i,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:o,precision:l,premultipliedAlpha:p,stencil:w,shadows:v=!1,shadowMapType:m=u.PCFShadowMap,physicallyCorrectLights:U=!1,useLegacyLights:b=!1,outputEncoding:O=u.LinearEncoding,toneMapping:y=u.NoToneMapping,toneMappingExposure:g=1,context:M=void 0,powerPreference:L="default",preserveDrawingBuffer:W=!1,clearColor:C,windowSize:T=!1,preset:I=void 0}=s.toRefs(e),{state:S,setState:V}=P(),{width:ie,height:se}=c.resolveUnref(T)?c.useWindowSize():c.useElementSize(S.container),{logError:ze,logWarning:Be}=k(),{pixelRatio:ce}=c.useDevicePixelRatio(),{pause:Fe,resume:Re}=$(),Y=s.computed(()=>ie.value/se.value);!c.resolveUnref(T)&&((de=(ue=S.container)==null?void 0:ue.value)==null?void 0:de.offsetHeight)===0&&Be(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
-You could set windowSize=true to force the canvas to be the size of the window.`);const fe=()=>{t.value&&(t.value.setSize(ie.value,se.value),t.value.setPixelRatio(Math.min(ce.value,2)))},le=()=>{if(!t.value)return;const A=c.resolveUnref(I);if(A){A in q||ze("Renderer Preset must be one of these: "+Object.keys(q).join(", ")),Z(t.value,q[A]);return}t.value.shadowMap.enabled=c.resolveUnref(v),t.value.shadowMap.type=c.resolveUnref(m),t.value.toneMapping=c.resolveUnref(y)||u.NoToneMapping,t.value.toneMappingExposure=c.resolveUnref(g),t.value.outputEncoding=c.resolveUnref(O)||u.LinearEncoding,C!=null&&C.value&&t.value.setClearColor(we(c.resolveUnref(C))),t.value.useLegacyLights=c.resolveUnref(b)},We=()=>{const A=c.unrefElement(S.canvas);A&&(t.value=new u.WebGLRenderer({canvas:A,alpha:c.resolveUnref(n),antialias:c.resolveUnref(a),context:c.resolveUnref(M),depth:c.resolveUnref(i),failIfMajorPerformanceCaveat:c.resolveUnref(o),logarithmicDepthBuffer:c.resolveUnref(f),powerPreference:c.resolveUnref(L),precision:c.resolveUnref(l),stencil:c.resolveUnref(w),preserveDrawingBuffer:c.resolveUnref(W),premultipliedAlpha:c.resolveUnref(p)}),V("renderer",t.value),V("clock",new u.Clock),V("aspectRatio",Y),le(),fe(),Re(),r.value=!0)},Ie=()=>{t.value&&(t.value.dispose(),t.value=void 0,r.value=!1,Fe())};return s.watch([Y,ce],fe),s.watch([v,m,O,b,y,g,C],le),s.watch(()=>[S.canvas,S.container],()=>{c.unrefElement(S.canvas)&&c.unrefElement(S.container)&&We()},{immediate:!0,deep:!0}),{renderer:t,isReady:r,dispose:Ie,aspectRatio:Y}}const H=e=>!!e&&e.constructor===Array;function ee(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 Ce(e,t,r,n,a){const{logError:i}=k(),f=new e;a&&a(f),r&&r(f);const l=(Array.isArray(t)?t:[t]).map(p=>new Promise((w,v)=>{f.load(p,m=>{m.scene&&Object.assign(m,ee(m.scene)),w(m)},n,m=>v(i("[useLoader] - Failed to load resource",m)))}));return H(t)?await Promise.all(l):await l[0]}async function Me(e){const t=new u.LoadingManager,r=new u.TextureLoader(t),n=a=>new Promise((i,f)=>{r.load(a,o=>i(o),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(H(e)){const a=await Promise.all(e.map(i=>n(i)));return e.length>1?a:a[0]}else{const{map:a,displacementMap:i,normalMap:f,roughnessMap:o,metalnessMap:l,aoMap:p,alphaMap:w,matcap:v}=e;return{map:a?await n(a):null,displacementMap:i?await n(i):null,normalMap:f?await n(f):null,roughnessMap:o?await n(o):null,metalnessMap:l?await n(l):null,aoMap:p?await n(p):null,alphaMap:w?await n(w):null,matcap:v?await n(v):null}}}const h=["00","01","02","03","04","05","06","07","08","09","0a","0b","0c","0d","0e","0f","10","11","12","13","14","15","16","17","18","19","1a","1b","1c","1d","1e","1f","20","21","22","23","24","25","26","27","28","29","2a","2b","2c","2d","2e","2f","30","31","32","33","34","35","36","37","38","39","3a","3b","3c","3d","3e","3f","40","41","42","43","44","45","46","47","48","49","4a","4b","4c","4d","4e","4f","50","51","52","53","54","55","56","57","58","59","5a","5b","5c","5d","5e","5f","60","61","62","63","64","65","66","67","68","69","6a","6b","6c","6d","6e","6f","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e","8f","90","91","92","93","94","95","96","97","98","99","9a","9b","9c","9d","9e","9f","a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","aa","ab","ac","ad","ae","af","b0","b1","b2","b3","b4","b5","b6","b7","b8","b9","ba","bb","bc","bd","be","bf","c0","c1","c2","c3","c4","c5","c6","c7","c8","c9","ca","cb","cc","cd","ce","cf","d0","d1","d2","d3","d4","d5","d6","d7","d8","d9","da","db","dc","dd","de","df","e0","e1","e2","e3","e4","e5","e6","e7","e8","e9","ea","eb","ec","ed","ee","ef","f0","f1","f2","f3","f4","f5","f6","f7","f8","f9","fa","fb","fc","fd","fe","ff"];function Le(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,r=Math.random()*4294967295|0,n=Math.random()*4294967295|0;return(h[e&255]+h[e>>8&255]+h[e>>16&255]+h[e>>24&255]+"-"+h[t&255]+h[t>>8&255]+"-"+h[t>>16&15|64]+h[t>>24&255]+"-"+h[r&63|128]+h[r>>8&255]+"-"+h[r>>16&255]+h[r>>24&255]+h[n&255]+h[n>>8&255]+h[n>>16&255]+h[n>>24&255]).toLowerCase()}const te=Symbol();function ne(){const e=s.shallowReactive({uuid:Le(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:s.computed(()=>window.innerWidth/window.innerHeight)});function t(a){return e[a]}function r(a,i){e[a]=i}const n={state:e,...s.toRefs(e),getState:t,setState:r};return s.provide(te,n),n}const P=()=>s.inject(te,{state:s.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});function ae(){var f;const e=s.shallowRef(new u.Raycaster),t=s.ref(new u.Vector2),r=s.ref(null),{setState:n,state:a}=P();n("raycaster",e.value),n("pointer",t),n("currentInstance",r);function i(o){t.value.x=o.clientX/window.innerWidth*2-1,t.value.y=-(o.clientY/window.innerHeight)*2+1}return(f=a==null?void 0:a.renderer)==null||f.domElement.addEventListener("pointermove",i),s.onUnmounted(()=>{var o;(o=a==null?void 0:a.renderer)==null||o.domElement.removeEventListener("pointermove",i)}),{raycaster:e,pointer:t}}const Se=!0,re="[TresJS ▲ ■ ●] ";function k(){function e(n,a){console.error(`${re} ${n}`,a||"")}function t(n){console.warn(`${re} ${n}`)}function r(n,a){}return{logError:e,logWarning:t,logMessage:r}}function xe(){const{logWarning:e}=k();function t(n,a,i){let f=null;return n.traverse(o=>{o[a]===i&&(f=o)}),f||e(`Child with ${a} '${i}' not found.`),f}function r(n,a){return t(n,"name",a)}return{seek:t,seekByName:r}}const{logWarning:Pe}=k(),ke=/^on[^a-z]/,Ue=e=>ke.test(e);function Ge(e){}let R=null;const Oe={createElement(e,t,r,n){if(e==="template"||be(e))return null;let a;if(n===null&&(n={}),n!=null&&n.args?a=new _.value[e.replace("Tres","")](...n.args):a=new _.value[e.replace("Tres","")],a.isCamera){(!(n!=null&&n.position)||n!=null&&n.position.every(f=>f==0))&&Pe("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}=D();i(a)}return(n==null?void 0:n.attach)===void 0&&(a.isMaterial?a.attach="material":a.isBufferGeometry&&(a.attach="geometry")),a.events={},a},insert(e,t,r){if(R===null&&t.isScene&&(R=t),t===null&&(t=R),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const n=r?t.children.indexOf(r):0;e.parent=t,t.children.splice(n,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))},remove(e){if(!e)return;const t=e.parentNode;t&&t.removeChild(e)},patchProp(e,t,r,n){if(e){let a=e,i=t;const f=F(i);let o=a==null?void 0:a[f];if(e.parent||(e.parent=R),a.type==="BufferGeometry"){a.setAttribute(F(i),new u.BufferAttribute(...n));return}if(i.includes("-")&&o===void 0){const p=i.split("-");o=p.reduce((w,v)=>w[F(v)],a),i=p.pop(),o!=null&&o.set||(a=p.reduce((w,v)=>w[F(v)],a))}Ue(i)&&(e.events[i]=n);let l=n;if(l===""&&(l=!0),c.isFunction(o)){Array.isArray(l)?e[f](...l):e[f](l);return}!(o!=null&&o.set)&&!c.isFunction(o)?a[f]=l:o.constructor===l.constructor&&(o!=null&&o.copy)?o==null||o.copy(l):Array.isArray(l)?o.set(...l):!o.isColor&&o.setScalar?o.setScalar(l):o.set(l)}},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:Ae}=s.createRenderer(Oe),je=e=>{const t=Ae(r);function r(){return e&&e.default?e.default():[]}return t};N(K);const{logWarning:Te}=k(),_e=s.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:r}){e.physicallyCorrectLights===!0&&Te("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const n=s.ref(),a=s.ref(),i=new K.Scene,{setState:f}=P();f("scene",i),f("canvas",a),f("container",n);const{pushCamera:o}=D();o(new u.PerspectiveCamera),s.onMounted(()=>{l()}),s.onUnmounted(()=>{f("renderer",null)});function l(){const{renderer:v}=E(e),{activeCamera:m}=D(),{onLoop:U}=$(),{raycaster:b,pointer:O}=ae();let y=null,g=null;s.watchEffect(()=>{m.value&&b.value.setFromCamera(O.value,m.value)}),U(()=>{var M,L,W,C,T;if(m.value&&((M=v.value)==null||M.render(i,m.value)),b.value){const I=b.value.intersectObjects(i.children);I.length>0?(g=I[0],y===null&&((W=(L=g.object.events).onPointerEnter)==null||W.call(L,g))):y!==null&&((T=g==null?void 0:(C=g.object.events).onPointerLeave)==null||T.call(C,y),g=null),y=g}}),c.useEventListener(a.value,"click",()=>{var M,L;g!==null&&((L=(M=g.object.events).onClick)==null||L.call(M,g))})}let p;function w(){p=je(t),p.provide("useTres",P()),p.provide("extend",N),p.mount(i)}return w(),r({scene:i}),()=>s.h(s.h("div",{ref:n,"data-scene":i.uuid,key:i.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[s.h("div",{style:{width:"100%",height:"100%"}},[s.h("canvas",{ref:a,"data-scene":i.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),oe=s.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:r}){const n=ne();return r(n),()=>s.h(_e,e,t)}}),De={install(e){e.component("TresCanvas",oe)}};d.CameraType=X,d.TresCanvas=oe,d.catalogue=_,d.default=De,d.extend=N,d.isProd=Se,d.trasverseObjects=ee,d.useCamera=D,d.useLoader=Ce,d.useLogger=k,d.useRaycaster=ae,d.useRenderLoop=$,d.useRenderer=E,d.useSeek=xe,d.useTexture=Me,d.useTres=P,d.useTresProvider=ne,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,s,u,c){"use strict";function pe(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const K=pe(u),_=s.ref({uuid:u.MathUtils.generateUUID()}),N=e=>void Object.assign(_.value,e);var X=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(X||{});const me=45;let P;function D(){const{state:e,setState:t,aspectRatio:r}=k();function a(o="Perspective",l){var p,w,h;if(o==="Perspective"){const{near:m,far:U,fov:b}=l||{near:.1,far:1e3,fov:me};P=new u.PerspectiveCamera(b,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,m,U),(w=e.cameras)==null||w.push(P)}else{const{left:m,right:U,top:b,bottom:O,near:y,far:g}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};P=new u.OrthographicCamera(m,U,b,O,y,g),(h=e.cameras)==null||h.push(P)}return e.camera=P,t("camera",e.camera),P}function n(){var o;e.camera instanceof u.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(o=e.camera)==null||o.updateProjectionMatrix()}function i(o){var l;(l=e.cameras)==null||l.push(o),o instanceof u.PerspectiveCamera&&e.aspectRatio&&(o.aspect=e.aspectRatio.value),o.updateProjectionMatrix(),t("camera",o)}function f(){e.cameras=[]}return s.watchEffect(()=>{r!=null&&r.value&&n()}),{activeCamera:s.toRef(e,"camera"),createCamera:a,updateCamera:n,pushCamera:i,clearCameras:f}}const J=c.createEventHook(),Q=c.createEventHook(),G=c.createEventHook(),j=new u.Clock;let z=0,B=0;const{pause:ve,resume:he,isActive:ge}=c.useRafFn(()=>{J.trigger({delta:z,elapsed:B,clock:j}),Q.trigger({delta:z,elapsed:B,clock:j}),G.trigger({delta:z,elapsed:B,clock:j})},{immediate:!1});G.on(()=>{z=j.getDelta(),B=j.getElapsedTime()});function q(){return{onBeforeLoop:J.on,onLoop:Q.on,onAfterLoop:G.on,pause:ve,resume:he,isActive:ge}}function we(e){return e instanceof u.Color?e:Array.isArray(e)?new u.Color(...e):new u.Color(e)}const $={realistic:{outputEncoding:u.sRGBEncoding,toneMapping:u.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:u.PCFSoftShadowMap}}},Z=(e,t)=>{for(const r of Object.keys(t))t[r]instanceof Object&&Object.assign(t[r],Z(e[r],t[r]));return Object.assign(e||{},t),e},be=ye("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 F(e){return e.replace(/-([a-z])/g,(t,r)=>r.toUpperCase())}function ye(e,t){const r=Object.create(null),a=e.split(",");for(let n=0;n<a.length;n++)r[a[n]]=!0;return t?n=>!!r[n.toLowerCase()]:n=>!!r[n]}function E(e){var ue,de;const t=s.shallowRef(),r=s.ref(!1),{alpha:a=!0,antialias:n=!0,depth:i,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:o,precision:l,premultipliedAlpha:p,stencil:w,shadows:h=!1,shadowMapType:m=u.PCFShadowMap,physicallyCorrectLights:U=!1,useLegacyLights:b=!1,outputEncoding:O=u.LinearEncoding,toneMapping:y=u.NoToneMapping,toneMappingExposure:g=1,context:M=void 0,powerPreference:L="default",preserveDrawingBuffer:I=!1,clearColor:C,windowSize:S=!1,preset:W=void 0}=s.toRefs(e),{state:x,setState:V}=k(),{width:ie,height:se}=c.resolveUnref(S)==!0||c.resolveUnref(S)===""||c.resolveUnref(S)==="true"?c.useWindowSize():c.useElementSize(x.container),{logError:De,logWarning:ze}=T(),{pixelRatio:ce}=c.useDevicePixelRatio(),{pause:Be,resume:Fe}=q(),Y=s.computed(()=>ie.value/se.value);!c.resolveUnref(S)&&((de=(ue=x.container)==null?void 0:ue.value)==null?void 0:de.offsetHeight)===0&&ze(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
+You could set windowSize=true to force the canvas to be the size of the window.`);const fe=()=>{t.value&&(t.value.setSize(ie.value,se.value),t.value.setPixelRatio(Math.min(ce.value,2)))},le=()=>{if(!t.value)return;const A=c.resolveUnref(W);if(A){A in $||De("Renderer Preset must be one of these: "+Object.keys($).join(", ")),Z(t.value,$[A]);return}t.value.shadowMap.enabled=c.resolveUnref(h),t.value.shadowMap.type=c.resolveUnref(m),t.value.toneMapping=c.resolveUnref(y)||u.NoToneMapping,t.value.toneMappingExposure=c.resolveUnref(g),t.value.outputEncoding=c.resolveUnref(O)||u.LinearEncoding,C!=null&&C.value&&t.value.setClearColor(we(c.resolveUnref(C))),t.value.useLegacyLights=c.resolveUnref(b)},Re=()=>{const A=c.unrefElement(x.canvas);A&&(t.value=new u.WebGLRenderer({canvas:A,alpha:c.resolveUnref(a),antialias:c.resolveUnref(n),context:c.resolveUnref(M),depth:c.resolveUnref(i),failIfMajorPerformanceCaveat:c.resolveUnref(o),logarithmicDepthBuffer:c.resolveUnref(f),powerPreference:c.resolveUnref(L),precision:c.resolveUnref(l),stencil:c.resolveUnref(w),preserveDrawingBuffer:c.resolveUnref(I),premultipliedAlpha:c.resolveUnref(p)}),V("renderer",t.value),V("clock",new u.Clock),V("aspectRatio",Y),le(),fe(),Fe(),r.value=!0)},Ie=()=>{t.value&&(t.value.dispose(),t.value=void 0,r.value=!1,Be())};return s.watch([Y,ce],fe),s.watch([h,m,O,b,y,g,C],le),s.watch(()=>[x.canvas,x.container],()=>{c.unrefElement(x.canvas)&&c.unrefElement(x.container)&&Re()},{immediate:!0,deep:!0}),{renderer:t,isReady:r,dispose:Ie,aspectRatio:Y}}const H=e=>!!e&&e.constructor===Array;function ee(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 Ce(e,t,r,a,n){const{logError:i}=T(),f=new e;n&&n(f),r&&r(f);const l=(Array.isArray(t)?t:[t]).map(p=>new Promise((w,h)=>{f.load(p,m=>{m.scene&&Object.assign(m,ee(m.scene)),w(m)},a,m=>h(i("[useLoader] - Failed to load resource",m)))}));return H(t)?await Promise.all(l):await l[0]}async function Me(e){const t=new u.LoadingManager,r=new u.TextureLoader(t),a=n=>new Promise((i,f)=>{r.load(n,o=>i(o),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(H(e)){const n=await Promise.all(e.map(i=>a(i)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:i,normalMap:f,roughnessMap:o,metalnessMap:l,aoMap:p,alphaMap:w,matcap:h}=e;return{map:n?await a(n):null,displacementMap:i?await a(i):null,normalMap:f?await a(f):null,roughnessMap:o?await a(o):null,metalnessMap:l?await a(l):null,aoMap:p?await a(p):null,alphaMap:w?await a(w):null,matcap:h?await a(h):null}}}const v=["00","01","02","03","04","05","06","07","08","09","0a","0b","0c","0d","0e","0f","10","11","12","13","14","15","16","17","18","19","1a","1b","1c","1d","1e","1f","20","21","22","23","24","25","26","27","28","29","2a","2b","2c","2d","2e","2f","30","31","32","33","34","35","36","37","38","39","3a","3b","3c","3d","3e","3f","40","41","42","43","44","45","46","47","48","49","4a","4b","4c","4d","4e","4f","50","51","52","53","54","55","56","57","58","59","5a","5b","5c","5d","5e","5f","60","61","62","63","64","65","66","67","68","69","6a","6b","6c","6d","6e","6f","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e","8f","90","91","92","93","94","95","96","97","98","99","9a","9b","9c","9d","9e","9f","a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","aa","ab","ac","ad","ae","af","b0","b1","b2","b3","b4","b5","b6","b7","b8","b9","ba","bb","bc","bd","be","bf","c0","c1","c2","c3","c4","c5","c6","c7","c8","c9","ca","cb","cc","cd","ce","cf","d0","d1","d2","d3","d4","d5","d6","d7","d8","d9","da","db","dc","dd","de","df","e0","e1","e2","e3","e4","e5","e6","e7","e8","e9","ea","eb","ec","ed","ee","ef","f0","f1","f2","f3","f4","f5","f6","f7","f8","f9","fa","fb","fc","fd","fe","ff"];function Le(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,r=Math.random()*4294967295|0,a=Math.random()*4294967295|0;return(v[e&255]+v[e>>8&255]+v[e>>16&255]+v[e>>24&255]+"-"+v[t&255]+v[t>>8&255]+"-"+v[t>>16&15|64]+v[t>>24&255]+"-"+v[r&63|128]+v[r>>8&255]+"-"+v[r>>16&255]+v[r>>24&255]+v[a&255]+v[a>>8&255]+v[a>>16&255]+v[a>>24&255]).toLowerCase()}const te=Symbol();function ne(){const e=s.shallowReactive({uuid:Le(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:s.computed(()=>window.innerWidth/window.innerHeight)});function t(n){return e[n]}function r(n,i){e[n]=i}const a={state:e,...s.toRefs(e),getState:t,setState:r};return s.provide(te,a),a}const k=()=>s.inject(te,{state:s.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});function ae(){var f;const e=s.shallowRef(new u.Raycaster),t=s.ref(new u.Vector2),r=s.ref(null),{setState:a,state:n}=k();a("raycaster",e.value),a("pointer",t),a("currentInstance",r);function i(o){t.value.x=o.clientX/window.innerWidth*2-1,t.value.y=-(o.clientY/window.innerHeight)*2+1}return(f=n==null?void 0:n.renderer)==null||f.domElement.addEventListener("pointermove",i),s.onUnmounted(()=>{var o;(o=n==null?void 0:n.renderer)==null||o.domElement.removeEventListener("pointermove",i)}),{raycaster:e,pointer:t}}const Se=!0,re="[TresJS ▲ ■ ●] ";function T(){function e(a,n){console.error(`${re} ${a}`,n||"")}function t(a){console.warn(`${re} ${a}`)}function r(a,n){}return{logError:e,logWarning:t,logMessage:r}}function xe(){const{logWarning:e}=T();function t(a,n,i){let f=null;return a.traverse(o=>{o[n]===i&&(f=o)}),f||e(`Child with ${n} '${i}' not found.`),f}function r(a,n){return t(a,"name",n)}return{seek:t,seekByName:r}}const Pe=/^on[^a-z]/,ke=e=>Pe.test(e);function Ne(e){}let R=null;const Ue={createElement(e,t,r,a){if(e==="template"||be(e))return null;let n;if(a===null&&(a={}),a!=null&&a.args?n=new _.value[e.replace("Tres","")](...a.args):n=new _.value[e.replace("Tres","")],n.isCamera){a!=null&&a.position||n.position.set(3,3,3),a!=null&&a.lookAt||n.lookAt(0,0,0);const{pushCamera:i}=D();i(n)}return(a==null?void 0:a.attach)===void 0&&(n.isMaterial?n.attach="material":n.isBufferGeometry&&(n.attach="geometry")),n.events={},n},insert(e,t,r){if(R===null&&t.isScene&&(R=t),t===null&&(t=R),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const a=r?t.children.indexOf(r):0;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))},remove(e){if(!e)return;const t=e.parentNode;t&&t.removeChild(e)},patchProp(e,t,r,a){if(e){let n=e,i=t;const f=F(i);let o=n==null?void 0:n[f];if(e.parent||(e.parent=R),n.type==="BufferGeometry"){n.setAttribute(F(i),new u.BufferAttribute(...a));return}if(i.includes("-")&&o===void 0){const p=i.split("-");o=p.reduce((w,h)=>w[F(h)],n),i=p.pop(),o!=null&&o.set||(n=p.reduce((w,h)=>w[F(h)],n))}ke(i)&&(e.events[i]=a);let l=a;if(l===""&&(l=!0),c.isFunction(o)){Array.isArray(l)?e[f](...l):e[f](l);return}!(o!=null&&o.set)&&!c.isFunction(o)?n[f]=l:o.constructor===l.constructor&&(o!=null&&o.copy)?o==null||o.copy(l):Array.isArray(l)?o.set(...l):!o.isColor&&o.setScalar?o.setScalar(l):o.set(l)}},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:Oe}=s.createRenderer(Ue),Ae=e=>{const t=Oe(r);function r(){return e&&e.default?e.default():[]}return t};N(K);const{logWarning:je}=T(),Te=s.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:r}){e.physicallyCorrectLights===!0&&je("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=s.ref(),n=s.ref(),i=new K.Scene,{setState:f}=k();f("scene",i),f("canvas",n),f("container",a);const{pushCamera:o}=D();o(new u.PerspectiveCamera),s.onMounted(()=>{l()}),s.onUnmounted(()=>{f("renderer",null)});function l(){const{renderer:h}=E(e),{activeCamera:m}=D(),{onLoop:U}=q(),{raycaster:b,pointer:O}=ae();let y=null,g=null;s.watchEffect(()=>{m.value&&b.value.setFromCamera(O.value,m.value)}),U(()=>{var M,L,I,C,S;if(m.value&&((M=h.value)==null||M.render(i,m.value)),b.value){const W=b.value.intersectObjects(i.children);W.length>0?(g=W[0],y===null&&((I=(L=g.object.events).onPointerEnter)==null||I.call(L,g))):y!==null&&((S=g==null?void 0:(C=g.object.events).onPointerLeave)==null||S.call(C,y),g=null),y=g}}),c.useEventListener(n.value,"click",()=>{var M,L;g!==null&&((L=(M=g.object.events).onClick)==null||L.call(M,g))})}let p;function w(){p=Ae(t),p.provide("useTres",k()),p.provide("extend",N),p.mount(i)}return w(),r({scene:i}),()=>s.h(s.h("div",{ref:a,"data-scene":i.uuid,key:i.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[s.h("div",{style:{width:"100%",height:"100%"}},[s.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=s.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:r}){const a=ne();return r(a),()=>s.h(Te,e,t)}}),_e={install(e){e.component("TresCanvas",oe)}};d.CameraType=X,d.TresCanvas=oe,d.catalogue=_,d.default=_e,d.extend=N,d.isProd=Se,d.trasverseObjects=ee,d.useCamera=D,d.useLoader=Ce,d.useLogger=T,d.useRaycaster=ae,d.useRenderLoop=q,d.useRenderer=E,d.useSeek=xe,d.useTexture=Me,d.useTres=k,d.useTresProvider=ne,Object.defineProperties(d,{__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-beta.2",
+  "version": "2.0.0-beta.3",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -56,8 +56,8 @@
     "vue": "^3.2.47"
   },
   "dependencies": {
-    "-": "^0.0.1",
     "@alvarosabu/utils": "^2.3.0",
+    "@tresjs/core": "2.0.0-beta.2",
     "@vueuse/core": "^9.13.0"
   },
   "devDependencies": {
@@ -65,7 +65,7 @@
     "@huntersofbook/plausible-vue": "^1.0.0",
     "@release-it/conventional-changelog": "^5.1.1",
     "@stackblitz/sdk": "^1.8.1",
-    "@tresjs/cientos": "2.0.0-alpha.5",
+    "@tresjs/cientos": "2.0.0-beta.0",
     "@types/three": "latest",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
@@ -86,7 +86,7 @@
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-visualizer": "^5.9.0",
-    "three": "latest",
+    "three": "^0.150.1",
     "unocss": "^0.50.6",
     "unplugin": "^1.3.1",
     "unplugin-vue-components": "^0.24.1",