@tresjs/core 2.3.0 → 2.4.0

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from './core/catalogue';
 export * from './components';
 export * from './types';
 import { normalizeColor, normalizeVectorFlexibleParam } from './utils/normalize';
+import templateCompilerOptions from './utils/template-compiler-options';
 export interface TresOptions {
     extends?: Record<string, unknown>;
 }
@@ -13,4 +14,4 @@ export interface TresPlugin {
 }
 declare const plugin: TresPlugin;
 export default plugin;
-export { normalizeColor, normalizeVectorFlexibleParam };
+export { normalizeColor, normalizeVectorFlexibleParam, templateCompilerOptions };

package/dist/tres.js

@@ -1,15 +1,15 @@
 /**
  * name: @tresjs/core
- * version: v2.3.0
+ * version: v2.4.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { ref as V, shallowReactive as ce, toRefs as ue, provide as Te, inject as Le, watchEffect as fe, toRef as _e, shallowRef as Ae, computed as G, watch as D, onUnmounted as le, reactive as Se, createRenderer as Oe, defineComponent as de, onMounted as ke, h as L } from "vue";
+import { ref as G, shallowReactive as ce, toRefs as ue, provide as xe, inject as Le, watchEffect as fe, toRef as _e, shallowRef as Se, computed as A, watch as I, onUnmounted as le, reactive as Ae, createRenderer as Oe, defineComponent as de, onMounted as ke, h as _ } from "vue";
 import * as q from "three";
-import { PerspectiveCamera as z, OrthographicCamera as je, Clock as pe, Vector3 as De, Color as W, SRGBColorSpace as Ie, ACESFilmicToneMapping as Be, PCFSoftShadowMap as He, PCFShadowMap as Ve, LinearSRGBColorSpace as ae, NoToneMapping as ne, WebGLRenderer as Ge, LoadingManager as Fe, TextureLoader as Ne, Raycaster as ze, Vector2 as We, BufferAttribute as Ue } from "three";
-import { createEventHook as A, useRafFn as Ye, toValue as m, useWindowSize as $e, useElementSize as qe, useDevicePixelRatio as Ke, unrefElement as U, usePointer as Je, useElementBounding as Xe } from "@vueuse/core";
-const me = V({}), ve = (e) => void Object.assign(me.value, e), re = (e) => typeof e == "function", ge = (e) => !!e && e.constructor === Array, b = ["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"];
+import { PerspectiveCamera as z, OrthographicCamera as De, Clock as pe, Vector3 as je, Color as W, SRGBColorSpace as Ie, ACESFilmicToneMapping as Be, PCFSoftShadowMap as He, PCFShadowMap as Ve, LinearSRGBColorSpace as ae, NoToneMapping as ne, WebGLRenderer as Ge, LoadingManager as Fe, TextureLoader as Ne, Raycaster as ze, Vector2 as We, BufferAttribute as $e } from "three";
+import { createEventHook as O, useRafFn as Ue, toValue as m, useWindowSize as Ye, useElementSize as qe, useDevicePixelRatio as Ke, unrefElement as $, usePointer as Je, useElementBounding as Xe } from "@vueuse/core";
+const me = G({}), ve = (e) => void Object.assign(me.value, e), re = (e) => typeof e == "function", ge = (e) => !!e && e.constructor === Array, b = ["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 Qe() {
   const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, n = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0;
   return (b[e & 255] + b[e >> 8 & 255] + b[e >> 16 & 255] + b[e >> 24 & 255] + "-" + b[t & 255] + b[t >> 8 & 255] + "-" + b[t >> 16 & 15 | 64] + b[t >> 24 & 255] + "-" + b[n & 63 | 128] + b[n >> 8 & 255] + "-" + b[n >> 16 & 255] + b[n >> 24 & 255] + b[a & 255] + b[a >> 8 & 255] + b[a >> 16 & 255] + b[a >> 24 & 255]).toLowerCase();
@@ -29,8 +29,8 @@ function Ze() {
   function t(o) {
     return e[o];
   }
-  function n(o, i) {
-    e[o] = i;
+  function n(o, s) {
+    e[o] = s;
   }
   const a = {
     state: e,
@@ -38,9 +38,9 @@ function Ze() {
     getState: t,
     setState: n
   };
-  return Te(K, a), a;
+  return xe(K, a), a;
 }
-const S = () => Le(K, {
+const k = () => Le(K, {
   state: ce({
     camera: void 0,
     cameras: [],
@@ -52,20 +52,20 @@ const S = () => Le(K, {
 });
 var et = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(et || {});
 const tt = 45;
-let R;
+let x;
 function at() {
-  const { state: e, setState: t, aspectRatio: n } = S();
-  function a(s = "Perspective", c) {
-    var l, d, p;
-    if (s === "Perspective") {
-      const { near: y, far: h, fov: v } = c || {
+  const { state: e, setState: t, aspectRatio: n } = k();
+  function a(i = "Perspective", u) {
+    var l, p, d;
+    if (i === "Perspective") {
+      const { near: E, far: y, fov: h } = u || {
         near: 0.1,
         far: 1e3,
         fov: tt
       };
-      R = new z(v, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, y, h), (d = e.cameras) == null || d.push(R);
+      x = new z(h, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, E, y), (p = e.cameras) == null || p.push(x);
     } else {
-      const { left: y, right: h, top: v, bottom: M, near: w, far: E } = c || {
+      const { left: E, right: y, top: h, bottom: w, near: C, far: g } = u || {
         left: -100,
         right: 100,
         top: 100,
@@ -73,21 +73,21 @@ function at() {
         near: 0.1,
         far: 1e3
       };
-      R = new je(y, h, v, M, w, E), (p = e.cameras) == null || p.push(R);
+      x = new De(E, y, h, w, C, g), (d = e.cameras) == null || d.push(x);
     }
-    return e.camera = R, t("camera", e.camera), R;
+    return e.camera = x, t("camera", e.camera), x;
   }
   function o() {
-    var s;
-    e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (s = e.camera) == null || s.updateProjectionMatrix();
+    var i;
+    e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (i = e.camera) == null || i.updateProjectionMatrix();
   }
-  function i(s) {
-    var c;
-    (c = e.cameras) == null || c.push(s), s instanceof z && e.aspectRatio && (s.aspect = e.aspectRatio.value), s.updateProjectionMatrix(), t("camera", s);
+  function s(i) {
+    var u;
+    (u = e.cameras) == null || u.push(i), i instanceof z && e.aspectRatio && (i.aspect = e.aspectRatio.value), i.updateProjectionMatrix(), t("camera", i);
   }
-  function u(s) {
-    var c;
-    ((c = e.cameras) == null ? void 0 : c.length) === 0 && i(s);
+  function c(i) {
+    var u;
+    ((u = e.cameras) == null ? void 0 : u.length) === 0 && s(i);
   }
   function r() {
     e.cameras = [];
@@ -98,21 +98,21 @@ function at() {
     activeCamera: _e(e, "camera"),
     createCamera: a,
     updateCamera: o,
-    pushCamera: i,
+    pushCamera: s,
     clearCameras: r,
-    setFirstCamera: u
+    setFirstCamera: c
   };
 }
-const we = A(), be = A(), J = A(), _ = new pe();
-let I = 0, B = 0;
-const { pause: nt, resume: rt, isActive: ot } = Ye(
+const we = O(), be = O(), J = O(), S = new pe();
+let B = 0, H = 0;
+const { pause: nt, resume: rt, isActive: ot } = Ue(
   () => {
-    we.trigger({ delta: I, elapsed: B, clock: _ }), be.trigger({ delta: I, elapsed: B, clock: _ }), J.trigger({ delta: I, elapsed: B, clock: _ });
+    we.trigger({ delta: B, elapsed: H, clock: S }), be.trigger({ delta: B, elapsed: H, clock: S }), J.trigger({ delta: B, elapsed: H, clock: S });
   },
   { immediate: !1 }
 );
 J.on(() => {
-  I = _.getDelta(), B = _.getElapsedTime();
+  B = S.getDelta(), H = S.getElapsedTime();
 });
 function he() {
   return {
@@ -124,13 +124,13 @@ function he() {
     isActive: ot
   };
 }
-function Pt(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof De ? [e.x, e.y, e.z] : e;
+function Rt(e) {
+  return typeof e == "number" ? [e, e, e] : e instanceof je ? [e.x, e.y, e.z] : e;
 }
 function it(e) {
   return e instanceof W ? e : Array.isArray(e) ? new W(...e) : new W(e);
 }
-const Y = {
+const U = {
   realistic: {
     outputColorSpace: Ie,
     toneMapping: Be,
@@ -157,12 +157,12 @@ function ut(e, t) {
 const ft = (e, t) => {
   const n = /* @__PURE__ */ new Set(), a = [];
   for (const o of e) {
-    const i = t(o);
-    n.has(i) || (n.add(i), a.push(o));
+    const s = t(o);
+    n.has(s) || (n.add(s), a.push(o));
   }
   return a;
-}, xt = !0, oe = "[TresJS ▲ ■ ●] ";
-function O() {
+}, Tt = !0, oe = "[TresJS ▲ ■ ●] ";
+function D() {
   function e(a, o) {
     console.error(`${oe} ${a}`, o || "");
   }
@@ -178,31 +178,31 @@ function O() {
   };
 }
 function lt(e) {
-  const t = Ae(), n = V(!1), {
+  const t = Se(), n = G(!1), {
     alpha: a = !0,
     antialias: o = !0,
-    depth: i,
-    logarithmicDepthBuffer: u,
+    depth: s,
+    logarithmicDepthBuffer: c,
     failIfMajorPerformanceCaveat: r,
-    precision: s,
-    premultipliedAlpha: c,
+    precision: i,
+    premultipliedAlpha: u,
     stencil: l,
-    shadows: d = !1,
-    shadowMapType: p = Ve,
-    useLegacyLights: y = !1,
-    outputColorSpace: h = ae,
-    toneMapping: v = ne,
-    toneMappingExposure: M = 1,
-    context: w = void 0,
-    powerPreference: E = "default",
-    preserveDrawingBuffer: k = !1,
-    clearColor: x,
-    windowSize: C = !1,
+    shadows: p = !1,
+    shadowMapType: d = Ve,
+    useLegacyLights: E = !1,
+    outputColorSpace: y = ae,
+    toneMapping: h = ne,
+    toneMappingExposure: w = 1,
+    context: C = void 0,
+    powerPreference: g = "default",
+    preserveDrawingBuffer: M = !1,
+    clearColor: R,
+    windowSize: T = !1,
     preset: F = void 0
-  } = ue(e), { state: f, setState: g } = S(), { width: X, height: Q } = m(C) == !0 || m(C) === "" || m(C) === "true" ? $e() : qe(f.container), { logError: Ee, logWarning: Me } = O(), { pixelRatio: Z } = Ke(), { pause: Pe, resume: xe } = he(), N = G(() => X.value / Q.value);
+  } = ue(e), { state: f, setState: v } = k(), { width: X, height: Q } = m(T) == !0 || m(T) === "" || m(T) === "true" ? Ye() : qe(f.container), { logError: Ee, logWarning: Me } = D(), { pixelRatio: Z } = Ke(), { pause: Pe, resume: Ce } = he(), N = A(() => X.value / Q.value);
   setTimeout(() => {
     var P;
-    !m(C) && !((P = f.canvas) != null && P.value.offsetHeight) && Me(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
+    !m(T) && !((P = f.canvas) != null && P.value.offsetHeight) && Me(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
   You could set windowSize=true to force the canvas to be the size of the window.`);
   }, 1e3);
   const ee = () => {
@@ -212,42 +212,42 @@ function lt(e) {
       return;
     const P = m(F);
     if (P) {
-      P in Y || Ee("Renderer Preset must be one of these: " + Object.keys(Y).join(", ")), ye(t.value, Y[P]);
+      P in U || Ee("Renderer Preset must be one of these: " + Object.keys(U).join(", ")), ye(t.value, U[P]);
       return;
     }
-    t.value.shadowMap.enabled = m(d), t.value.shadowMap.type = m(p), t.value.toneMapping = m(v) || ne, t.value.toneMappingExposure = m(M), t.value.outputColorSpace = m(h) || ae, x != null && x.value && t.value.setClearColor(it(m(x))), t.value.useLegacyLights = m(y);
-  }, Ce = () => {
-    const P = U(f.canvas);
+    t.value.shadowMap.enabled = m(p), t.value.shadowMap.type = m(d), t.value.toneMapping = m(h) || ne, t.value.toneMappingExposure = m(w), t.value.outputColorSpace = m(y) || ae, R != null && R.value && t.value.setClearColor(it(m(R))), t.value.useLegacyLights = m(E);
+  }, Re = () => {
+    const P = $(f.canvas);
     P && (t.value = new Ge({
       canvas: P,
       alpha: m(a),
       antialias: m(o),
-      context: m(w),
-      depth: m(i),
+      context: m(C),
+      depth: m(s),
       failIfMajorPerformanceCaveat: m(r),
-      logarithmicDepthBuffer: m(u),
-      powerPreference: m(E),
-      precision: m(s),
+      logarithmicDepthBuffer: m(c),
+      powerPreference: m(g),
+      precision: m(i),
       stencil: m(l),
-      preserveDrawingBuffer: m(k),
-      premultipliedAlpha: m(c)
-    }), g("renderer", t.value), g("clock", new pe()), g("aspectRatio", N), te(), ee(), xe(), n.value = !0);
-  }, Re = () => {
+      preserveDrawingBuffer: m(M),
+      premultipliedAlpha: m(u)
+    }), v("renderer", t.value), v("clock", new pe()), v("aspectRatio", N), te(), ee(), Ce(), n.value = !0);
+  }, Te = () => {
     t.value && (t.value.dispose(), t.value = void 0, n.value = !1, Pe());
   };
-  return D([N, Z], ee), D(
-    [d, p, h, y, v, M, x],
+  return I([N, Z], ee), I(
+    [p, d, y, E, h, w, R],
     te
-  ), D(
+  ), I(
     () => [f.canvas, f.container],
     () => {
-      U(f.canvas) && U(f.container) && Ce();
+      $(f.canvas) && $(f.container) && Re();
     },
     { immediate: !0, deep: !0 }
   ), {
     renderer: t,
     isReady: n,
-    dispose: Re,
+    dispose: Te,
     aspectRatio: N
   };
 }
@@ -257,109 +257,109 @@ function dt(e) {
     n.name && (t.nodes[n.name] = n), n.material && !t.materials[n.material.name] && (t.materials[n.material.name] = n.material);
   }), t;
 }
-async function Ct(e, t, n, a, o) {
-  const { logError: i } = O(), u = new e();
-  o && o(u), n && n(u);
-  const s = (Array.isArray(t) ? t : [t]).map(
-    (c) => new Promise((l, d) => {
-      u.load(
-        c,
-        (p) => {
-          p.scene && Object.assign(p, dt(p.scene)), l(p);
+async function xt(e, t, n, a, o) {
+  const { logError: s } = D(), c = new e();
+  o && o(c), n && n(c);
+  const i = (Array.isArray(t) ? t : [t]).map(
+    (u) => new Promise((l, p) => {
+      c.load(
+        u,
+        (d) => {
+          d.scene && Object.assign(d, dt(d.scene)), l(d);
         },
         a,
-        (p) => d(i("[useLoader] - Failed to load resource", p))
+        (d) => p(s("[useLoader] - Failed to load resource", d))
       );
     })
   );
-  return ge(t) ? await Promise.all(s) : await s[0];
+  return ge(t) ? await Promise.all(i) : await i[0];
 }
-async function Rt(e) {
-  const t = new Fe(), n = new Ne(t), a = (o) => new Promise((i, u) => {
+async function Lt(e) {
+  const t = new Fe(), n = new Ne(t), a = (o) => new Promise((s, c) => {
     n.load(
       o,
-      (r) => i(r),
+      (r) => s(r),
       () => null,
       () => {
-        u(new Error("[useTextures] - Failed to load texture"));
+        c(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
   if (ge(e)) {
-    const o = await Promise.all(e.map((i) => a(i)));
+    const o = await Promise.all(e.map((s) => a(s)));
     return e.length > 1 ? o : o[0];
   } else {
     const {
       map: o,
-      displacementMap: i,
-      normalMap: u,
+      displacementMap: s,
+      normalMap: c,
       roughnessMap: r,
-      metalnessMap: s,
-      aoMap: c,
+      metalnessMap: i,
+      aoMap: u,
       alphaMap: l,
-      matcap: d
+      matcap: p
     } = e;
     return {
       map: o ? await a(o) : null,
-      displacementMap: i ? await a(i) : null,
-      normalMap: u ? await a(u) : null,
+      displacementMap: s ? await a(s) : null,
+      normalMap: c ? await a(c) : null,
       roughnessMap: r ? await a(r) : null,
-      metalnessMap: s ? await a(s) : null,
-      aoMap: c ? await a(c) : null,
+      metalnessMap: i ? await a(i) : null,
+      aoMap: u ? await a(u) : null,
       alphaMap: l ? await a(l) : null,
-      matcap: d ? await a(d) : null
+      matcap: p ? await a(p) : null
     };
   }
 }
 const pt = (e) => {
-  const { state: t } = S(), n = G(() => {
+  const { state: t } = k(), n = A(() => {
     var f;
     return (f = t.canvas) == null ? void 0 : f.value;
-  }), { x: a, y: o } = Je({ target: n }), { width: i, height: u, top: r, left: s } = Xe(n), c = new ze(), l = ({ x: f, y: g }) => {
+  }), { x: a, y: o } = Je({ target: n }), { width: s, height: c, top: r, left: i } = Xe(n), u = new ze(), l = ({ x: f, y: v }) => {
     if (n.value)
       return {
-        x: (f - s.value) / i.value * 2 - 1,
-        y: -((g - r.value) / u.value) * 2 + 1
+        x: (f - i.value) / s.value * 2 - 1,
+        y: -((v - r.value) / c.value) * 2 + 1
       };
-  }, d = ({ x: f, y: g }) => {
+  }, p = ({ x: f, y: v }) => {
     if (t.camera)
-      return c.setFromCamera(new We(f, g), t.camera), c.intersectObjects(e.value, !1);
-  }, p = (f) => {
-    const g = l({
+      return u.setFromCamera(new We(f, v), t.camera), u.intersectObjects(e.value, !1);
+  }, d = (f) => {
+    const v = l({
       x: (f == null ? void 0 : f.clientX) ?? a.value,
       y: (f == null ? void 0 : f.clientY) ?? o.value
     });
-    return g ? d(g) || [] : [];
-  }, y = G(() => p()), h = A(), v = A(), M = (f, g) => {
-    f.trigger({ event: g, intersects: p(g) });
-  }, w = (f) => {
-    M(v, f);
+    return v ? p(v) || [] : [];
+  }, E = A(() => d()), y = O(), h = O(), w = (f, v) => {
+    f.trigger({ event: v, intersects: d(v) });
+  }, C = (f) => {
+    w(h, f);
   };
-  let E;
-  const k = (f) => {
-    var g;
-    E = (g = p(f)[0]) == null ? void 0 : g.object;
-  }, x = (f) => {
-    var g;
-    f instanceof PointerEvent && E === ((g = p(f)[0]) == null ? void 0 : g.object) && M(h, f);
-  }, C = (f) => v.trigger({ event: f, intersects: [] }), F = fe(() => {
-    n != null && n.value && (n.value.addEventListener("pointerup", x), n.value.addEventListener("pointerdown", k), n.value.addEventListener("pointermove", w), n.value.addEventListener("pointerleave", C), F());
+  let g;
+  const M = (f) => {
+    var v;
+    g = (v = d(f)[0]) == null ? void 0 : v.object;
+  }, R = (f) => {
+    var v;
+    f instanceof PointerEvent && g === ((v = d(f)[0]) == null ? void 0 : v.object) && w(y, f);
+  }, T = (f) => h.trigger({ event: f, intersects: [] }), F = fe(() => {
+    n != null && n.value && (n.value.addEventListener("pointerup", R), n.value.addEventListener("pointerdown", M), n.value.addEventListener("pointermove", C), n.value.addEventListener("pointerleave", T), F());
   });
   return le(() => {
-    n != null && n.value && (n.value.removeEventListener("pointerup", x), n.value.removeEventListener("pointerdown", k), n.value.removeEventListener("pointermove", w), n.value.removeEventListener("pointerleave", C));
+    n != null && n.value && (n.value.removeEventListener("pointerup", R), n.value.removeEventListener("pointerdown", M), n.value.removeEventListener("pointermove", C), n.value.removeEventListener("pointerleave", T));
   }), {
-    intersects: y,
-    onClick: (f) => h.on(f).off,
-    onPointerMove: (f) => v.on(f).off
+    intersects: E,
+    onClick: (f) => y.on(f).off,
+    onPointerMove: (f) => h.on(f).off
   };
 };
-function Tt() {
-  const { logWarning: e } = O();
-  function t(a, o, i) {
-    let u = null;
+function _t() {
+  const { logWarning: e } = D();
+  function t(a, o, s) {
+    let c = null;
     return a.traverse((r) => {
-      r[o] === i && (u = r);
-    }), u || e(`Child with ${o} '${i}' not found.`), u;
+      r[o] === s && (c = r);
+    }), c || e(`Child with ${o} '${s}' not found.`), c;
   }
   function n(a, o) {
     return t(a, "name", o);
@@ -370,83 +370,83 @@ function Tt() {
   };
 }
 const mt = () => {
-  const e = Se({
+  const e = Ae({
     click: /* @__PURE__ */ new Map(),
     pointerMove: /* @__PURE__ */ new Map(),
     pointerEnter: /* @__PURE__ */ new Map(),
     pointerLeave: /* @__PURE__ */ new Map()
   }), t = (r) => {
-    Object.values(e).forEach((s) => s.delete(r));
+    Object.values(e).forEach((i) => i.delete(r));
   }, n = (r) => {
-    const { onClick: s, onPointerMove: c, onPointerEnter: l, onPointerLeave: d } = r;
-    s && e.click.set(r, s), c && e.pointerMove.set(r, c), l && e.pointerEnter.set(r, l), d && e.pointerLeave.set(r, d), r.addEventListener("removed", () => {
-      r.traverse((p) => {
-        t(p);
+    const { onClick: i, onPointerMove: u, onPointerEnter: l, onPointerLeave: p } = r;
+    i && e.click.set(r, i), u && e.pointerMove.set(r, u), l && e.pointerEnter.set(r, l), p && e.pointerLeave.set(r, p), r.addEventListener("removed", () => {
+      r.traverse((d) => {
+        t(d);
       }), t(r);
     });
-  }, a = G(
+  }, a = A(
     () => ft(
       Object.values(e).map((r) => Array.from(r.keys())).flat(),
       ({ uuid: r }) => r
     )
-  ), { onClick: o, onPointerMove: i } = pt(a);
-  o(({ intersects: r, event: s }) => {
-    var c;
-    r.length && ((c = e.click.get(r[0].object)) == null || c(r[0], s));
+  ), { onClick: o, onPointerMove: s } = pt(a);
+  o(({ intersects: r, event: i }) => {
+    var u;
+    r.length && ((u = e.click.get(r[0].object)) == null || u(r[0], i));
   });
-  let u;
-  return i(({ intersects: r, event: s }) => {
-    var y, h, v, M;
-    const c = (y = r == null ? void 0 : r[0]) == null ? void 0 : y.object, { pointerLeave: l, pointerEnter: d, pointerMove: p } = e;
-    u && u !== c && ((h = l.get(u)) == null || h(u, s)), c && (u !== c && ((v = d.get(c)) == null || v(r[0], s)), (M = p.get(c)) == null || M(r[0], s)), u = c || null;
+  let c;
+  return s(({ intersects: r, event: i }) => {
+    var E, y, h, w;
+    const u = (E = r == null ? void 0 : r[0]) == null ? void 0 : E.object, { pointerLeave: l, pointerEnter: p, pointerMove: d } = e;
+    c && c !== u && ((y = l.get(c)) == null || y(c, i)), u && (c !== u && ((h = p.get(u)) == null || h(r[0], i)), (w = d.get(u)) == null || w(r[0], i)), c = u || null;
   }), {
     registerObject: n,
     deregisterObject: t
   };
-}, H = {
+}, V = {
   GEOMETRY_VIA_PROP: "tres__geometryViaProp",
   MATERIAL_VIA_PROP: "tres__materialViaProp",
   REGISTER_AT_POINTER_EVENT_HANDLER: "tres__registerAtPointerEventHandler"
 };
-let $ = null, T = null;
-const { logError: ie } = O(), vt = {
+let Y = null, L = null;
+const { logError: ie } = D(), vt = {
   createElement(e, t, n, a) {
-    var s, c;
+    var i, u;
     if (a || (a = {}), a.args || (a.args = []), e === "template" || ct(e))
       return null;
-    let o = e.replace("Tres", ""), i;
+    let o = e.replace("Tres", ""), s;
     if (e === "primitive") {
       (a == null ? void 0 : a.object) === void 0 && ie("Tres primitives need a prop 'object'");
       const l = a.object;
-      o = l.type, i = Object.assign(l, { type: o, attach: a.attach, primitive: !0 });
+      o = l.type, s = Object.assign(l, { type: o, attach: a.attach, primitive: !0 });
     } else {
       const l = me.value[o];
-      l || ie(`${o} is not defined on the THREE namespace. Use extend to add it to the catalog.`), i = new l(...a.args);
+      l || ie(`${o} is not defined on the THREE namespace. Use extend to add it to the catalog.`), s = new l(...a.args);
     }
-    i.isCamera && (a != null && a.position || i.position.set(3, 3, 3), a != null && a.lookAt || i.lookAt(0, 0, 0)), (a == null ? void 0 : a.attach) === void 0 && (i.isMaterial ? i.attach = "material" : i.isBufferGeometry && (i.attach = "geometry"));
-    const { GEOMETRY_VIA_PROP: u, MATERIAL_VIA_PROP: r } = H;
-    return i.isObject3D && ((s = a == null ? void 0 : a.material) != null && s.isMaterial && (i.userData[r] = !0), (c = a == null ? void 0 : a.geometry) != null && c.isBufferGeometry && (i.userData[u] = !0)), i;
+    s.isCamera && (a != null && a.position || s.position.set(3, 3, 3), a != null && a.lookAt || s.lookAt(0, 0, 0)), (a == null ? void 0 : a.attach) === void 0 && (s.isMaterial ? s.attach = "material" : s.isBufferGeometry && (s.attach = "geometry"));
+    const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: r } = V;
+    return s.isObject3D && ((i = a == null ? void 0 : a.material) != null && i.isMaterial && (s.userData[r] = !0), (u = a == null ? void 0 : a.geometry) != null && u.isBufferGeometry && (s.userData[c] = !0)), s;
   },
   insert(e, t) {
-    var n, a, o, i, u, r, s;
-    if (t && t.isScene && (T = t), (((n = e == null ? void 0 : e.__vnode) == null ? void 0 : n.type) === "TresGroup" || ((a = e == null ? void 0 : e.__vnode) == null ? void 0 : a.type) === "TresObject3D") && t === null && !((i = (o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.ctx) != null && i.asyncResolved)) {
-      $ = e;
+    var n, a, o, s, c, r, i;
+    if (t && t.isScene && (L = t), (((n = e == null ? void 0 : e.__vnode) == null ? void 0 : n.type) === "TresGroup" || ((a = e == null ? void 0 : e.__vnode) == null ? void 0 : a.type) === "TresObject3D") && t === null && !((s = (o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.ctx) != null && s.asyncResolved)) {
+      Y = e;
       return;
     } else
-      (u = e == null ? void 0 : e.__vnode) != null && u.type.includes("Controls") && t === null && ($ = T);
-    t || (t = $), e != null && e.isObject3D && (t != null && t.isObject3D) ? (t.add(e), e.dispatchEvent({ type: "added" }), (s = (r = T == null ? void 0 : T.userData) == null ? void 0 : r[H.REGISTER_AT_POINTER_EVENT_HANDLER]) == null || s.call(r, e)) : e != null && e.isFog ? t.fog = e : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[t == null ? void 0 : t.attach], t && (t[e.attach] = e));
+      (c = e == null ? void 0 : e.__vnode) != null && c.type.includes("Controls") && t === null && (Y = L);
+    t || (t = Y), e != null && e.isObject3D && (t != null && t.isObject3D) ? (t.add(e), e.dispatchEvent({ type: "added" }), (i = (r = L == null ? void 0 : L.userData) == null ? void 0 : r[V.REGISTER_AT_POINTER_EVENT_HANDLER]) == null || i.call(r, e)) : e != null && e.isFog ? t.fog = e : 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, n;
     if (e) {
       if (e.isObject3D) {
-        const a = e, o = (i) => {
-          var s, c;
-          const { GEOMETRY_VIA_PROP: u, MATERIAL_VIA_PROP: r } = H;
-          i.userData[r] || (s = i.material) == null || s.dispose(), i.userData[u] || (c = i.geometry) == null || c.dispose();
+        const a = e, o = (s) => {
+          var i, u;
+          const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: r } = V;
+          s.userData[r] || (i = s.material) == null || i.dispose(), s.userData[c] || (u = s.geometry) == null || u.dispose();
         };
-        a.traverse((i) => {
-          o(i);
+        a.traverse((s) => {
+          o(s);
         }), o(a);
       }
       (t = e.removeFromParent) == null || t.call(e), (n = e.dispose) == null || n.call(e);
@@ -454,26 +454,26 @@ const { logError: ie } = O(), vt = {
   },
   patchProp(e, t, n, a) {
     if (e) {
-      let o = e, i = t, u = j(i), r = o == null ? void 0 : o[u];
+      let o = e, s = t, c = j(s), r = o == null ? void 0 : o[c];
       if (o.type === "BufferGeometry") {
-        if (i === "args")
+        if (s === "args")
           return;
         o.setAttribute(
-          j(i),
-          new Ue(...a)
+          j(s),
+          new $e(...a)
         );
         return;
       }
-      if (i.includes("-") && r === void 0) {
-        const c = i.split("-");
-        r = c.reduce((l, d) => l[j(d)], o), i = c.pop(), u = i.toLowerCase(), r != null && r.set || (o = c.reduce((l, d) => l[j(d)], o));
+      if (s.includes("-") && r === void 0) {
+        const u = s.split("-");
+        r = u.reduce((l, p) => l[j(p)], o), s = u.pop(), c = s.toLowerCase(), r != null && r.set || (o = u.reduce((l, p) => l[j(p)], o));
       }
-      let s = a;
-      if (s === "" && (s = !0), re(r)) {
-        Array.isArray(s) ? e[u](...s) : e[u](s);
+      let i = a;
+      if (i === "" && (i = !0), re(r)) {
+        Array.isArray(i) ? e[c](...i) : e[c](i);
         return;
       }
-      !(r != null && r.set) && !re(r) ? o[u] = s : r.constructor === s.constructor && (r != null && r.copy) ? r == null || r.copy(s) : Array.isArray(s) ? r.set(...s) : !r.isColor && r.setScalar ? r.setScalar(s) : r.set(s);
+      !(r != null && r.set) && !re(r) ? o[c] = i : r.constructor === i.constructor && (r != null && r.copy) ? r == null || r.copy(i) : Array.isArray(i) ? r.set(...i) : !r.isColor && r.setScalar ? r.setScalar(i) : r.set(i);
     }
   },
   parentNode(e) {
@@ -496,7 +496,7 @@ const { logError: ie } = O(), vt = {
   return t;
 };
 ve(q);
-const { logWarning: se } = O(), bt = de({
+const { logWarning: se } = D(), bt = de({
   name: "TresScene",
   props: [
     "shadows",
@@ -517,52 +517,52 @@ const { logWarning: se } = O(), bt = de({
   ],
   setup(e, { slots: t, expose: n }) {
     e.physicallyCorrectLights === !0 && se("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const a = V(), o = V(), i = new q.Scene(), u = mt(), { setState: r } = S();
-    i.userData[H.REGISTER_AT_POINTER_EVENT_HANDLER] = u.registerObject, r("scene", i), r("canvas", o), r("container", a), r("pointerEventHandler", u);
-    const { onLoop: s, resume: c } = he();
+    const a = A(() => e.disableRender !== !1 && e.disableRender !== void 0), o = G(), s = G(), c = new q.Scene(), r = mt(), { setState: i } = k();
+    c.userData[V.REGISTER_AT_POINTER_EVENT_HANDLER] = r.registerObject, i("scene", c), i("canvas", s), i("container", o), i("pointerEventHandler", r);
+    const { onLoop: u, resume: l } = he();
     ke(() => {
       h();
     }), le(() => {
-      r("renderer", null);
+      i("renderer", null);
     });
-    const { activeCamera: l, pushCamera: d, clearCameras: p } = at();
+    const { activeCamera: p, pushCamera: d, clearCameras: E } = at();
     function y() {
-      const w = i.getObjectByProperty("isCamera", !0);
-      if (w)
-        d(w);
+      const g = c.getObjectByProperty("isCamera", !0);
+      if (g)
+        d(g);
       else {
         se("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");
-        const E = new q.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1e3);
-        E.position.set(3, 3, 3), E.lookAt(0, 0, 0), d(E);
+        const M = new q.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1e3);
+        M.position.set(3, 3, 3), M.lookAt(0, 0, 0), d(M);
       }
     }
     function h() {
-      const { renderer: w } = lt(e);
-      e.camera && d(e.camera), s(() => {
-        var E;
-        l.value && e.disableRender !== !0 && ((E = w.value) == null || E.render(i, l.value));
+      const { renderer: g } = lt(e);
+      e.camera && d(e.camera), u(() => {
+        var M;
+        p.value && !a.value && ((M = g.value) == null || M.render(c, p.value));
       });
     }
-    let v;
-    function M() {
-      v = wt(t);
-      const w = S();
-      v.provide("useTres", w), v.provide(K, w), v.provide("extend", ve), v.mount(i), y();
+    let w;
+    function C() {
+      w = wt(t);
+      const g = k();
+      w.provide("useTres", g), w.provide(K, g), w.provide("extend", ve), w.mount(c), y();
     }
-    return M(), n({
-      scene: i
-    }), D(
+    return C(), n({
+      scene: c
+    }), I(
       () => e.camera,
-      (w) => {
-        w && (p(), d(w));
+      (g) => {
+        g && (E(), d(g));
       }
-    ), () => L(
-      L(
+    ), () => _(
+      _(
         "div",
         {
-          ref: a,
-          "data-scene": i.uuid,
-          key: i.uuid,
+          ref: o,
+          "data-scene": c.uuid,
+          key: c.uuid,
           style: {
             position: "relative",
             width: "100%",
@@ -572,7 +572,7 @@ const { logWarning: se } = O(), bt = de({
           }
         },
         [
-          L(
+          _(
             "div",
             {
               style: {
@@ -581,9 +581,9 @@ const { logWarning: se } = O(), bt = de({
               }
             },
             [
-              L("canvas", {
-                ref: o,
-                "data-scene": i.uuid,
+              _("canvas", {
+                ref: s,
+                "data-scene": c.uuid,
                 style: {
                   display: "block",
                   width: "100%",
@@ -620,9 +620,19 @@ const { logWarning: se } = O(), bt = de({
   ],
   setup(e, { slots: t, expose: n }) {
     const a = Ze();
-    return n(a), () => L(bt, e, t);
+    return n(a), () => _(bt, e, t);
+  }
+}), yt = [
+  "TresCanvas",
+  "TresLeches",
+  "TresScene"
+], Et = {
+  template: {
+    compilerOptions: {
+      isCustomElement: (e) => e.startsWith("Tres") && !yt.includes(e) || e === "primitive"
+    }
   }
-}), Lt = {
+}, St = Et, At = {
   install(e) {
     e.component("TresCanvas", ht);
   }
@@ -632,21 +642,22 @@ export {
   K as TRES_CONTEXT_KEY,
   ht as TresCanvas,
   me as catalogue,
-  Lt as default,
+  At as default,
   ve as extend,
-  xt as isProd,
+  Tt as isProd,
   it as normalizeColor,
-  Pt as normalizeVectorFlexibleParam,
+  Rt as normalizeVectorFlexibleParam,
+  St as templateCompilerOptions,
   dt as trasverseObjects,
   at as useCamera,
-  Ct as useLoader,
-  O as useLogger,
+  xt as useLoader,
+  D as useLogger,
   mt as usePointerEventHandler,
   pt as useRaycaster,
   he as useRenderLoop,
   lt as useRenderer,
-  Tt as useSeek,
-  Rt as useTexture,
-  S as useTres,
+  _t as useSeek,
+  Lt as useTexture,
+  k as useTres,
   Ze as useTresProvider
 };

package/dist/tres.umd.cjs

@@ -1,9 +1,9 @@
 /**
  * name: @tresjs/core
- * version: v2.3.0
+ * version: v2.4.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(m,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],f):(m=typeof globalThis<"u"?globalThis:m||self,f(m.tres={},m.Vue,m.Three,m.VueUseCore))})(this,function(m,f,g,l){"use strict";function he(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const N=he(g),z=f.ref({}),F=e=>void Object.assign(z.value,e),X=e=>typeof e=="function",H=e=>!!e&&e.constructor===Array,P=["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 we(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,n=Math.random()*4294967295|0,a=Math.random()*4294967295|0;return(P[e&255]+P[e>>8&255]+P[e>>16&255]+P[e>>24&255]+"-"+P[t&255]+P[t>>8&255]+"-"+P[t>>16&15|64]+P[t>>24&255]+"-"+P[n&63|128]+P[n>>8&255]+"-"+P[n>>16&255]+P[n>>24&255]+P[a&255]+P[a>>8&255]+P[a>>16&255]+P[a>>24&255]).toLowerCase()}const V=Symbol();function J(){const e=f.shallowReactive({uuid:we(),camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,aspectRatio:void 0,pointerEventHandler:void 0});function t(o){return e[o]}function n(o,i){e[o]=i}const a={state:e,...f.toRefs(e),getState:t,setState:n};return f.provide(V,a),a}const A=()=>f.inject(V,{state:f.shallowReactive({camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,pointerEventHandler:void 0})});var Q=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(Q||{});const be=45;let x;function Z(){const{state:e,setState:t,aspectRatio:n}=A();function a(s="Perspective",c){var p,v,h;if(s==="Perspective"){const{near:M,far:C,fov:w}=c||{near:.1,far:1e3,fov:be};x=new g.PerspectiveCamera(w,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,M,C),(v=e.cameras)==null||v.push(x)}else{const{left:M,right:C,top:w,bottom:L,near:y,far:_}=c||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};x=new g.OrthographicCamera(M,C,w,L,y,_),(h=e.cameras)==null||h.push(x)}return e.camera=x,t("camera",e.camera),x}function o(){var s;e.camera instanceof g.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(s=e.camera)==null||s.updateProjectionMatrix()}function i(s){var c;(c=e.cameras)==null||c.push(s),s instanceof g.PerspectiveCamera&&e.aspectRatio&&(s.aspect=e.aspectRatio.value),s.updateProjectionMatrix(),t("camera",s)}function u(s){var c;((c=e.cameras)==null?void 0:c.length)===0&&i(s)}function r(){e.cameras=[]}return f.watchEffect(()=>{n!=null&&n.value&&o()}),{activeCamera:f.toRef(e,"camera"),createCamera:a,updateCamera:o,pushCamera:i,clearCameras:r,setFirstCamera:u}}const ee=l.createEventHook(),te=l.createEventHook(),W=l.createEventHook(),R=new g.Clock;let j=0,D=0;const{pause:ye,resume:Pe,isActive:Ce}=l.useRafFn(()=>{ee.trigger({delta:j,elapsed:D,clock:R}),te.trigger({delta:j,elapsed:D,clock:R}),W.trigger({delta:j,elapsed:D,clock:R})},{immediate:!1});W.on(()=>{j=R.getDelta(),D=R.getElapsedTime()});function U(){return{onBeforeLoop:ee.on,onLoop:te.on,onAfterLoop:W.on,pause:ye,resume:Pe,isActive:Ce}}function Me(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function ae(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}const Y={realistic:{outputColorSpace:g.SRGBColorSpace,toneMapping:g.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:g.PCFSoftShadowMap}}},ne=(e,t)=>{for(const n of Object.keys(t))t[n]instanceof Object&&Object.assign(t[n],ne(e[n],t[n]));return Object.assign(e||{},t),e},_e=Le("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot");function I(e){return e.replace(/-([a-z])/g,(t,n)=>n.toUpperCase())}function Le(e,t){const n=Object.create(null),a=e.split(",");for(let o=0;o<a.length;o++)n[a[o]]=!0;return t?o=>!!n[o.toLowerCase()]:o=>!!n[o]}const Se=(e,t)=>{const n=new Set,a=[];for(const o of e){const i=t(o);n.has(i)||(n.add(i),a.push(o))}return a},Oe=!0,re="[TresJS ▲ ■ ●] ";function E(){function e(a,o){console.error(`${re} ${a}`,o||"")}function t(a){console.warn(`${re} ${a}`)}function n(a,o){}return{logError:e,logWarning:t,logMessage:n}}function oe(e){const t=f.shallowRef(),n=f.ref(!1),{alpha:a=!0,antialias:o=!0,depth:i,logarithmicDepthBuffer:u,failIfMajorPerformanceCaveat:r,precision:s,premultipliedAlpha:c,stencil:p,shadows:v=!1,shadowMapType:h=g.PCFShadowMap,useLegacyLights:M=!1,outputColorSpace:C=g.LinearSRGBColorSpace,toneMapping:w=g.NoToneMapping,toneMappingExposure:L=1,context:y=void 0,powerPreference:_="default",preserveDrawingBuffer:G=!1,clearColor:O,windowSize:T=!1,preset:$=void 0}=f.toRefs(e),{state:d,setState:b}=A(),{width:de,height:me}=l.toValue(T)==!0||l.toValue(T)===""||l.toValue(T)==="true"?l.useWindowSize():l.useElementSize(d.container),{logError:De,logWarning:Ie}=E(),{pixelRatio:pe}=l.useDevicePixelRatio(),{pause:Be,resume:Ge}=U(),K=f.computed(()=>de.value/me.value);setTimeout(()=>{var S;!l.toValue(T)&&!((S=d.canvas)!=null&&S.value.offsetHeight)&&Ie(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
-  You could set windowSize=true to force the canvas to be the size of the window.`)},1e3);const ve=()=>{t.value&&(t.value.setSize(de.value,me.value),t.value.setPixelRatio(Math.min(pe.value,2)))},ge=()=>{if(!t.value)return;const S=l.toValue($);if(S){S in Y||De("Renderer Preset must be one of these: "+Object.keys(Y).join(", ")),ne(t.value,Y[S]);return}t.value.shadowMap.enabled=l.toValue(v),t.value.shadowMap.type=l.toValue(h),t.value.toneMapping=l.toValue(w)||g.NoToneMapping,t.value.toneMappingExposure=l.toValue(L),t.value.outputColorSpace=l.toValue(C)||g.LinearSRGBColorSpace,O!=null&&O.value&&t.value.setClearColor(ae(l.toValue(O))),t.value.useLegacyLights=l.toValue(M)},Ne=()=>{const S=l.unrefElement(d.canvas);S&&(t.value=new g.WebGLRenderer({canvas:S,alpha:l.toValue(a),antialias:l.toValue(o),context:l.toValue(y),depth:l.toValue(i),failIfMajorPerformanceCaveat:l.toValue(r),logarithmicDepthBuffer:l.toValue(u),powerPreference:l.toValue(_),precision:l.toValue(s),stencil:l.toValue(p),preserveDrawingBuffer:l.toValue(G),premultipliedAlpha:l.toValue(c)}),b("renderer",t.value),b("clock",new g.Clock),b("aspectRatio",K),ge(),ve(),Ge(),n.value=!0)},ze=()=>{t.value&&(t.value.dispose(),t.value=void 0,n.value=!1,Be())};return f.watch([K,pe],ve),f.watch([v,h,C,M,w,L,O],ge),f.watch(()=>[d.canvas,d.container],()=>{l.unrefElement(d.canvas)&&l.unrefElement(d.container)&&Ne()},{immediate:!0,deep:!0}),{renderer:t,isReady:n,dispose:ze,aspectRatio:K}}function ie(e){const t={nodes:{},materials:{}};return e&&e.traverse(n=>{n.name&&(t.nodes[n.name]=n),n.material&&!t.materials[n.material.name]&&(t.materials[n.material.name]=n.material)}),t}async function Te(e,t,n,a,o){const{logError:i}=E(),u=new e;o&&o(u),n&&n(u);const s=(Array.isArray(t)?t:[t]).map(c=>new Promise((p,v)=>{u.load(c,h=>{h.scene&&Object.assign(h,ie(h.scene)),p(h)},a,h=>v(i("[useLoader] - Failed to load resource",h)))}));return H(t)?await Promise.all(s):await s[0]}async function Ae(e){const t=new g.LoadingManager,n=new g.TextureLoader(t),a=o=>new Promise((i,u)=>{n.load(o,r=>i(r),()=>null,()=>{u(new Error("[useTextures] - Failed to load texture"))})});if(H(e)){const o=await Promise.all(e.map(i=>a(i)));return e.length>1?o:o[0]}else{const{map:o,displacementMap:i,normalMap:u,roughnessMap:r,metalnessMap:s,aoMap:c,alphaMap:p,matcap:v}=e;return{map:o?await a(o):null,displacementMap:i?await a(i):null,normalMap:u?await a(u):null,roughnessMap:r?await a(r):null,metalnessMap:s?await a(s):null,aoMap:c?await a(c):null,alphaMap:p?await a(p):null,matcap:v?await a(v):null}}}const se=e=>{const{state:t}=A(),n=f.computed(()=>{var d;return(d=t.canvas)==null?void 0:d.value}),{x:a,y:o}=l.usePointer({target:n}),{width:i,height:u,top:r,left:s}=l.useElementBounding(n),c=new g.Raycaster,p=({x:d,y:b})=>{if(n.value)return{x:(d-s.value)/i.value*2-1,y:-((b-r.value)/u.value)*2+1}},v=({x:d,y:b})=>{if(t.camera)return c.setFromCamera(new g.Vector2(d,b),t.camera),c.intersectObjects(e.value,!1)},h=d=>{const b=p({x:(d==null?void 0:d.clientX)??a.value,y:(d==null?void 0:d.clientY)??o.value});return b?v(b)||[]:[]},M=f.computed(()=>h()),C=l.createEventHook(),w=l.createEventHook(),L=(d,b)=>{d.trigger({event:b,intersects:h(b)})},y=d=>{L(w,d)};let _;const G=d=>{var b;_=(b=h(d)[0])==null?void 0:b.object},O=d=>{var b;d instanceof PointerEvent&&_===((b=h(d)[0])==null?void 0:b.object)&&L(C,d)},T=d=>w.trigger({event:d,intersects:[]}),$=f.watchEffect(()=>{n!=null&&n.value&&(n.value.addEventListener("pointerup",O),n.value.addEventListener("pointerdown",G),n.value.addEventListener("pointermove",y),n.value.addEventListener("pointerleave",T),$())});return f.onUnmounted(()=>{n!=null&&n.value&&(n.value.removeEventListener("pointerup",O),n.value.removeEventListener("pointerdown",G),n.value.removeEventListener("pointermove",y),n.value.removeEventListener("pointerleave",T))}),{intersects:M,onClick:d=>C.on(d).off,onPointerMove:d=>w.on(d).off}};function xe(){const{logWarning:e}=E();function t(a,o,i){let u=null;return a.traverse(r=>{r[o]===i&&(u=r)}),u||e(`Child with ${o} '${i}' not found.`),u}function n(a,o){return t(a,"name",o)}return{seek:t,seekByName:n}}const ce=()=>{const e=f.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),t=r=>{Object.values(e).forEach(s=>s.delete(r))},n=r=>{const{onClick:s,onPointerMove:c,onPointerEnter:p,onPointerLeave:v}=r;s&&e.click.set(r,s),c&&e.pointerMove.set(r,c),p&&e.pointerEnter.set(r,p),v&&e.pointerLeave.set(r,v),r.addEventListener("removed",()=>{r.traverse(h=>{t(h)}),t(r)})},a=f.computed(()=>Se(Object.values(e).map(r=>Array.from(r.keys())).flat(),({uuid:r})=>r)),{onClick:o,onPointerMove:i}=se(a);o(({intersects:r,event:s})=>{var c;r.length&&((c=e.click.get(r[0].object))==null||c(r[0],s))});let u;return i(({intersects:r,event:s})=>{var M,C,w,L;const c=(M=r==null?void 0:r[0])==null?void 0:M.object,{pointerLeave:p,pointerEnter:v,pointerMove:h}=e;u&&u!==c&&((C=p.get(u))==null||C(u,s)),c&&(u!==c&&((w=v.get(c))==null||w(r[0],s)),(L=h.get(c))==null||L(r[0],s)),u=c||null}),{registerObject:n,deregisterObject:t}},B={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp",REGISTER_AT_POINTER_EVENT_HANDLER:"tres__registerAtPointerEventHandler"};function We(e){}let q=null,k=null;const{logError:ue}=E(),Ee={createElement(e,t,n,a){var s,c;if(a||(a={}),a.args||(a.args=[]),e==="template"||_e(e))return null;let o=e.replace("Tres",""),i;if(e==="primitive"){(a==null?void 0:a.object)===void 0&&ue("Tres primitives need a prop 'object'");const p=a.object;o=p.type,i=Object.assign(p,{type:o,attach:a.attach,primitive:!0})}else{const p=z.value[o];p||ue(`${o} is not defined on the THREE namespace. Use extend to add it to the catalog.`),i=new p(...a.args)}i.isCamera&&(a!=null&&a.position||i.position.set(3,3,3),a!=null&&a.lookAt||i.lookAt(0,0,0)),(a==null?void 0:a.attach)===void 0&&(i.isMaterial?i.attach="material":i.isBufferGeometry&&(i.attach="geometry"));const{GEOMETRY_VIA_PROP:u,MATERIAL_VIA_PROP:r}=B;return i.isObject3D&&((s=a==null?void 0:a.material)!=null&&s.isMaterial&&(i.userData[r]=!0),(c=a==null?void 0:a.geometry)!=null&&c.isBufferGeometry&&(i.userData[u]=!0)),i},insert(e,t){var n,a,o,i,u,r,s;if(t&&t.isScene&&(k=t),(((n=e==null?void 0:e.__vnode)==null?void 0:n.type)==="TresGroup"||((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresObject3D")&&t===null&&!((i=(o=e==null?void 0:e.__vnode)==null?void 0:o.ctx)!=null&&i.asyncResolved)){q=e;return}else(u=e==null?void 0:e.__vnode)!=null&&u.type.includes("Controls")&&t===null&&(q=k);t||(t=q),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"}),(s=(r=k==null?void 0:k.userData)==null?void 0:r[B.REGISTER_AT_POINTER_EVENT_HANDLER])==null||s.call(r,e)):e!=null&&e.isFog?t.fog=e: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,n;if(e){if(e.isObject3D){const a=e,o=i=>{var s,c;const{GEOMETRY_VIA_PROP:u,MATERIAL_VIA_PROP:r}=B;i.userData[r]||(s=i.material)==null||s.dispose(),i.userData[u]||(c=i.geometry)==null||c.dispose()};a.traverse(i=>{o(i)}),o(a)}(t=e.removeFromParent)==null||t.call(e),(n=e.dispose)==null||n.call(e)}},patchProp(e,t,n,a){if(e){let o=e,i=t,u=I(i),r=o==null?void 0:o[u];if(o.type==="BufferGeometry"){if(i==="args")return;o.setAttribute(I(i),new g.BufferAttribute(...a));return}if(i.includes("-")&&r===void 0){const c=i.split("-");r=c.reduce((p,v)=>p[I(v)],o),i=c.pop(),u=i.toLowerCase(),r!=null&&r.set||(o=c.reduce((p,v)=>p[I(v)],o))}let s=a;if(s===""&&(s=!0),X(r)){Array.isArray(s)?e[u](...s):e[u](s);return}!(r!=null&&r.set)&&!X(r)?o[u]=s:r.constructor===s.constructor&&(r!=null&&r.copy)?r==null||r.copy(s):Array.isArray(s)?r.set(...s):!r.isColor&&r.setScalar?r.setScalar(s):r.set(s)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{createApp:Re}=f.createRenderer(Ee),ke=e=>{const t=Re(n);function n(){return e&&e.default?e.default():[]}return t};F(N);const{logWarning:fe}=E(),Ve=f.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:n}){e.physicallyCorrectLights===!0&&fe("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=f.ref(),o=f.ref(),i=new N.Scene,u=ce(),{setState:r}=A();i.userData[B.REGISTER_AT_POINTER_EVENT_HANDLER]=u.registerObject,r("scene",i),r("canvas",o),r("container",a),r("pointerEventHandler",u);const{onLoop:s,resume:c}=U();f.onMounted(()=>{C()}),f.onUnmounted(()=>{r("renderer",null)});const{activeCamera:p,pushCamera:v,clearCameras:h}=Z();function M(){const y=i.getObjectByProperty("isCamera",!0);if(y)v(y);else{fe("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");const _=new N.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);_.position.set(3,3,3),_.lookAt(0,0,0),v(_)}}function C(){const{renderer:y}=oe(e);e.camera&&v(e.camera),s(()=>{var _;p.value&&e.disableRender!==!0&&((_=y.value)==null||_.render(i,p.value))})}let w;function L(){w=ke(t);const y=A();w.provide("useTres",y),w.provide(V,y),w.provide("extend",F),w.mount(i),M()}return L(),n({scene:i}),f.watch(()=>e.camera,y=>{y&&(h(),v(y))}),()=>f.h(f.h("div",{ref:a,"data-scene":i.uuid,key:i.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[f.h("div",{style:{width:"100%",height:"100%"}},[f.h("canvas",{ref:o,"data-scene":i.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),le=f.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:n}){const a=J();return n(a),()=>f.h(Ve,e,t)}}),je={install(e){e.component("TresCanvas",le)}};m.CameraType=Q,m.TRES_CONTEXT_KEY=V,m.TresCanvas=le,m.catalogue=z,m.default=je,m.extend=F,m.isProd=Oe,m.normalizeColor=ae,m.normalizeVectorFlexibleParam=Me,m.trasverseObjects=ie,m.useCamera=Z,m.useLoader=Te,m.useLogger=E,m.usePointerEventHandler=ce,m.useRaycaster=se,m.useRenderLoop=U,m.useRenderer=oe,m.useSeek=xe,m.useTexture=Ae,m.useTres=A,m.useTresProvider=J,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(m,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],l):(m=typeof globalThis<"u"?globalThis:m||self,l(m.tres={},m.Vue,m.Three,m.VueUseCore))})(this,function(m,l,g,f){"use strict";function he(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const N=he(g),z=l.ref({}),F=e=>void Object.assign(z.value,e),X=e=>typeof e=="function",H=e=>!!e&&e.constructor===Array,y=["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 we(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,a=Math.random()*4294967295|0,n=Math.random()*4294967295|0;return(y[e&255]+y[e>>8&255]+y[e>>16&255]+y[e>>24&255]+"-"+y[t&255]+y[t>>8&255]+"-"+y[t>>16&15|64]+y[t>>24&255]+"-"+y[a&63|128]+y[a>>8&255]+"-"+y[a>>16&255]+y[a>>24&255]+y[n&255]+y[n>>8&255]+y[n>>16&255]+y[n>>24&255]).toLowerCase()}const j=Symbol();function J(){const e=l.shallowReactive({uuid:we(),camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,aspectRatio:void 0,pointerEventHandler:void 0});function t(o){return e[o]}function a(o,s){e[o]=s}const n={state:e,...l.toRefs(e),getState:t,setState:a};return l.provide(j,n),n}const E=()=>l.inject(j,{state:l.shallowReactive({camera:void 0,cameras:[],canvas:void 0,scene:void 0,renderer:void 0,pointerEventHandler:void 0})});var Q=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(Q||{});const be=45;let R;function Z(){const{state:e,setState:t,aspectRatio:a}=E();function n(i="Perspective",u){var p,h,v;if(i==="Perspective"){const{near:L,far:M,fov:P}=u||{near:.1,far:1e3,fov:be};R=new g.PerspectiveCamera(P,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,L,M),(h=e.cameras)==null||h.push(R)}else{const{left:L,right:M,top:P,bottom:C,near:O,far:b}=u||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};R=new g.OrthographicCamera(L,M,P,C,O,b),(v=e.cameras)==null||v.push(R)}return e.camera=R,t("camera",e.camera),R}function o(){var i;e.camera instanceof g.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(i=e.camera)==null||i.updateProjectionMatrix()}function s(i){var u;(u=e.cameras)==null||u.push(i),i instanceof g.PerspectiveCamera&&e.aspectRatio&&(i.aspect=e.aspectRatio.value),i.updateProjectionMatrix(),t("camera",i)}function c(i){var u;((u=e.cameras)==null?void 0:u.length)===0&&s(i)}function r(){e.cameras=[]}return l.watchEffect(()=>{a!=null&&a.value&&o()}),{activeCamera:l.toRef(e,"camera"),createCamera:n,updateCamera:o,pushCamera:s,clearCameras:r,setFirstCamera:c}}const ee=f.createEventHook(),te=f.createEventHook(),W=f.createEventHook(),k=new g.Clock;let D=0,I=0;const{pause:ye,resume:Ce,isActive:Pe}=f.useRafFn(()=>{ee.trigger({delta:D,elapsed:I,clock:k}),te.trigger({delta:D,elapsed:I,clock:k}),W.trigger({delta:D,elapsed:I,clock:k})},{immediate:!1});W.on(()=>{D=k.getDelta(),I=k.getElapsedTime()});function U(){return{onBeforeLoop:ee.on,onLoop:te.on,onAfterLoop:W.on,pause:ye,resume:Ce,isActive:Pe}}function Me(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function ae(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}const Y={realistic:{outputColorSpace:g.SRGBColorSpace,toneMapping:g.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:g.PCFSoftShadowMap}}},ne=(e,t)=>{for(const a of Object.keys(t))t[a]instanceof Object&&Object.assign(t[a],ne(e[a],t[a]));return Object.assign(e||{},t),e},Le=_e("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 B(e){return e.replace(/-([a-z])/g,(t,a)=>a.toUpperCase())}function _e(e,t){const a=Object.create(null),n=e.split(",");for(let o=0;o<n.length;o++)a[n[o]]=!0;return t?o=>!!a[o.toLowerCase()]:o=>!!a[o]}const Se=(e,t)=>{const a=new Set,n=[];for(const o of e){const s=t(o);a.has(s)||(a.add(s),n.push(o))}return n},Oe=!0,re="[TresJS ▲ ■ ●] ";function x(){function e(n,o){console.error(`${re} ${n}`,o||"")}function t(n){console.warn(`${re} ${n}`)}function a(n,o){}return{logError:e,logWarning:t,logMessage:a}}function oe(e){const t=l.shallowRef(),a=l.ref(!1),{alpha:n=!0,antialias:o=!0,depth:s,logarithmicDepthBuffer:c,failIfMajorPerformanceCaveat:r,precision:i,premultipliedAlpha:u,stencil:p,shadows:h=!1,shadowMapType:v=g.PCFShadowMap,useLegacyLights:L=!1,outputColorSpace:M=g.LinearSRGBColorSpace,toneMapping:P=g.NoToneMapping,toneMappingExposure:C=1,context:O=void 0,powerPreference:b="default",preserveDrawingBuffer:_=!1,clearColor:T,windowSize:A=!1,preset:q=void 0}=l.toRefs(e),{state:d,setState:w}=E(),{width:de,height:me}=f.toValue(A)==!0||f.toValue(A)===""||f.toValue(A)==="true"?f.useWindowSize():f.useElementSize(d.container),{logError:Be,logWarning:Ge}=x(),{pixelRatio:pe}=f.useDevicePixelRatio(),{pause:Ne,resume:ze}=U(),K=l.computed(()=>de.value/me.value);setTimeout(()=>{var S;!f.toValue(A)&&!((S=d.canvas)!=null&&S.value.offsetHeight)&&Ge(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
+  You could set windowSize=true to force the canvas to be the size of the window.`)},1e3);const ve=()=>{t.value&&(t.value.setSize(de.value,me.value),t.value.setPixelRatio(Math.min(pe.value,2)))},ge=()=>{if(!t.value)return;const S=f.toValue(q);if(S){S in Y||Be("Renderer Preset must be one of these: "+Object.keys(Y).join(", ")),ne(t.value,Y[S]);return}t.value.shadowMap.enabled=f.toValue(h),t.value.shadowMap.type=f.toValue(v),t.value.toneMapping=f.toValue(P)||g.NoToneMapping,t.value.toneMappingExposure=f.toValue(C),t.value.outputColorSpace=f.toValue(M)||g.LinearSRGBColorSpace,T!=null&&T.value&&t.value.setClearColor(ae(f.toValue(T))),t.value.useLegacyLights=f.toValue(L)},Fe=()=>{const S=f.unrefElement(d.canvas);S&&(t.value=new g.WebGLRenderer({canvas:S,alpha:f.toValue(n),antialias:f.toValue(o),context:f.toValue(O),depth:f.toValue(s),failIfMajorPerformanceCaveat:f.toValue(r),logarithmicDepthBuffer:f.toValue(c),powerPreference:f.toValue(b),precision:f.toValue(i),stencil:f.toValue(p),preserveDrawingBuffer:f.toValue(_),premultipliedAlpha:f.toValue(u)}),w("renderer",t.value),w("clock",new g.Clock),w("aspectRatio",K),ge(),ve(),ze(),a.value=!0)},We=()=>{t.value&&(t.value.dispose(),t.value=void 0,a.value=!1,Ne())};return l.watch([K,pe],ve),l.watch([h,v,M,L,P,C,T],ge),l.watch(()=>[d.canvas,d.container],()=>{f.unrefElement(d.canvas)&&f.unrefElement(d.container)&&Fe()},{immediate:!0,deep:!0}),{renderer:t,isReady:a,dispose:We,aspectRatio:K}}function ie(e){const t={nodes:{},materials:{}};return e&&e.traverse(a=>{a.name&&(t.nodes[a.name]=a),a.material&&!t.materials[a.material.name]&&(t.materials[a.material.name]=a.material)}),t}async function Te(e,t,a,n,o){const{logError:s}=x(),c=new e;o&&o(c),a&&a(c);const i=(Array.isArray(t)?t:[t]).map(u=>new Promise((p,h)=>{c.load(u,v=>{v.scene&&Object.assign(v,ie(v.scene)),p(v)},n,v=>h(s("[useLoader] - Failed to load resource",v)))}));return H(t)?await Promise.all(i):await i[0]}async function Ae(e){const t=new g.LoadingManager,a=new g.TextureLoader(t),n=o=>new Promise((s,c)=>{a.load(o,r=>s(r),()=>null,()=>{c(new Error("[useTextures] - Failed to load texture"))})});if(H(e)){const o=await Promise.all(e.map(s=>n(s)));return e.length>1?o:o[0]}else{const{map:o,displacementMap:s,normalMap:c,roughnessMap:r,metalnessMap:i,aoMap:u,alphaMap:p,matcap:h}=e;return{map:o?await n(o):null,displacementMap:s?await n(s):null,normalMap:c?await n(c):null,roughnessMap:r?await n(r):null,metalnessMap:i?await n(i):null,aoMap:u?await n(u):null,alphaMap:p?await n(p):null,matcap:h?await n(h):null}}}const se=e=>{const{state:t}=E(),a=l.computed(()=>{var d;return(d=t.canvas)==null?void 0:d.value}),{x:n,y:o}=f.usePointer({target:a}),{width:s,height:c,top:r,left:i}=f.useElementBounding(a),u=new g.Raycaster,p=({x:d,y:w})=>{if(a.value)return{x:(d-i.value)/s.value*2-1,y:-((w-r.value)/c.value)*2+1}},h=({x:d,y:w})=>{if(t.camera)return u.setFromCamera(new g.Vector2(d,w),t.camera),u.intersectObjects(e.value,!1)},v=d=>{const w=p({x:(d==null?void 0:d.clientX)??n.value,y:(d==null?void 0:d.clientY)??o.value});return w?h(w)||[]:[]},L=l.computed(()=>v()),M=f.createEventHook(),P=f.createEventHook(),C=(d,w)=>{d.trigger({event:w,intersects:v(w)})},O=d=>{C(P,d)};let b;const _=d=>{var w;b=(w=v(d)[0])==null?void 0:w.object},T=d=>{var w;d instanceof PointerEvent&&b===((w=v(d)[0])==null?void 0:w.object)&&C(M,d)},A=d=>P.trigger({event:d,intersects:[]}),q=l.watchEffect(()=>{a!=null&&a.value&&(a.value.addEventListener("pointerup",T),a.value.addEventListener("pointerdown",_),a.value.addEventListener("pointermove",O),a.value.addEventListener("pointerleave",A),q())});return l.onUnmounted(()=>{a!=null&&a.value&&(a.value.removeEventListener("pointerup",T),a.value.removeEventListener("pointerdown",_),a.value.removeEventListener("pointermove",O),a.value.removeEventListener("pointerleave",A))}),{intersects:L,onClick:d=>M.on(d).off,onPointerMove:d=>P.on(d).off}};function Ee(){const{logWarning:e}=x();function t(n,o,s){let c=null;return n.traverse(r=>{r[o]===s&&(c=r)}),c||e(`Child with ${o} '${s}' not found.`),c}function a(n,o){return t(n,"name",o)}return{seek:t,seekByName:a}}const ce=()=>{const e=l.reactive({click:new Map,pointerMove:new Map,pointerEnter:new Map,pointerLeave:new Map}),t=r=>{Object.values(e).forEach(i=>i.delete(r))},a=r=>{const{onClick:i,onPointerMove:u,onPointerEnter:p,onPointerLeave:h}=r;i&&e.click.set(r,i),u&&e.pointerMove.set(r,u),p&&e.pointerEnter.set(r,p),h&&e.pointerLeave.set(r,h),r.addEventListener("removed",()=>{r.traverse(v=>{t(v)}),t(r)})},n=l.computed(()=>Se(Object.values(e).map(r=>Array.from(r.keys())).flat(),({uuid:r})=>r)),{onClick:o,onPointerMove:s}=se(n);o(({intersects:r,event:i})=>{var u;r.length&&((u=e.click.get(r[0].object))==null||u(r[0],i))});let c;return s(({intersects:r,event:i})=>{var L,M,P,C;const u=(L=r==null?void 0:r[0])==null?void 0:L.object,{pointerLeave:p,pointerEnter:h,pointerMove:v}=e;c&&c!==u&&((M=p.get(c))==null||M(c,i)),u&&(c!==u&&((P=h.get(u))==null||P(r[0],i)),(C=v.get(u))==null||C(r[0],i)),c=u||null}),{registerObject:a,deregisterObject:t}},G={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp",REGISTER_AT_POINTER_EVENT_HANDLER:"tres__registerAtPointerEventHandler"};function Ye(e){}let $=null,V=null;const{logError:ue}=x(),Re={createElement(e,t,a,n){var i,u;if(n||(n={}),n.args||(n.args=[]),e==="template"||Le(e))return null;let o=e.replace("Tres",""),s;if(e==="primitive"){(n==null?void 0:n.object)===void 0&&ue("Tres primitives need a prop 'object'");const p=n.object;o=p.type,s=Object.assign(p,{type:o,attach:n.attach,primitive:!0})}else{const p=z.value[o];p||ue(`${o} is not defined on the THREE namespace. Use extend to add it to the catalog.`),s=new p(...n.args)}s.isCamera&&(n!=null&&n.position||s.position.set(3,3,3),n!=null&&n.lookAt||s.lookAt(0,0,0)),(n==null?void 0:n.attach)===void 0&&(s.isMaterial?s.attach="material":s.isBufferGeometry&&(s.attach="geometry"));const{GEOMETRY_VIA_PROP:c,MATERIAL_VIA_PROP:r}=G;return s.isObject3D&&((i=n==null?void 0:n.material)!=null&&i.isMaterial&&(s.userData[r]=!0),(u=n==null?void 0:n.geometry)!=null&&u.isBufferGeometry&&(s.userData[c]=!0)),s},insert(e,t){var a,n,o,s,c,r,i;if(t&&t.isScene&&(V=t),(((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresGroup"||((n=e==null?void 0:e.__vnode)==null?void 0:n.type)==="TresObject3D")&&t===null&&!((s=(o=e==null?void 0:e.__vnode)==null?void 0:o.ctx)!=null&&s.asyncResolved)){$=e;return}else(c=e==null?void 0:e.__vnode)!=null&&c.type.includes("Controls")&&t===null&&($=V);t||(t=$),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"}),(i=(r=V==null?void 0:V.userData)==null?void 0:r[G.REGISTER_AT_POINTER_EVENT_HANDLER])==null||i.call(r,e)):e!=null&&e.isFog?t.fog=e: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,a;if(e){if(e.isObject3D){const n=e,o=s=>{var i,u;const{GEOMETRY_VIA_PROP:c,MATERIAL_VIA_PROP:r}=G;s.userData[r]||(i=s.material)==null||i.dispose(),s.userData[c]||(u=s.geometry)==null||u.dispose()};n.traverse(s=>{o(s)}),o(n)}(t=e.removeFromParent)==null||t.call(e),(a=e.dispose)==null||a.call(e)}},patchProp(e,t,a,n){if(e){let o=e,s=t,c=B(s),r=o==null?void 0:o[c];if(o.type==="BufferGeometry"){if(s==="args")return;o.setAttribute(B(s),new g.BufferAttribute(...n));return}if(s.includes("-")&&r===void 0){const u=s.split("-");r=u.reduce((p,h)=>p[B(h)],o),s=u.pop(),c=s.toLowerCase(),r!=null&&r.set||(o=u.reduce((p,h)=>p[B(h)],o))}let i=n;if(i===""&&(i=!0),X(r)){Array.isArray(i)?e[c](...i):e[c](i);return}!(r!=null&&r.set)&&!X(r)?o[c]=i:r.constructor===i.constructor&&(r!=null&&r.copy)?r==null||r.copy(i):Array.isArray(i)?r.set(...i):!r.isColor&&r.setScalar?r.setScalar(i):r.set(i)}},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:xe}=l.createRenderer(Re),ke=e=>{const t=xe(a);function a(){return e&&e.default?e.default():[]}return t};F(N);const{logWarning:le}=x(),Ve=l.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:a}){e.physicallyCorrectLights===!0&&le("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const n=l.computed(()=>e.disableRender!==!1&&e.disableRender!==void 0),o=l.ref(),s=l.ref(),c=new N.Scene,r=ce(),{setState:i}=E();c.userData[G.REGISTER_AT_POINTER_EVENT_HANDLER]=r.registerObject,i("scene",c),i("canvas",s),i("container",o),i("pointerEventHandler",r);const{onLoop:u,resume:p}=U();l.onMounted(()=>{P()}),l.onUnmounted(()=>{i("renderer",null)});const{activeCamera:h,pushCamera:v,clearCameras:L}=Z();function M(){const b=c.getObjectByProperty("isCamera",!0);if(b)v(b);else{le("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");const _=new N.PerspectiveCamera(45,window.innerWidth/window.innerHeight,.1,1e3);_.position.set(3,3,3),_.lookAt(0,0,0),v(_)}}function P(){const{renderer:b}=oe(e);e.camera&&v(e.camera),u(()=>{var _;h.value&&!n.value&&((_=b.value)==null||_.render(c,h.value))})}let C;function O(){C=ke(t);const b=E();C.provide("useTres",b),C.provide(j,b),C.provide("extend",F),C.mount(c),M()}return O(),a({scene:c}),l.watch(()=>e.camera,b=>{b&&(L(),v(b))}),()=>l.h(l.h("div",{ref:o,"data-scene":c.uuid,key:c.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[l.h("div",{style:{width:"100%",height:"100%"}},[l.h("canvas",{ref:s,"data-scene":c.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),fe=l.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputColorSpace","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:a}){const n=J();return a(n),()=>l.h(Ve,e,t)}}),je=["TresCanvas","TresLeches","TresScene"],De={template:{compilerOptions:{isCustomElement:e=>e.startsWith("Tres")&&!je.includes(e)||e==="primitive"}}},Ie={install(e){e.component("TresCanvas",fe)}};m.CameraType=Q,m.TRES_CONTEXT_KEY=j,m.TresCanvas=fe,m.catalogue=z,m.default=Ie,m.extend=F,m.isProd=Oe,m.normalizeColor=ae,m.normalizeVectorFlexibleParam=Me,m.templateCompilerOptions=De,m.trasverseObjects=ie,m.useCamera=Z,m.useLoader=Te,m.useLogger=x,m.usePointerEventHandler=ce,m.useRaycaster=se,m.useRenderLoop=U,m.useRenderer=oe,m.useSeek=Ee,m.useTexture=Ae,m.useTres=E,m.useTresProvider=J,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/utils/template-compiler-options.d.ts

@@ -0,0 +1,8 @@
+declare const templateCompilerOptions: {
+    template: {
+        compilerOptions: {
+            isCustomElement: (tag: string) => boolean;
+        };
+    };
+};
+export default templateCompilerOptions;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "packageManager": "pnpm@8.3.1",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -54,7 +54,8 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs"
+    "docs:serve": "vitepress serve docs",
+    "docs:contributors": "esno scripts/update-contributors.ts"
   },
   "peerDependencies": {
     "three": ">=0.133",
@@ -62,9 +63,7 @@
   },
   "dependencies": {
     "@alvarosabu/utils": "^3.1.1",
-    "@vueuse/core": "^10.1.2",
-    "vue-zustand": "^0.5.0",
-    "zustand": "^4.3.8"
+    "@vueuse/core": "^10.2.0"
   },
   "devDependencies": {
     "@alvarosabu/prettier-config": "^1.3.0",
@@ -73,18 +72,20 @@
     "@stackblitz/sdk": "^1.9.0",
     "@tresjs/cientos": "2.1.4",
     "@types/three": "^0.152.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.11",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vitest/coverage-c8": "^0.32.0",
-    "@vitest/ui": "^0.32.0",
-    "@vue/test-utils": "^2.3.2",
-    "eslint": "^8.42.0",
+    "@vitest/coverage-c8": "^0.32.2",
+    "@vitest/ui": "^0.32.2",
+    "@vue/test-utils": "^2.4.0",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.14.1",
+    "eslint-plugin-vue": "^9.15.1",
+    "esno": "^0.16.3",
     "gsap": "^3.12.1",
     "jsdom": "^22.1.0",
     "kolorist": "^1.8.0",
+    "ohmyfetch": "^0.4.21",
     "pathe": "^1.1.1",
     "prettier": "^2.8.8",
     "release-it": "^15.11.0",
@@ -92,17 +93,17 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-visualizer": "^5.9.2",
     "three": "^0.153.0",
-    "unocss": "^0.53.1",
+    "unocss": "^0.53.3",
     "unplugin": "^1.3.1",
     "unplugin-vue-components": "^0.25.1",
     "vite": "^4.3.9",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.3.0",
-    "vite-plugin-inspect": "^0.7.28",
+    "vite-plugin-inspect": "^0.7.29",
     "vite-plugin-require-transform": "^1.0.17",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-beta.2",
-    "vitest": "^0.32.0",
+    "vitepress": "1.0.0-beta.3",
+    "vitest": "^0.32.2",
     "vue": "^3.3.4",
     "vue-demi": "^0.14.5"
   }