@tresjs/core 2.0.0-rc.0 → 2.0.0-rc.2

package/dist/components/TresCanvas.d.ts

@@ -6,7 +6,7 @@ export interface TresCanvasProps {
     shadowMapType?: ShadowMapType;
     physicallyCorrectLights?: boolean;
     useLegacyLights?: boolean;
-    outputEncoding?: TextureEncoding;
+    outputColorSpace?: TextureEncoding;
     toneMapping?: ToneMapping;
     toneMappingExposure?: number;
     context?: WebGLRenderingContext;

package/dist/components/TresScene.d.ts

@@ -6,7 +6,7 @@ export interface TresSceneProps {
     shadowMapType?: ShadowMapType;
     physicallyCorrectLights?: boolean;
     useLegacyLights?: boolean;
-    outputEncoding?: TextureEncoding;
+    outputColorSpace?: TextureEncoding;
     toneMapping?: ToneMapping;
     toneMappingExposure?: number;
     context?: WebGLRenderingContext;

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

@@ -1,6 +1,6 @@
 export declare const rendererPresets: {
     realistic: {
-        outputEncoding: 3001;
+        outputColorSpace: "srgb";
         toneMapping: 4;
         toneMappingExposure: number;
         shadowMap: {

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

@@ -35,11 +35,11 @@ export interface UseRendererOptions extends WebGLRendererParameters {
     useLegacyLights?: MaybeRefOrGetter<boolean>;
     /**
      * Defines the output encoding of the renderer.
-     * Can be LinearEncoding, sRGBEncoding
+     * Can be LinearSRGBColorSpace, SRGBColorSpace
      *
-     * @default LinearEncoding
+     * @default LinearSRGBColorSpace
      */
-    outputEncoding?: MaybeRefOrGetter<TextureEncoding>;
+    outputColorSpace?: MaybeRefOrGetter<TextureEncoding>;
     /**
      * Defines the tone mapping used by the renderer.
      * Can be NoToneMapping, LinearToneMapping, ReinhardToneMapping, Uncharted2ToneMapping, CineonToneMapping, ACESFilmicToneMapping, CustomToneMapping

package/dist/tres.js

@@ -1,20 +1,20 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-rc.0
+ * version: v2.0.0-rc.2
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { ref as R, watchEffect as le, toRef as _e, shallowRef as de, toRefs as me, computed as pe, watch as F, shallowReactive as ve, provide as Se, inject as Oe, onUnmounted as ge, createRenderer as ke, defineComponent as he, onMounted as je, h as k } from "vue";
+import { ref as E, watchEffect as le, toRef as Ae, shallowRef as de, toRefs as me, computed as pe, watch as F, shallowReactive as ve, provide as _e, inject as Oe, onUnmounted as ge, createRenderer as ke, defineComponent as he, onMounted as je, h as k } from "vue";
 import * as we from "three";
-import { MathUtils as De, PerspectiveCamera as $, OrthographicCamera as Ie, Clock as be, Color as N, sRGBEncoding as Be, ACESFilmicToneMapping as ze, PCFSoftShadowMap as Ge, PCFShadowMap as Ve, LinearEncoding as ne, NoToneMapping as re, WebGLRenderer as Fe, LoadingManager as We, TextureLoader as He, Raycaster as Ue, Vector2 as Ye, BufferAttribute as $e } from "three";
+import { MathUtils as De, PerspectiveCamera as $, OrthographicCamera as Ie, Clock as be, Color as N, SRGBColorSpace as Be, ACESFilmicToneMapping as ze, PCFSoftShadowMap as Ge, PCFShadowMap as Ve, LinearSRGBColorSpace as ne, NoToneMapping as re, WebGLRenderer as Fe, LoadingManager as We, TextureLoader as He, Raycaster as Ue, Vector2 as Ye, BufferAttribute as $e } from "three";
 import { createEventHook as J, useRafFn as Ne, toValue as l, useWindowSize as qe, useElementSize as Ke, useDevicePixelRatio as Je, unrefElement as q, useEventListener as Xe } from "@vueuse/core";
-const ye = R({ uuid: De.generateUUID() }), Me = (e) => void Object.assign(ye.value, e);
+const ye = E({ uuid: De.generateUUID() }), Me = (e) => void Object.assign(ye.value, e);
 var Qe = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Qe || {});
 const Ze = 45;
-let _;
-function xe() {
-  const { state: e, setState: t, aspectRatio: o } = S();
+let A;
+function Ce() {
+  const { state: e, setState: t, aspectRatio: o } = _();
   function a(i = "Perspective", s) {
     var u, f, m;
     if (i === "Perspective") {
@@ -23,9 +23,9 @@ function xe() {
         far: 1e3,
         fov: Ze
       };
-      _ = new $(M, ((u = e.aspectRatio) == null ? void 0 : u.value) || window.innerWidth / window.innerHeight, v, h), (f = e.cameras) == null || f.push(_);
+      A = new $(M, ((u = e.aspectRatio) == null ? void 0 : u.value) || window.innerWidth / window.innerHeight, v, h), (f = e.cameras) == null || f.push(A);
     } else {
-      const { left: v, right: h, top: M, bottom: w, near: P, far: x } = s || {
+      const { left: v, right: h, top: M, bottom: w, near: P, far: C } = s || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,9 +33,9 @@ function xe() {
         near: 0.1,
         far: 1e3
       };
-      _ = new Ie(v, h, M, w, P, x), (m = e.cameras) == null || m.push(_);
+      A = new Ie(v, h, M, w, P, C), (m = e.cameras) == null || m.push(A);
     }
-    return e.camera = _, t("camera", e.camera), _;
+    return e.camera = A, t("camera", e.camera), A;
   }
   function n() {
     var i;
@@ -51,28 +51,28 @@ function xe() {
   return le(() => {
     o != null && o.value && n();
   }), {
-    activeCamera: _e(e, "camera"),
+    activeCamera: Ae(e, "camera"),
     createCamera: a,
     updateCamera: n,
     pushCamera: r,
     clearCameras: c
   };
 }
-const Ee = J(), Ce = J(), X = J(), j = new be();
+const xe = J(), Re = J(), X = J(), j = new be();
 let W = 0, H = 0;
 const { pause: et, resume: tt, isActive: at } = Ne(
   () => {
-    Ee.trigger({ delta: W, elapsed: H, clock: j }), Ce.trigger({ delta: W, elapsed: H, clock: j }), X.trigger({ delta: W, elapsed: H, clock: j });
+    xe.trigger({ delta: W, elapsed: H, clock: j }), Re.trigger({ delta: W, elapsed: H, clock: j }), X.trigger({ delta: W, elapsed: H, clock: j });
   },
   { immediate: !1 }
 );
 X.on(() => {
   W = j.getDelta(), H = j.getElapsedTime();
 });
-function Re() {
+function Ee() {
   return {
-    onBeforeLoop: Ee.on,
-    onLoop: Ce.on,
+    onBeforeLoop: xe.on,
+    onLoop: Re.on,
     onAfterLoop: X.on,
     pause: et,
     resume: tt,
@@ -84,7 +84,7 @@ function nt(e) {
 }
 const K = {
   realistic: {
-    outputEncoding: Be,
+    outputColorSpace: Be,
     toneMapping: ze,
     toneMappingExposure: 3,
     shadowMap: {
@@ -108,7 +108,7 @@ function it(e, t) {
 }
 function st(e) {
   var te, ae;
-  const t = de(), o = R(!1), {
+  const t = de(), o = E(!1), {
     alpha: a = !0,
     antialias: n = !0,
     depth: r,
@@ -120,72 +120,72 @@ function st(e) {
     shadows: m = !1,
     shadowMapType: v = Ve,
     useLegacyLights: h = !1,
-    outputEncoding: M = ne,
+    outputColorSpace: M = ne,
     toneMapping: w = re,
     toneMappingExposure: P = 1,
-    context: x = void 0,
+    context: C = void 0,
     powerPreference: U = "default",
-    preserveDrawingBuffer: T = !1,
+    preserveDrawingBuffer: S = !1,
     clearColor: d,
     windowSize: b = !1,
     preset: y = void 0
-  } = me(e), { state: g, setState: L } = S(), { width: O, height: E } = l(b) == !0 || l(b) === "" || l(b) === "true" ? qe() : Ke(g.container), { logError: I, logWarning: B } = D(), { pixelRatio: C } = Je(), { pause: z, resume: G } = Re(), Y = pe(() => O.value / E.value);
+  } = me(e), { state: g, setState: T } = _(), { width: O, height: x } = l(b) == !0 || l(b) === "" || l(b) === "true" ? qe() : Ke(g.container), { logError: I, logWarning: B } = D(), { pixelRatio: R } = Je(), { pause: z, resume: G } = Ee(), Y = pe(() => O.value / x.value);
   !l(b) && ((ae = (te = g.container) == null ? void 0 : te.value) == null ? void 0 : ae.offsetHeight) === 0 && B(`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 Z = () => {
-    t.value && (t.value.setSize(O.value, E.value), t.value.setPixelRatio(Math.min(C.value, 2)));
+    t.value && (t.value.setSize(O.value, x.value), t.value.setPixelRatio(Math.min(R.value, 2)));
   }, ee = () => {
     if (!t.value)
       return;
-    const A = l(y);
-    if (A) {
-      A in K || I("Renderer Preset must be one of these: " + Object.keys(K).join(", ")), Pe(t.value, K[A]);
+    const L = l(y);
+    if (L) {
+      L in K || I("Renderer Preset must be one of these: " + Object.keys(K).join(", ")), Pe(t.value, K[L]);
       return;
     }
-    t.value.shadowMap.enabled = l(m), t.value.shadowMap.type = l(v), t.value.toneMapping = l(w) || re, t.value.toneMappingExposure = l(P), t.value.outputEncoding = l(M) || ne, d != null && d.value && t.value.setClearColor(nt(l(d))), t.value.useLegacyLights = l(h);
-  }, Le = () => {
-    const A = q(g.canvas);
-    A && (t.value = new Fe({
-      canvas: A,
+    t.value.shadowMap.enabled = l(m), t.value.shadowMap.type = l(v), t.value.toneMapping = l(w) || re, t.value.toneMappingExposure = l(P), t.value.outputColorSpace = l(M) || ne, d != null && d.value && t.value.setClearColor(nt(l(d))), t.value.useLegacyLights = l(h);
+  }, Te = () => {
+    const L = q(g.canvas);
+    L && (t.value = new Fe({
+      canvas: L,
       alpha: l(a),
       antialias: l(n),
-      context: l(x),
+      context: l(C),
       depth: l(r),
       failIfMajorPerformanceCaveat: l(i),
       logarithmicDepthBuffer: l(c),
       powerPreference: l(U),
       precision: l(s),
       stencil: l(f),
-      preserveDrawingBuffer: l(T),
+      preserveDrawingBuffer: l(S),
       premultipliedAlpha: l(u)
-    }), L("renderer", t.value), L("clock", new be()), L("aspectRatio", Y), ee(), Z(), G(), o.value = !0);
-  }, Ae = () => {
+    }), T("renderer", t.value), T("clock", new be()), T("aspectRatio", Y), ee(), Z(), G(), o.value = !0);
+  }, Le = () => {
     t.value && (t.value.dispose(), t.value = void 0, o.value = !1, z());
   };
-  return F([Y, C], Z), F(
+  return F([Y, R], Z), F(
     [m, v, M, h, w, P, d],
     ee
   ), F(
     () => [g.canvas, g.container],
     () => {
-      q(g.canvas) && q(g.container) && Le();
+      q(g.canvas) && q(g.container) && Te();
     },
     { immediate: !0, deep: !0 }
   ), {
     renderer: t,
     isReady: o,
-    dispose: Ae,
+    dispose: Le,
     aspectRatio: Y
   };
 }
-const oe = (e) => typeof e == "function", ct = (e) => typeof e == "string", Te = (e) => !!e && e.constructor === Array;
+const oe = (e) => typeof e == "function", ct = (e) => typeof e == "string", Se = (e) => !!e && e.constructor === Array;
 function ut(e) {
   const t = { nodes: {}, materials: {} };
   return e && e.traverse((o) => {
     o.name && (t.nodes[o.name] = o), o.material && !t.materials[o.material.name] && (t.materials[o.material.name] = o.material);
   }), t;
 }
-async function Et(e, t, o, a, n) {
+async function xt(e, t, o, a, n) {
   const { logError: r } = D(), c = new e();
   n && n(c), o && o(c);
   const s = (Array.isArray(t) ? t : [t]).map(
@@ -200,9 +200,9 @@ async function Et(e, t, o, a, n) {
       );
     })
   );
-  return Te(t) ? await Promise.all(s) : await s[0];
+  return Se(t) ? await Promise.all(s) : await s[0];
 }
-async function Ct(e) {
+async function Rt(e) {
   const t = new We(), o = new He(t), a = (n) => new Promise((r, c) => {
     o.load(
       n,
@@ -213,7 +213,7 @@ async function Ct(e) {
       }
     );
   });
-  if (Te(e)) {
+  if (Se(e)) {
     const n = await Promise.all(e.map((r) => a(r)));
     return e.length > 1 ? n : n[0];
   } else {
@@ -266,9 +266,9 @@ function lt() {
     getState: t,
     setState: o
   };
-  return Se(Q, a), a;
+  return _e(Q, a), a;
 }
-const S = () => Oe(Q, {
+const _ = () => Oe(Q, {
   state: ve({
     camera: void 0,
     cameras: [],
@@ -278,7 +278,7 @@ const S = () => Oe(Q, {
 });
 function dt() {
   var c;
-  const e = de(new Ue()), t = R(new Ye()), o = R(null), { setState: a, state: n } = S();
+  const e = de(new Ue()), t = E(new Ye()), o = E(null), { setState: a, state: n } = _();
   a("raycaster", e.value), a("pointer", t), a("currentInstance", o);
   function r(i) {
     t.value.x = i.clientX / window.innerWidth * 2 - 1, t.value.y = -(i.clientY / window.innerHeight) * 2 + 1;
@@ -291,7 +291,7 @@ function dt() {
     pointer: t
   };
 }
-const Rt = !0, ie = "[TresJS ▲ ■ ●] ";
+const Et = !0, ie = "[TresJS ▲ ■ ●] ";
 function D() {
   function e(a, n) {
     console.error(`${ie} ${a}`, n || "");
@@ -344,7 +344,7 @@ const ce = {
     }
     if (r.isCamera) {
       a != null && a.position || r.position.set(3, 3, 3), a != null && a.lookAt || r.lookAt(0, 0, 0);
-      const { pushCamera: f } = xe();
+      const { pushCamera: f } = Ce();
       f(r);
     }
     (a == null ? void 0 : a.attach) === void 0 && (r.isMaterial ? r.attach = "material" : r.isBufferGeometry && (r.attach = "geometry"));
@@ -425,7 +425,7 @@ const { logWarning: fe } = D(), wt = he({
     "shadowMapType",
     "physicallyCorrectLights",
     "useLegacyLights",
-    "outputEncoding",
+    "outputColorSpace",
     "toneMapping",
     "toneMappingExposure",
     "context",
@@ -439,27 +439,27 @@ const { logWarning: fe } = D(), wt = he({
   ],
   setup(e, { slots: t, expose: o }) {
     e.physicallyCorrectLights === !0 && fe("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const a = R(), n = R(), r = new we.Scene(), { setState: c } = S();
+    const a = E(), n = E(), r = new we.Scene(), { setState: c } = _();
     c("scene", r), c("canvas", n), c("container", a);
-    const i = R(), s = t && t.default && t.default();
+    const i = E(), s = t && t.default && t.default();
     s && (s == null ? void 0 : s.length) > 0 && (i.value = s.some((w) => ct(w.type) && w.type.includes("Camera")) || e.camera, i.value || fe("No camera found in the scene, please add one!")), je(() => {
       v();
     }), ge(() => {
       c("renderer", null);
     });
-    const { activeCamera: u, pushCamera: f, clearCameras: m } = xe();
+    const { activeCamera: u, pushCamera: f, clearCameras: m } = Ce();
     function v() {
       const { renderer: w } = st(e);
       e.camera && f(e.camera);
-      const { onLoop: P } = Re(), { raycaster: x, pointer: U } = dt();
-      let T = null, d = null;
+      const { onLoop: P } = Ee(), { raycaster: C, pointer: U } = dt();
+      let S = null, d = null;
       le(() => {
-        u.value && x.value.setFromCamera(U.value, u.value);
+        u.value && C.value.setFromCamera(U.value, u.value);
       }), P(() => {
-        var b, y, g, L, O, E, I, B, C, z;
-        if (u.value && e.disableRender !== !0 && e.disableRender !== "" && ((b = w.value) == null || b.render(r, u.value)), x.value) {
-          const G = x.value.intersectObjects(r.children);
-          G.length > 0 ? (d = G[0], T === null && ((L = (g = (y = d.object) == null ? void 0 : y.events) == null ? void 0 : g.onPointerEnter) == null || L.call(g, d)), (I = (E = (O = d.object) == null ? void 0 : O.events) == null ? void 0 : E.onPointerMove) == null || I.call(E, d)) : T !== null && ((z = (C = (B = d == null ? void 0 : d.object) == null ? void 0 : B.events) == null ? void 0 : C.onPointerLeave) == null || z.call(C, T), d = null), T = d;
+        var b, y, g, T, O, x, I, B, R, z;
+        if (u.value && e.disableRender !== !0 && e.disableRender !== "" && ((b = w.value) == null || b.render(r, u.value)), C.value) {
+          const G = C.value.intersectObjects(r.children);
+          G.length > 0 ? (d = G[0], S === null && ((T = (g = (y = d.object) == null ? void 0 : y.events) == null ? void 0 : g.onPointerEnter) == null || T.call(g, d)), (I = (x = (O = d.object) == null ? void 0 : O.events) == null ? void 0 : x.onPointerMove) == null || I.call(x, d)) : S !== null && ((z = (R = (B = d == null ? void 0 : d.object) == null ? void 0 : B.events) == null ? void 0 : R.onPointerLeave) == null || z.call(R, S), d = null), S = d;
         }
       }), Xe(n.value, "click", () => {
         var b, y, g;
@@ -468,7 +468,7 @@ const { logWarning: fe } = D(), wt = he({
     }
     let h;
     function M() {
-      h = ht(t), h.provide("useTres", S()), h.provide(Q, S()), h.provide("extend", Me), h.mount(r);
+      h = ht(t), h.provide("useTres", _()), h.provide(Q, _()), h.provide("extend", Me), h.mount(r);
     }
     return M(), o({
       scene: r
@@ -527,7 +527,7 @@ const { logWarning: fe } = D(), wt = he({
     "shadowMapType",
     "physicallyCorrectLights",
     "useLegacyLights",
-    "outputEncoding",
+    "outputColorSpace",
     "toneMapping",
     "toneMappingExposure",
     "context",
@@ -543,7 +543,7 @@ const { logWarning: fe } = D(), wt = he({
     const a = lt();
     return o(a), () => k(wt, e, t);
   }
-}), Tt = {
+}), St = {
   install(e) {
     e.component("TresCanvas", bt);
   }
@@ -553,18 +553,18 @@ export {
   Q as TRES_CONTEXT_KEY,
   bt as TresCanvas,
   ye as catalogue,
-  Tt as default,
+  St as default,
   Me as extend,
-  Rt as isProd,
+  Et as isProd,
   ut as trasverseObjects,
-  xe as useCamera,
-  Et as useLoader,
+  Ce as useCamera,
+  xt as useLoader,
   D as useLogger,
   dt as useRaycaster,
-  Re as useRenderLoop,
+  Ee as useRenderLoop,
   st as useRenderer,
   Pt as useSeek,
-  Ct as useTexture,
-  S as useTres,
+  Rt as useTexture,
+  _ as useTres,
   lt as useTresProvider
 };

package/dist/tres.umd.cjs

@@ -1,9 +1,9 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-rc.0
+ * version: v2.0.0-rc.2
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(l,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):(l=typeof globalThis<"u"?globalThis:l||self,s(l.tres={},l.Vue,l.Three,l.VueUseCore))})(this,function(l,s,d,u){"use strict";function ye(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const a=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,a.get?a:{enumerable:!0,get:()=>e[i]})}}return t.default=e,Object.freeze(t)}const H=ye(d),Y=s.ref({uuid:d.MathUtils.generateUUID()}),$=e=>void Object.assign(Y.value,e);var ee=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(ee||{});const Me=45;let A;function q(){const{state:e,setState:t,aspectRatio:i}=_();function a(o="Perspective",c){var m,p,h;if(o==="Perspective"){const{near:w,far:y,fov:L}=c||{near:.1,far:1e3,fov:Me};A=new d.PerspectiveCamera(L,((m=e.aspectRatio)==null?void 0:m.value)||window.innerWidth/window.innerHeight,w,y),(p=e.cameras)==null||p.push(A)}else{const{left:w,right:y,top:L,bottom:M,near:V,far:S}=c||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};A=new d.OrthographicCamera(w,y,L,M,V,S),(h=e.cameras)==null||h.push(A)}return e.camera=A,t("camera",e.camera),A}function n(){var o;e.camera instanceof d.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(o=e.camera)==null||o.updateProjectionMatrix()}function r(o){var c;(c=e.cameras)==null||c.push(o),o instanceof d.PerspectiveCamera&&e.aspectRatio&&(o.aspect=e.aspectRatio.value),o.updateProjectionMatrix(),t("camera",o)}function f(){e.cameras=[]}return s.watchEffect(()=>{i!=null&&i.value&&n()}),{activeCamera:s.toRef(e,"camera"),createCamera:a,updateCamera:n,pushCamera:r,clearCameras:f}}const te=u.createEventHook(),ae=u.createEventHook(),K=u.createEventHook(),D=new d.Clock;let E=0,B=0;const{pause:Ce,resume:Pe,isActive:Le}=u.useRafFn(()=>{te.trigger({delta:E,elapsed:B,clock:D}),ae.trigger({delta:E,elapsed:B,clock:D}),K.trigger({delta:E,elapsed:B,clock:D})},{immediate:!1});K.on(()=>{E=D.getDelta(),B=D.getElapsedTime()});function X(){return{onBeforeLoop:te.on,onLoop:ae.on,onAfterLoop:K.on,pause:Ce,resume:Pe,isActive:Le}}function _e(e){return e instanceof d.Color?e:Array.isArray(e)?new d.Color(...e):new d.Color(e)}const J={realistic:{outputEncoding:d.sRGBEncoding,toneMapping:d.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:d.PCFSoftShadowMap}}},ne=(e,t)=>{for(const i of Object.keys(t))t[i]instanceof Object&&Object.assign(t[i],ne(e[i],t[i]));return Object.assign(e||{},t),e},Se=Oe("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 z(e){return e.replace(/-([a-z])/g,(t,i)=>i.toUpperCase())}function Oe(e,t){const i=Object.create(null),a=e.split(",");for(let n=0;n<a.length;n++)i[a[n]]=!0;return t?n=>!!i[n.toLowerCase()]:n=>!!i[n]}function re(e){var we,be;const t=s.shallowRef(),i=s.ref(!1),{alpha:a=!0,antialias:n=!0,depth:r,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:o,precision:c,premultipliedAlpha:m,stencil:p,shadows:h=!1,shadowMapType:w=d.PCFShadowMap,useLegacyLights:y=!1,outputEncoding:L=d.LinearEncoding,toneMapping:M=d.NoToneMapping,toneMappingExposure:V=1,context:S=void 0,powerPreference:Q="default",preserveDrawingBuffer:k=!1,clearColor:g,windowSize:C=!1,preset:P=void 0}=s.toRefs(e),{state:b,setState:R}=_(),{width:I,height:O}=u.toValue(C)==!0||u.toValue(C)===""||u.toValue(C)==="true"?u.useWindowSize():u.useElementSize(b.container),{logError:F,logWarning:U}=T(),{pixelRatio:x}=u.useDevicePixelRatio(),{pause:W,resume:N}=X(),Z=s.computed(()=>I.value/O.value);!u.toValue(C)&&((be=(we=b.container)==null?void 0:we.value)==null?void 0:be.offsetHeight)===0&&U(`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 ve=()=>{t.value&&(t.value.setSize(I.value,O.value),t.value.setPixelRatio(Math.min(x.value,2)))},he=()=>{if(!t.value)return;const j=u.toValue(P);if(j){j in J||F("Renderer Preset must be one of these: "+Object.keys(J).join(", ")),ne(t.value,J[j]);return}t.value.shadowMap.enabled=u.toValue(h),t.value.shadowMap.type=u.toValue(w),t.value.toneMapping=u.toValue(M)||d.NoToneMapping,t.value.toneMappingExposure=u.toValue(V),t.value.outputEncoding=u.toValue(L)||d.LinearEncoding,g!=null&&g.value&&t.value.setClearColor(_e(u.toValue(g))),t.value.useLegacyLights=u.toValue(y)},Fe=()=>{const j=u.unrefElement(b.canvas);j&&(t.value=new d.WebGLRenderer({canvas:j,alpha:u.toValue(a),antialias:u.toValue(n),context:u.toValue(S),depth:u.toValue(r),failIfMajorPerformanceCaveat:u.toValue(o),logarithmicDepthBuffer:u.toValue(f),powerPreference:u.toValue(Q),precision:u.toValue(c),stencil:u.toValue(p),preserveDrawingBuffer:u.toValue(k),premultipliedAlpha:u.toValue(m)}),R("renderer",t.value),R("clock",new d.Clock),R("aspectRatio",Z),he(),ve(),N(),i.value=!0)},Ue=()=>{t.value&&(t.value.dispose(),t.value=void 0,i.value=!1,W())};return s.watch([Z,x],ve),s.watch([h,w,L,y,M,V,g],he),s.watch(()=>[b.canvas,b.container],()=>{u.unrefElement(b.canvas)&&u.unrefElement(b.container)&&Fe()},{immediate:!0,deep:!0}),{renderer:t,isReady:i,dispose:Ue,aspectRatio:Z}}const ie=e=>typeof e=="function",xe=e=>typeof e=="string",oe=e=>!!e&&e.constructor===Array;function se(e){const t={nodes:{},materials:{}};return e&&e.traverse(i=>{i.name&&(t.nodes[i.name]=i),i.material&&!t.materials[i.material.name]&&(t.materials[i.material.name]=i.material)}),t}async function Ae(e,t,i,a,n){const{logError:r}=T(),f=new e;n&&n(f),i&&i(f);const c=(Array.isArray(t)?t:[t]).map(m=>new Promise((p,h)=>{f.load(m,w=>{w.scene&&Object.assign(w,se(w.scene)),p(w)},a,w=>h(r("[useLoader] - Failed to load resource",w)))}));return oe(t)?await Promise.all(c):await c[0]}async function Te(e){const t=new d.LoadingManager,i=new d.TextureLoader(t),a=n=>new Promise((r,f)=>{i.load(n,o=>r(o),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(oe(e)){const n=await Promise.all(e.map(r=>a(r)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:r,normalMap:f,roughnessMap:o,metalnessMap:c,aoMap:m,alphaMap:p,matcap:h}=e;return{map:n?await a(n):null,displacementMap:r?await a(r):null,normalMap:f?await a(f):null,roughnessMap:o?await a(o):null,metalnessMap:c?await a(c):null,aoMap:m?await a(m):null,alphaMap:p?await a(p):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 Ve(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,i=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[i&63|128]+v[i>>8&255]+"-"+v[i>>16&255]+v[i>>24&255]+v[a&255]+v[a>>8&255]+v[a>>16&255]+v[a>>24&255]).toLowerCase()}const G=Symbol();function ce(){const e=s.shallowReactive({uuid:Ve(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:s.computed(()=>window.innerWidth/window.innerHeight)});function t(n){return e[n]}function i(n,r){e[n]=r}const a={state:e,...s.toRefs(e),getState:t,setState:i};return s.provide(G,a),a}const _=()=>s.inject(G,{state:s.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});function ue(){var f;const e=s.shallowRef(new d.Raycaster),t=s.ref(new d.Vector2),i=s.ref(null),{setState:a,state:n}=_();a("raycaster",e.value),a("pointer",t),a("currentInstance",i);function r(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",r),s.onUnmounted(()=>{var o;(o=n==null?void 0:n.renderer)==null||o.domElement.removeEventListener("pointermove",r)}),{raycaster:e,pointer:t}}const ke=!0,fe="[TresJS ▲ ■ ●] ";function T(){function e(a,n){console.error(`${fe} ${a}`,n||"")}function t(a){console.warn(`${fe} ${a}`)}function i(a,n){}return{logError:e,logWarning:t,logMessage:i}}function Re(){const{logWarning:e}=T();function t(a,n,r){let f=null;return a.traverse(o=>{o[n]===r&&(f=o)}),f||e(`Child with ${n} '${r}' not found.`),f}function i(a,n){return t(a,"name",n)}return{seek:t,seekByName:i}}const je=/^on[^a-z]/,De=e=>je.test(e);function Ne(e){}let le=null;const de={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp"},{logError:me}=T(),Ie={createElement(e,t,i,a){var c,m;if(a||(a={}),a.args||(a.args=[]),e==="template"||Se(e))return null;let n=e.replace("Tres",""),r;if(e==="primitive"){(a==null?void 0:a.object)===void 0&&me("Tres primitives need a prop 'object'");const p=a.object;n=p.type,r=Object.assign(p,{type:n,attach:a.attach,primitive:!0})}else{const p=Y.value[n];p||me(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`),r=new p(...a.args)}if(r.isCamera){a!=null&&a.position||r.position.set(3,3,3),a!=null&&a.lookAt||r.lookAt(0,0,0);const{pushCamera:p}=q();p(r)}(a==null?void 0:a.attach)===void 0&&(r.isMaterial?r.attach="material":r.isBufferGeometry&&(r.attach="geometry"));const{GEOMETRY_VIA_PROP:f,MATERIAL_VIA_PROP:o}=de;return r.isObject3D&&((c=a==null?void 0:a.material)!=null&&c.isMaterial&&(r.userData[o]=!0),(m=a==null?void 0:a.geometry)!=null&&m.isBufferGeometry&&(r.userData[f]=!0)),r.events={},r},insert(e,t){var i,a,n,r;if((((i=e==null?void 0:e.__vnode)==null?void 0:i.type)==="TresGroup"||((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresObject3D")&&t===null&&!((r=(n=e==null?void 0:e.__vnode)==null?void 0:n.ctx)!=null&&r.asyncResolved)){le=e;return}t||(t=le),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"})):typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e))},remove(e){var t,i;if(e){if(e.isObject3D){const a=e,n=r=>{var c,m;const{GEOMETRY_VIA_PROP:f,MATERIAL_VIA_PROP:o}=de;r.userData[o]||(c=r.material)==null||c.dispose(),r.userData[f]||(m=r.geometry)==null||m.dispose()};a.traverse(r=>n(r)),n(a)}(t=e.removeFromParent)==null||t.call(e),(i=e.dispose)==null||i.call(e)}},patchProp(e,t,i,a){if(e){let n=e,r=t,f=z(r),o=n==null?void 0:n[f];if(n.type==="BufferGeometry"){if(r==="args")return;n.setAttribute(z(r),new d.BufferAttribute(...a));return}if(r.includes("-")&&o===void 0){const m=r.split("-");o=m.reduce((p,h)=>p[z(h)],n),r=m.pop(),f=r.toLowerCase(),o!=null&&o.set||(n=m.reduce((p,h)=>p[z(h)],n))}De(r)&&(e.events[r]=a);let c=a;if(c===""&&(c=!0),ie(o)){Array.isArray(c)?e[f](...c):e[f](c);return}!(o!=null&&o.set)&&!ie(o)?n[f]=c:o.constructor===c.constructor&&(o!=null&&o.copy)?o==null||o.copy(c):Array.isArray(c)?o.set(...c):!o.isColor&&o.setScalar?o.setScalar(c):o.set(c)}},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:Ee}=s.createRenderer(Ie),Be=e=>{const t=Ee(i);function i(){return e&&e.default?e.default():[]}return t};$(H);const{logWarning:pe}=T(),ze=s.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:i}){e.physicallyCorrectLights===!0&&pe("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=s.ref(),n=s.ref(),r=new H.Scene,{setState:f}=_();f("scene",r),f("canvas",n),f("container",a);const o=s.ref(),c=t&&t.default&&t.default();c&&(c==null?void 0:c.length)>0&&(o.value=c.some(M=>xe(M.type)&&M.type.includes("Camera"))||e.camera,o.value||pe("No camera found in the scene, please add one!")),s.onMounted(()=>{w()}),s.onUnmounted(()=>{f("renderer",null)});const{activeCamera:m,pushCamera:p,clearCameras:h}=q();function w(){const{renderer:M}=re(e);e.camera&&p(e.camera);const{onLoop:V}=X(),{raycaster:S,pointer:Q}=ue();let k=null,g=null;s.watchEffect(()=>{m.value&&S.value.setFromCamera(Q.value,m.value)}),V(()=>{var C,P,b,R,I,O,F,U,x,W;if(m.value&&e.disableRender!==!0&&e.disableRender!==""&&((C=M.value)==null||C.render(r,m.value)),S.value){const N=S.value.intersectObjects(r.children);N.length>0?(g=N[0],k===null&&((R=(b=(P=g.object)==null?void 0:P.events)==null?void 0:b.onPointerEnter)==null||R.call(b,g)),(F=(O=(I=g.object)==null?void 0:I.events)==null?void 0:O.onPointerMove)==null||F.call(O,g)):k!==null&&((W=(x=(U=g==null?void 0:g.object)==null?void 0:U.events)==null?void 0:x.onPointerLeave)==null||W.call(x,k),g=null),k=g}}),u.useEventListener(n.value,"click",()=>{var C,P,b;g!==null&&((b=(P=(C=g.object)==null?void 0:C.events)==null?void 0:P.onClick)==null||b.call(P,g))})}let y;function L(){y=Be(t),y.provide("useTres",_()),y.provide(G,_()),y.provide("extend",$),y.mount(r)}return L(),i({scene:r}),s.watch(()=>e.camera,M=>{M&&(h(),p(M))}),()=>s.h(s.h("div",{ref:a,"data-scene":r.uuid,key:r.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":r.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),ge=s.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:i}){const a=ce();return i(a),()=>s.h(ze,e,t)}}),Ge={install(e){e.component("TresCanvas",ge)}};l.CameraType=ee,l.TRES_CONTEXT_KEY=G,l.TresCanvas=ge,l.catalogue=Y,l.default=Ge,l.extend=$,l.isProd=ke,l.trasverseObjects=se,l.useCamera=q,l.useLoader=Ae,l.useLogger=T,l.useRaycaster=ue,l.useRenderLoop=X,l.useRenderer=re,l.useSeek=Re,l.useTexture=Te,l.useTres=_,l.useTresProvider=ce,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(l,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):(l=typeof globalThis<"u"?globalThis:l||self,s(l.tres={},l.Vue,l.Three,l.VueUseCore))})(this,function(l,s,d,u){"use strict";function ye(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,a.get?a:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const H=ye(d),Y=s.ref({uuid:d.MathUtils.generateUUID()}),$=e=>void Object.assign(Y.value,e);var ee=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(ee||{});const Ce=45;let A;function q(){const{state:e,setState:t,aspectRatio:o}=L();function a(i="Perspective",c){var m,p,h;if(i==="Perspective"){const{near:w,far:y,fov:P}=c||{near:.1,far:1e3,fov:Ce};A=new d.PerspectiveCamera(P,((m=e.aspectRatio)==null?void 0:m.value)||window.innerWidth/window.innerHeight,w,y),(p=e.cameras)==null||p.push(A)}else{const{left:w,right:y,top:P,bottom:C,near:V,far:_}=c||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};A=new d.OrthographicCamera(w,y,P,C,V,_),(h=e.cameras)==null||h.push(A)}return e.camera=A,t("camera",e.camera),A}function n(){var i;e.camera instanceof d.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(i=e.camera)==null||i.updateProjectionMatrix()}function r(i){var c;(c=e.cameras)==null||c.push(i),i instanceof d.PerspectiveCamera&&e.aspectRatio&&(i.aspect=e.aspectRatio.value),i.updateProjectionMatrix(),t("camera",i)}function f(){e.cameras=[]}return s.watchEffect(()=>{o!=null&&o.value&&n()}),{activeCamera:s.toRef(e,"camera"),createCamera:a,updateCamera:n,pushCamera:r,clearCameras:f}}const te=u.createEventHook(),ae=u.createEventHook(),K=u.createEventHook(),D=new d.Clock;let B=0,G=0;const{pause:Me,resume:Se,isActive:Pe}=u.useRafFn(()=>{te.trigger({delta:B,elapsed:G,clock:D}),ae.trigger({delta:B,elapsed:G,clock:D}),K.trigger({delta:B,elapsed:G,clock:D})},{immediate:!1});K.on(()=>{B=D.getDelta(),G=D.getElapsedTime()});function X(){return{onBeforeLoop:te.on,onLoop:ae.on,onAfterLoop:K.on,pause:Me,resume:Se,isActive:Pe}}function Le(e){return e instanceof d.Color?e:Array.isArray(e)?new d.Color(...e):new d.Color(e)}const J={realistic:{outputColorSpace:d.SRGBColorSpace,toneMapping:d.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:d.PCFSoftShadowMap}}},ne=(e,t)=>{for(const o of Object.keys(t))t[o]instanceof Object&&Object.assign(t[o],ne(e[o],t[o]));return Object.assign(e||{},t),e},_e=Oe("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 z(e){return e.replace(/-([a-z])/g,(t,o)=>o.toUpperCase())}function Oe(e,t){const o=Object.create(null),a=e.split(",");for(let n=0;n<a.length;n++)o[a[n]]=!0;return t?n=>!!o[n.toLowerCase()]:n=>!!o[n]}function re(e){var we,be;const t=s.shallowRef(),o=s.ref(!1),{alpha:a=!0,antialias:n=!0,depth:r,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:i,precision:c,premultipliedAlpha:m,stencil:p,shadows:h=!1,shadowMapType:w=d.PCFShadowMap,useLegacyLights:y=!1,outputColorSpace:P=d.LinearSRGBColorSpace,toneMapping:C=d.NoToneMapping,toneMappingExposure:V=1,context:_=void 0,powerPreference:Q="default",preserveDrawingBuffer:R=!1,clearColor:v,windowSize:M=!1,preset:S=void 0}=s.toRefs(e),{state:b,setState:k}=L(),{width:I,height:O}=u.toValue(M)==!0||u.toValue(M)===""||u.toValue(M)==="true"?u.useWindowSize():u.useElementSize(b.container),{logError:U,logWarning:W}=T(),{pixelRatio:x}=u.useDevicePixelRatio(),{pause:E,resume:N}=X(),Z=s.computed(()=>I.value/O.value);!u.toValue(M)&&((be=(we=b.container)==null?void 0:we.value)==null?void 0:be.offsetHeight)===0&&W(`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 ge=()=>{t.value&&(t.value.setSize(I.value,O.value),t.value.setPixelRatio(Math.min(x.value,2)))},he=()=>{if(!t.value)return;const j=u.toValue(S);if(j){j in J||U("Renderer Preset must be one of these: "+Object.keys(J).join(", ")),ne(t.value,J[j]);return}t.value.shadowMap.enabled=u.toValue(h),t.value.shadowMap.type=u.toValue(w),t.value.toneMapping=u.toValue(C)||d.NoToneMapping,t.value.toneMappingExposure=u.toValue(V),t.value.outputColorSpace=u.toValue(P)||d.LinearSRGBColorSpace,v!=null&&v.value&&t.value.setClearColor(Le(u.toValue(v))),t.value.useLegacyLights=u.toValue(y)},Ue=()=>{const j=u.unrefElement(b.canvas);j&&(t.value=new d.WebGLRenderer({canvas:j,alpha:u.toValue(a),antialias:u.toValue(n),context:u.toValue(_),depth:u.toValue(r),failIfMajorPerformanceCaveat:u.toValue(i),logarithmicDepthBuffer:u.toValue(f),powerPreference:u.toValue(Q),precision:u.toValue(c),stencil:u.toValue(p),preserveDrawingBuffer:u.toValue(R),premultipliedAlpha:u.toValue(m)}),k("renderer",t.value),k("clock",new d.Clock),k("aspectRatio",Z),he(),ge(),N(),o.value=!0)},We=()=>{t.value&&(t.value.dispose(),t.value=void 0,o.value=!1,E())};return s.watch([Z,x],ge),s.watch([h,w,P,y,C,V,v],he),s.watch(()=>[b.canvas,b.container],()=>{u.unrefElement(b.canvas)&&u.unrefElement(b.container)&&Ue()},{immediate:!0,deep:!0}),{renderer:t,isReady:o,dispose:We,aspectRatio:Z}}const oe=e=>typeof e=="function",xe=e=>typeof e=="string",ie=e=>!!e&&e.constructor===Array;function se(e){const t={nodes:{},materials:{}};return e&&e.traverse(o=>{o.name&&(t.nodes[o.name]=o),o.material&&!t.materials[o.material.name]&&(t.materials[o.material.name]=o.material)}),t}async function Ae(e,t,o,a,n){const{logError:r}=T(),f=new e;n&&n(f),o&&o(f);const c=(Array.isArray(t)?t:[t]).map(m=>new Promise((p,h)=>{f.load(m,w=>{w.scene&&Object.assign(w,se(w.scene)),p(w)},a,w=>h(r("[useLoader] - Failed to load resource",w)))}));return ie(t)?await Promise.all(c):await c[0]}async function Te(e){const t=new d.LoadingManager,o=new d.TextureLoader(t),a=n=>new Promise((r,f)=>{o.load(n,i=>r(i),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(ie(e)){const n=await Promise.all(e.map(r=>a(r)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:r,normalMap:f,roughnessMap:i,metalnessMap:c,aoMap:m,alphaMap:p,matcap:h}=e;return{map:n?await a(n):null,displacementMap:r?await a(r):null,normalMap:f?await a(f):null,roughnessMap:i?await a(i):null,metalnessMap:c?await a(c):null,aoMap:m?await a(m):null,alphaMap:p?await a(p):null,matcap:h?await a(h):null}}}const g=["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 Ve(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,o=Math.random()*4294967295|0,a=Math.random()*4294967295|0;return(g[e&255]+g[e>>8&255]+g[e>>16&255]+g[e>>24&255]+"-"+g[t&255]+g[t>>8&255]+"-"+g[t>>16&15|64]+g[t>>24&255]+"-"+g[o&63|128]+g[o>>8&255]+"-"+g[o>>16&255]+g[o>>24&255]+g[a&255]+g[a>>8&255]+g[a>>16&255]+g[a>>24&255]).toLowerCase()}const F=Symbol();function ce(){const e=s.shallowReactive({uuid:Ve(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:s.computed(()=>window.innerWidth/window.innerHeight)});function t(n){return e[n]}function o(n,r){e[n]=r}const a={state:e,...s.toRefs(e),getState:t,setState:o};return s.provide(F,a),a}const L=()=>s.inject(F,{state:s.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});function ue(){var f;const e=s.shallowRef(new d.Raycaster),t=s.ref(new d.Vector2),o=s.ref(null),{setState:a,state:n}=L();a("raycaster",e.value),a("pointer",t),a("currentInstance",o);function r(i){t.value.x=i.clientX/window.innerWidth*2-1,t.value.y=-(i.clientY/window.innerHeight)*2+1}return(f=n==null?void 0:n.renderer)==null||f.domElement.addEventListener("pointermove",r),s.onUnmounted(()=>{var i;(i=n==null?void 0:n.renderer)==null||i.domElement.removeEventListener("pointermove",r)}),{raycaster:e,pointer:t}}const Re=!0,fe="[TresJS ▲ ■ ●] ";function T(){function e(a,n){console.error(`${fe} ${a}`,n||"")}function t(a){console.warn(`${fe} ${a}`)}function o(a,n){}return{logError:e,logWarning:t,logMessage:o}}function ke(){const{logWarning:e}=T();function t(a,n,r){let f=null;return a.traverse(i=>{i[n]===r&&(f=i)}),f||e(`Child with ${n} '${r}' not found.`),f}function o(a,n){return t(a,"name",n)}return{seek:t,seekByName:o}}const je=/^on[^a-z]/,De=e=>je.test(e);function Ne(e){}let le=null;const de={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp"},{logError:me}=T(),Ie={createElement(e,t,o,a){var c,m;if(a||(a={}),a.args||(a.args=[]),e==="template"||_e(e))return null;let n=e.replace("Tres",""),r;if(e==="primitive"){(a==null?void 0:a.object)===void 0&&me("Tres primitives need a prop 'object'");const p=a.object;n=p.type,r=Object.assign(p,{type:n,attach:a.attach,primitive:!0})}else{const p=Y.value[n];p||me(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`),r=new p(...a.args)}if(r.isCamera){a!=null&&a.position||r.position.set(3,3,3),a!=null&&a.lookAt||r.lookAt(0,0,0);const{pushCamera:p}=q();p(r)}(a==null?void 0:a.attach)===void 0&&(r.isMaterial?r.attach="material":r.isBufferGeometry&&(r.attach="geometry"));const{GEOMETRY_VIA_PROP:f,MATERIAL_VIA_PROP:i}=de;return r.isObject3D&&((c=a==null?void 0:a.material)!=null&&c.isMaterial&&(r.userData[i]=!0),(m=a==null?void 0:a.geometry)!=null&&m.isBufferGeometry&&(r.userData[f]=!0)),r.events={},r},insert(e,t){var o,a,n,r;if((((o=e==null?void 0:e.__vnode)==null?void 0:o.type)==="TresGroup"||((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresObject3D")&&t===null&&!((r=(n=e==null?void 0:e.__vnode)==null?void 0:n.ctx)!=null&&r.asyncResolved)){le=e;return}t||(t=le),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"})):typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e))},remove(e){var t,o;if(e){if(e.isObject3D){const a=e,n=r=>{var c,m;const{GEOMETRY_VIA_PROP:f,MATERIAL_VIA_PROP:i}=de;r.userData[i]||(c=r.material)==null||c.dispose(),r.userData[f]||(m=r.geometry)==null||m.dispose()};a.traverse(r=>n(r)),n(a)}(t=e.removeFromParent)==null||t.call(e),(o=e.dispose)==null||o.call(e)}},patchProp(e,t,o,a){if(e){let n=e,r=t,f=z(r),i=n==null?void 0:n[f];if(n.type==="BufferGeometry"){if(r==="args")return;n.setAttribute(z(r),new d.BufferAttribute(...a));return}if(r.includes("-")&&i===void 0){const m=r.split("-");i=m.reduce((p,h)=>p[z(h)],n),r=m.pop(),f=r.toLowerCase(),i!=null&&i.set||(n=m.reduce((p,h)=>p[z(h)],n))}De(r)&&(e.events[r]=a);let c=a;if(c===""&&(c=!0),oe(i)){Array.isArray(c)?e[f](...c):e[f](c);return}!(i!=null&&i.set)&&!oe(i)?n[f]=c:i.constructor===c.constructor&&(i!=null&&i.copy)?i==null||i.copy(c):Array.isArray(c)?i.set(...c):!i.isColor&&i.setScalar?i.setScalar(c):i.set(c)}},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}=s.createRenderer(Ie),Ge=e=>{const t=Be(o);function o(){return e&&e.default?e.default():[]}return t};$(H);const{logWarning:pe}=T(),ze=s.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:o}){e.physicallyCorrectLights===!0&&pe("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=s.ref(),n=s.ref(),r=new H.Scene,{setState:f}=L();f("scene",r),f("canvas",n),f("container",a);const i=s.ref(),c=t&&t.default&&t.default();c&&(c==null?void 0:c.length)>0&&(i.value=c.some(C=>xe(C.type)&&C.type.includes("Camera"))||e.camera,i.value||pe("No camera found in the scene, please add one!")),s.onMounted(()=>{w()}),s.onUnmounted(()=>{f("renderer",null)});const{activeCamera:m,pushCamera:p,clearCameras:h}=q();function w(){const{renderer:C}=re(e);e.camera&&p(e.camera);const{onLoop:V}=X(),{raycaster:_,pointer:Q}=ue();let R=null,v=null;s.watchEffect(()=>{m.value&&_.value.setFromCamera(Q.value,m.value)}),V(()=>{var M,S,b,k,I,O,U,W,x,E;if(m.value&&e.disableRender!==!0&&e.disableRender!==""&&((M=C.value)==null||M.render(r,m.value)),_.value){const N=_.value.intersectObjects(r.children);N.length>0?(v=N[0],R===null&&((k=(b=(S=v.object)==null?void 0:S.events)==null?void 0:b.onPointerEnter)==null||k.call(b,v)),(U=(O=(I=v.object)==null?void 0:I.events)==null?void 0:O.onPointerMove)==null||U.call(O,v)):R!==null&&((E=(x=(W=v==null?void 0:v.object)==null?void 0:W.events)==null?void 0:x.onPointerLeave)==null||E.call(x,R),v=null),R=v}}),u.useEventListener(n.value,"click",()=>{var M,S,b;v!==null&&((b=(S=(M=v.object)==null?void 0:M.events)==null?void 0:S.onClick)==null||b.call(S,v))})}let y;function P(){y=Ge(t),y.provide("useTres",L()),y.provide(F,L()),y.provide("extend",$),y.mount(r)}return P(),o({scene:r}),s.watch(()=>e.camera,C=>{C&&(h(),p(C))}),()=>s.h(s.h("div",{ref:a,"data-scene":r.uuid,key:r.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":r.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),ve=s.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:o}){const a=ce();return o(a),()=>s.h(ze,e,t)}}),Fe={install(e){e.component("TresCanvas",ve)}};l.CameraType=ee,l.TRES_CONTEXT_KEY=F,l.TresCanvas=ve,l.catalogue=Y,l.default=Fe,l.extend=$,l.isProd=Re,l.trasverseObjects=se,l.useCamera=q,l.useLoader=Ae,l.useLogger=T,l.useRaycaster=ue,l.useRenderLoop=X,l.useRenderer=re,l.useSeek=ke,l.useTexture=Te,l.useTres=L,l.useTresProvider=ce,Object.defineProperties(l,{__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-rc.0",
+  "version": "2.0.0-rc.2",
   "type": "module",
   "packageManager": "pnpm@8.3.1",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -66,7 +66,7 @@
     "@release-it/conventional-changelog": "^5.1.1",
     "@stackblitz/sdk": "^1.9.0",
     "@tresjs/cientos": "2.0.0-beta.6",
-    "@tresjs/core": "2.0.0-beta.11",
+    "@tresjs/core": "2.0.0-rc.1",
     "@types/three": "^0.151.0",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@typescript-eslint/parser": "^5.59.2",