@tresjs/core 2.1.3 → 2.2.0

package/dist/tres.js

@@ -1,67 +1,71 @@
 /**
  * name: @tresjs/core
- * version: v2.1.3
+ * version: v2.2.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { ref as E, shallowReactive as le, computed as de, toRefs as me, provide as Ae, inject as _e, watchEffect as pe, toRef as Oe, shallowRef as ve, watch as H, onUnmounted as ge, createRenderer as ke, defineComponent as we, onMounted as je, h as D } from "vue";
-import * as be from "three";
-import { PerspectiveCamera as N, OrthographicCamera as De, Clock as he, Color as U, SRGBColorSpace as Ie, ACESFilmicToneMapping as Be, PCFSoftShadowMap as Fe, PCFShadowMap as ze, LinearSRGBColorSpace as ae, NoToneMapping as ne, WebGLRenderer as Ge, LoadingManager as Ve, TextureLoader as He, Raycaster as We, Vector2 as Ye, BufferAttribute as $e } from "three";
-import { createEventHook as X, useRafFn as Ne, toValue as f, useWindowSize as Ue, useElementSize as Ke, useDevicePixelRatio as qe, unrefElement as K, useEventListener as Je } from "@vueuse/core";
-const re = (e) => typeof e == "function", Xe = (e) => typeof e == "string", ye = (e) => !!e && e.constructor === Array, Ce = E({}), Me = (e) => void Object.assign(Ce.value, e), 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 Qe() {
-  const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, o = 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[o & 63 | 128] + p[o >> 8 & 255] + "-" + p[o >> 16 & 255] + p[o >> 24 & 255] + p[a & 255] + p[a >> 8 & 255] + p[a >> 16 & 255] + p[a >> 24 & 255]).toLowerCase();
+import { ref as G, shallowReactive as ce, toRefs as ue, provide as Te, inject as Le, watchEffect as fe, toRef as _e, shallowRef as Ae, computed as V, watch as D, onUnmounted as le, reactive as Se, createRenderer as Oe, defineComponent as de, onMounted as ke, h as L } from "vue";
+import * as q from "three";
+import { PerspectiveCamera as z, OrthographicCamera as je, Clock as pe, Color as W, SRGBColorSpace as De, ACESFilmicToneMapping as Ie, PCFSoftShadowMap as Be, PCFShadowMap as He, LinearSRGBColorSpace as ae, NoToneMapping as ne, WebGLRenderer as Ge, LoadingManager as Ve, TextureLoader as Ne, Raycaster as Fe, Vector2 as ze, BufferAttribute as We } from "three";
+import { createEventHook as A, useRafFn as Ue, toValue as m, useWindowSize as Ye, useElementSize as $e, useDevicePixelRatio as qe, unrefElement as U, usePointer as Ke, useElementBounding as Je } 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 Xe() {
+  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();
 }
-const Q = Symbol();
-function Ze() {
-  const e = le({
-    uuid: Qe(),
+const K = Symbol();
+function Qe() {
+  const e = ce({
+    uuid: Xe(),
     camera: void 0,
     cameras: [],
+    canvas: void 0,
     scene: void 0,
     renderer: void 0,
-    aspectRatio: de(() => window.innerWidth / window.innerHeight)
+    aspectRatio: void 0,
+    pointerEventHandler: void 0
   });
-  function t(n) {
-    return e[n];
+  function t(o) {
+    return e[o];
   }
-  function o(n, r) {
-    e[n] = r;
+  function n(o, i) {
+    e[o] = i;
   }
   const a = {
     state: e,
-    ...me(e),
+    ...ue(e),
     getState: t,
-    setState: o
+    setState: n
   };
-  return Ae(Q, a), a;
+  return Te(K, a), a;
 }
-const B = () => _e(Q, {
-  state: le({
+const S = () => Le(K, {
+  state: ce({
     camera: void 0,
     cameras: [],
+    canvas: void 0,
     scene: void 0,
-    renderer: void 0
+    renderer: void 0,
+    pointerEventHandler: void 0
   })
 });
-var et = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(et || {});
-const tt = 45;
-let _;
-function xe() {
-  const { state: e, setState: t, aspectRatio: o } = B();
-  function a(s = "Perspective", u) {
-    var l, d, v;
+var Ze = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Ze || {});
+const et = 45;
+let x;
+function tt() {
+  const { state: e, setState: t, aspectRatio: n } = S();
+  function a(s = "Perspective", c) {
+    var l, d, p;
     if (s === "Perspective") {
-      const { near: C, far: M, fov: b } = u || {
+      const { near: y, far: h, fov: v } = c || {
         near: 0.1,
         far: 1e3,
-        fov: tt
+        fov: et
       };
-      _ = new N(b, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, C, M), (d = e.cameras) == null || d.push(_);
+      x = new z(v, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, y, h), (d = e.cameras) == null || d.push(x);
     } else {
-      const { left: C, right: M, top: b, bottom: P, near: w, far: x } = u || {
+      const { left: y, right: h, top: v, bottom: M, near: w, far: E } = c || {
         left: -100,
         right: 100,
         top: 100,
@@ -69,343 +73,404 @@ function xe() {
         near: 0.1,
         far: 1e3
       };
-      _ = new De(C, M, b, P, w, x), (v = e.cameras) == null || v.push(_);
+      x = new je(y, h, v, M, w, E), (p = e.cameras) == null || p.push(x);
     }
-    return e.camera = _, t("camera", e.camera), _;
+    return e.camera = x, t("camera", e.camera), x;
   }
-  function n() {
+  function o() {
     var s;
-    e.camera instanceof N && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (s = e.camera) == null || s.updateProjectionMatrix();
+    e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (s = e.camera) == null || s.updateProjectionMatrix();
   }
-  function r(s) {
-    var u;
-    (u = e.cameras) == null || u.push(s), s instanceof N && e.aspectRatio && (s.aspect = e.aspectRatio.value), s.updateProjectionMatrix(), t("camera", s);
+  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 c(s) {
-    var u;
-    ((u = e.cameras) == null ? void 0 : u.length) === 0 && r(s);
+  function u(s) {
+    var c;
+    ((c = e.cameras) == null ? void 0 : c.length) === 0 && i(s);
   }
-  function i() {
+  function r() {
     e.cameras = [];
   }
-  return pe(() => {
-    o != null && o.value && n();
+  return fe(() => {
+    n != null && n.value && o();
   }), {
-    activeCamera: Oe(e, "camera"),
+    activeCamera: _e(e, "camera"),
     createCamera: a,
-    updateCamera: n,
-    pushCamera: r,
-    clearCameras: i,
-    setFirstCamera: c
+    updateCamera: o,
+    pushCamera: i,
+    clearCameras: r,
+    setFirstCamera: u
   };
 }
-const Re = X(), Ee = X(), Z = X(), I = new he();
-let W = 0, Y = 0;
-const { pause: at, resume: nt, isActive: rt } = Ne(
+const we = A(), be = A(), J = A(), _ = new pe();
+let I = 0, B = 0;
+const { pause: at, resume: nt, isActive: rt } = Ue(
   () => {
-    Re.trigger({ delta: W, elapsed: Y, clock: I }), Ee.trigger({ delta: W, elapsed: Y, clock: I }), Z.trigger({ delta: W, elapsed: Y, clock: I });
+    we.trigger({ delta: I, elapsed: B, clock: _ }), be.trigger({ delta: I, elapsed: B, clock: _ }), J.trigger({ delta: I, elapsed: B, clock: _ });
   },
   { immediate: !1 }
 );
-Z.on(() => {
-  W = I.getDelta(), Y = I.getElapsedTime();
+J.on(() => {
+  I = _.getDelta(), B = _.getElapsedTime();
 });
-function Pe() {
+function he() {
   return {
-    onBeforeLoop: Re.on,
-    onLoop: Ee.on,
-    onAfterLoop: Z.on,
+    onBeforeLoop: we.on,
+    onLoop: be.on,
+    onAfterLoop: J.on,
     pause: at,
     resume: nt,
     isActive: rt
   };
 }
 function ot(e) {
-  return e instanceof U ? e : Array.isArray(e) ? new U(...e) : new U(e);
+  return e instanceof W ? e : Array.isArray(e) ? new W(...e) : new W(e);
 }
-const q = {
+const Y = {
   realistic: {
-    outputColorSpace: Ie,
-    toneMapping: Be,
+    outputColorSpace: De,
+    toneMapping: Ie,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: Fe
+      type: Be
     }
   }
-}, Se = (e, t) => {
-  for (const o of Object.keys(t))
-    t[o] instanceof Object && Object.assign(t[o], Se(e[o], t[o]));
+}, ye = (e, t) => {
+  for (const n of Object.keys(t))
+    t[n] instanceof Object && Object.assign(t[n], ye(e[n], t[n]));
   return Object.assign(e || {}, t), e;
 }, it = "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", st = /* @__PURE__ */ ct(it);
-function V(e) {
-  return e.replace(/-([a-z])/g, (t, o) => o.toUpperCase());
+function j(e) {
+  return e.replace(/-([a-z])/g, (t, n) => n.toUpperCase());
 }
 function ct(e, t) {
-  const o = /* @__PURE__ */ 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];
+  const n = /* @__PURE__ */ 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 Mt = !0, oe = "[TresJS ▲ ■ ●] ";
-function F() {
-  function e(a, n) {
-    console.error(`${oe} ${a}`, n || "");
+const ut = (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));
+  }
+  return a;
+}, Mt = !0, oe = "[TresJS ▲ ■ ●] ";
+function O() {
+  function e(a, o) {
+    console.error(`${oe} ${a}`, o || "");
   }
   function t(a) {
     console.warn(`${oe} ${a}`);
   }
-  function o(a, n) {
+  function n(a, o) {
   }
   return {
     logError: e,
     logWarning: t,
-    logMessage: o
+    logMessage: n
   };
 }
-function ut(e) {
-  const t = ve(), o = E(!1), {
+function ft(e) {
+  const t = Ae(), n = G(!1), {
     alpha: a = !0,
-    antialias: n = !0,
-    depth: r,
-    logarithmicDepthBuffer: c,
-    failIfMajorPerformanceCaveat: i,
+    antialias: o = !0,
+    depth: i,
+    logarithmicDepthBuffer: u,
+    failIfMajorPerformanceCaveat: r,
     precision: s,
-    premultipliedAlpha: u,
+    premultipliedAlpha: c,
     stencil: l,
     shadows: d = !1,
-    shadowMapType: v = ze,
-    useLegacyLights: C = !1,
-    outputColorSpace: M = ae,
-    toneMapping: b = ne,
-    toneMappingExposure: P = 1,
+    shadowMapType: p = He,
+    useLegacyLights: y = !1,
+    outputColorSpace: h = ae,
+    toneMapping: v = ne,
+    toneMappingExposure: M = 1,
     context: w = void 0,
-    powerPreference: x = "default",
-    preserveDrawingBuffer: $ = !1,
-    clearColor: y,
-    windowSize: m = !1,
-    preset: R = void 0
-  } = me(e), { state: g, setState: h } = B(), { width: O, height: k } = f(m) == !0 || f(m) === "" || f(m) === "true" ? Ue() : Ke(g.container), { logError: S, logWarning: z } = F(), { pixelRatio: j } = qe(), { pause: T, resume: G } = Pe(), L = de(() => O.value / k.value);
+    powerPreference: E = "default",
+    preserveDrawingBuffer: k = !1,
+    clearColor: C,
+    windowSize: R = !1,
+    preset: N = void 0
+  } = ue(e), { state: f, setState: g } = S(), { width: X, height: Q } = m(R) == !0 || m(R) === "" || m(R) === "true" ? Ye() : $e(f.container), { logError: Ee, logWarning: Me } = O(), { pixelRatio: Z } = qe(), { pause: Pe, resume: Ce } = he(), F = V(() => X.value / Q.value);
   setTimeout(() => {
-    !f(m) && !g.canvas.value.offsetHeight && z(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
+    var P;
+    !m(R) && !((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 = () => {
-    t.value && (t.value.setSize(O.value, k.value), t.value.setPixelRatio(Math.min(j.value, 2)));
+    t.value && (t.value.setSize(X.value, Q.value), t.value.setPixelRatio(Math.min(Z.value, 2)));
   }, te = () => {
     if (!t.value)
       return;
-    const A = f(R);
-    if (A) {
-      A in q || S("Renderer Preset must be one of these: " + Object.keys(q).join(", ")), Se(t.value, q[A]);
+    const P = m(N);
+    if (P) {
+      P in Y || Ee("Renderer Preset must be one of these: " + Object.keys(Y).join(", ")), ye(t.value, Y[P]);
       return;
     }
-    t.value.shadowMap.enabled = f(d), t.value.shadowMap.type = f(v), t.value.toneMapping = f(b) || ne, t.value.toneMappingExposure = f(P), t.value.outputColorSpace = f(M) || ae, y != null && y.value && t.value.setClearColor(ot(f(y))), t.value.useLegacyLights = f(C);
-  }, Te = () => {
-    const A = K(g.canvas);
-    A && (t.value = new Ge({
-      canvas: A,
-      alpha: f(a),
-      antialias: f(n),
-      context: f(w),
-      depth: f(r),
-      failIfMajorPerformanceCaveat: f(i),
-      logarithmicDepthBuffer: f(c),
-      powerPreference: f(x),
-      precision: f(s),
-      stencil: f(l),
-      preserveDrawingBuffer: f($),
-      premultipliedAlpha: f(u)
-    }), h("renderer", t.value), h("clock", new he()), h("aspectRatio", L), te(), ee(), G(), o.value = !0);
-  }, Le = () => {
-    t.value && (t.value.dispose(), t.value = void 0, o.value = !1, T());
+    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, C != null && C.value && t.value.setClearColor(ot(m(C))), t.value.useLegacyLights = m(y);
+  }, Re = () => {
+    const P = U(f.canvas);
+    P && (t.value = new Ge({
+      canvas: P,
+      alpha: m(a),
+      antialias: m(o),
+      context: m(w),
+      depth: m(i),
+      failIfMajorPerformanceCaveat: m(r),
+      logarithmicDepthBuffer: m(u),
+      powerPreference: m(E),
+      precision: m(s),
+      stencil: m(l),
+      preserveDrawingBuffer: m(k),
+      premultipliedAlpha: m(c)
+    }), g("renderer", t.value), g("clock", new pe()), g("aspectRatio", F), te(), ee(), Ce(), n.value = !0);
+  }, xe = () => {
+    t.value && (t.value.dispose(), t.value = void 0, n.value = !1, Pe());
   };
-  return H([L, j], ee), H(
-    [d, v, M, C, b, P, y],
+  return D([F, Z], ee), D(
+    [d, p, h, y, v, M, C],
     te
-  ), H(
-    () => [g.canvas, g.container],
+  ), D(
+    () => [f.canvas, f.container],
     () => {
-      K(g.canvas) && K(g.container) && Te();
+      U(f.canvas) && U(f.container) && Re();
     },
     { immediate: !0, deep: !0 }
   ), {
     renderer: t,
-    isReady: o,
-    dispose: Le,
-    aspectRatio: L
+    isReady: n,
+    dispose: xe,
+    aspectRatio: F
   };
 }
-function ft(e) {
+function lt(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);
+  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 xt(e, t, o, a, n) {
-  const { logError: r } = F(), c = new e();
-  n && n(c), o && o(c);
+async function Pt(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(
-    (u) => new Promise((l, d) => {
-      c.load(
-        u,
-        (v) => {
-          v.scene && Object.assign(v, ft(v.scene)), l(v);
+    (c) => new Promise((l, d) => {
+      u.load(
+        c,
+        (p) => {
+          p.scene && Object.assign(p, lt(p.scene)), l(p);
         },
         a,
-        (v) => d(r("[useLoader] - Failed to load resource", v))
+        (p) => d(i("[useLoader] - Failed to load resource", p))
       );
     })
   );
-  return ye(t) ? await Promise.all(s) : await s[0];
+  return ge(t) ? await Promise.all(s) : await s[0];
 }
-async function Rt(e) {
-  const t = new Ve(), o = new He(t), a = (n) => new Promise((r, c) => {
-    o.load(
-      n,
-      (i) => r(i),
+async function Ct(e) {
+  const t = new Ve(), n = new Ne(t), a = (o) => new Promise((i, u) => {
+    n.load(
+      o,
+      (r) => i(r),
       () => null,
       () => {
-        c(new Error("[useTextures] - Failed to load texture"));
+        u(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (ye(e)) {
-    const n = await Promise.all(e.map((r) => a(r)));
-    return e.length > 1 ? n : n[0];
+  if (ge(e)) {
+    const o = await Promise.all(e.map((i) => a(i)));
+    return e.length > 1 ? o : o[0];
   } else {
     const {
-      map: n,
-      displacementMap: r,
-      normalMap: c,
-      roughnessMap: i,
+      map: o,
+      displacementMap: i,
+      normalMap: u,
+      roughnessMap: r,
       metalnessMap: s,
-      aoMap: u,
+      aoMap: c,
       alphaMap: l,
       matcap: d
     } = e;
     return {
-      map: n ? await a(n) : null,
-      displacementMap: r ? await a(r) : null,
-      normalMap: c ? await a(c) : null,
-      roughnessMap: i ? await a(i) : null,
+      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: u ? await a(u) : null,
+      aoMap: c ? await a(c) : null,
       alphaMap: l ? await a(l) : null,
       matcap: d ? await a(d) : null
     };
   }
 }
-function lt() {
-  var c;
-  const e = ve(new We()), t = E(new Ye()), o = E(null), { setState: a, state: n } = B();
-  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 (c = n == null ? void 0 : n.renderer) == null || c.domElement.addEventListener("pointermove", r), ge(() => {
-    var i;
-    (i = n == null ? void 0 : n.renderer) == null || i.domElement.removeEventListener("pointermove", r);
+const dt = (e) => {
+  const { state: t } = S(), n = V(() => {
+    var f;
+    return (f = t.canvas) == null ? void 0 : f.value;
+  }), { x: a, y: o } = Ke({ target: n }), { width: i, height: u, top: r, left: s } = Je(n), c = new Fe(), l = ({ x: f, y: g }) => {
+    if (n.value)
+      return {
+        x: (f - s.value) / i.value * 2 - 1,
+        y: -((g - r.value) / u.value) * 2 + 1
+      };
+  }, d = ({ x: f, y: g }) => {
+    if (t.camera)
+      return c.setFromCamera(new ze(f, g), t.camera), c.intersectObjects(e.value, !1);
+  }, p = (f) => {
+    const g = l({
+      x: (f == null ? void 0 : f.clientX) ?? a.value,
+      y: (f == null ? void 0 : f.clientY) ?? o.value
+    });
+    return g ? d(g) || [] : [];
+  }, y = V(() => p()), h = A(), v = A(), M = (f, g) => {
+    f.trigger({ event: g, intersects: p(g) });
+  }, w = (f) => {
+    M(v, f);
+  };
+  let E;
+  const k = (f) => {
+    var g;
+    E = (g = p(f)[0]) == null ? void 0 : g.object;
+  }, C = (f) => {
+    var g;
+    f instanceof PointerEvent && E === ((g = p(f)[0]) == null ? void 0 : g.object) && M(h, f);
+  }, R = (f) => v.trigger({ event: f, intersects: [] }), N = fe(() => {
+    n != null && n.value && (n.value.addEventListener("pointerup", C), n.value.addEventListener("pointerdown", k), n.value.addEventListener("pointermove", w), n.value.addEventListener("pointerleave", R), N());
+  });
+  return le(() => {
+    n != null && n.value && (n.value.removeEventListener("pointerup", C), n.value.removeEventListener("pointerdown", k), n.value.removeEventListener("pointermove", w), n.value.removeEventListener("pointerleave", R));
   }), {
-    raycaster: e,
-    pointer: t
+    intersects: y,
+    onClick: (f) => h.on(f).off,
+    onPointerMove: (f) => v.on(f).off
   };
-}
-function Et() {
-  const { logWarning: e } = F();
-  function t(a, n, r) {
-    let c = null;
-    return a.traverse((i) => {
-      i[n] === r && (c = i);
-    }), c || e(`Child with ${n} '${r}' not found.`), c;
+};
+function Rt() {
+  const { logWarning: e } = O();
+  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 o(a, n) {
-    return t(a, "name", n);
+  function n(a, o) {
+    return t(a, "name", o);
   }
   return {
     seek: t,
-    seekByName: o
+    seekByName: n
   };
 }
-const dt = /^on[^a-z]/, mt = (e) => dt.test(e);
-let J = null, ie = null;
-const se = {
+const pt = () => {
+  const e = Se({
+    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));
+  }, 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);
+      }), t(r);
+    });
+  }, a = V(
+    () => ut(
+      Object.values(e).map((r) => Array.from(r.keys())).flat(),
+      ({ uuid: r }) => r
+    )
+  ), { onClick: o, onPointerMove: i } = dt(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 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;
+  }), {
+    registerObject: n,
+    deregisterObject: t
+  };
+}, H = {
   GEOMETRY_VIA_PROP: "tres__geometryViaProp",
-  MATERIAL_VIA_PROP: "tres__materialViaProp"
-}, { logError: ce } = F();
-let ue = !0;
-const pt = {
-  createElement(e, t, o, a) {
-    var s, u;
+  MATERIAL_VIA_PROP: "tres__materialViaProp",
+  REGISTER_AT_POINTER_EVENT_HANDLER: "tres__registerAtPointerEventHandler"
+};
+let $ = null, T = null;
+const { logError: ie } = O(), mt = {
+  createElement(e, t, n, a) {
+    var s, c;
     if (a || (a = {}), a.args || (a.args = []), e === "template" || st(e))
       return null;
-    let n = e.replace("Tres", ""), r;
+    let o = e.replace("Tres", ""), i;
     if (e === "primitive") {
-      (a == null ? void 0 : a.object) === void 0 && ce("Tres primitives need a prop 'object'");
+      (a == null ? void 0 : a.object) === void 0 && ie("Tres primitives need a prop 'object'");
       const l = a.object;
-      n = l.type, r = Object.assign(l, { type: n, attach: a.attach, primitive: !0 });
+      o = l.type, i = Object.assign(l, { type: o, attach: a.attach, primitive: !0 });
     } else {
-      const l = Ce.value[n];
-      l || ce(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`), r = new l(...a.args);
-    }
-    if (r.isCamera && ue) {
-      a != null && a.position || r.position.set(3, 3, 3), a != null && a.lookAt || r.lookAt(0, 0, 0);
-      const { setFirstCamera: l } = xe();
-      l(r), ue = !1;
+      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);
     }
-    (a == null ? void 0 : a.attach) === void 0 && (r.isMaterial ? r.attach = "material" : r.isBufferGeometry && (r.attach = "geometry"));
-    const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } = se;
-    return r.isObject3D && ((s = a == null ? void 0 : a.material) != null && s.isMaterial && (r.userData[i] = !0), (u = a == null ? void 0 : a.geometry) != null && u.isBufferGeometry && (r.userData[c] = !0)), r.events = {}, r;
+    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;
   },
   insert(e, t) {
-    var o, a, n, r, c;
-    if (t && t.isScene && (ie = t), (((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)) {
-      J = e;
+    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;
       return;
     } else
-      (c = e == null ? void 0 : e.__vnode) != null && c.type.includes("Controls") && t === null && (J = ie);
-    t || (t = J), e != null && e.isObject3D && (t != null && t.isObject3D) ? (t.add(e), e.dispatchEvent({ type: "added" })) : 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));
+      (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));
   },
   remove(e) {
-    var t, o;
+    var t, n;
     if (e) {
       if (e.isObject3D) {
-        const a = e, n = (r) => {
-          var s, u;
-          const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } = se;
-          r.userData[i] || (s = r.material) == null || s.dispose(), r.userData[c] || (u = r.geometry) == null || u.dispose();
+        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();
         };
-        a.traverse((r) => n(r)), n(a);
+        a.traverse((i) => {
+          o(i);
+        }), o(a);
       }
-      (t = e.removeFromParent) == null || t.call(e), (o = e.dispose) == null || o.call(e);
+      (t = e.removeFromParent) == null || t.call(e), (n = e.dispose) == null || n.call(e);
     }
   },
-  patchProp(e, t, o, a) {
+  patchProp(e, t, n, a) {
     if (e) {
-      let n = e, r = t, c = V(r), i = n == null ? void 0 : n[c];
-      if (n.type === "BufferGeometry") {
-        if (r === "args")
+      let o = e, i = t, u = j(i), r = o == null ? void 0 : o[u];
+      if (o.type === "BufferGeometry") {
+        if (i === "args")
           return;
-        n.setAttribute(
-          V(r),
-          new $e(...a)
+        o.setAttribute(
+          j(i),
+          new We(...a)
         );
         return;
       }
-      if (r.includes("-") && i === void 0) {
-        const u = r.split("-");
-        i = u.reduce((l, d) => l[V(d)], n), r = u.pop(), c = r.toLowerCase(), i != null && i.set || (n = u.reduce((l, d) => l[V(d)], n));
-      }
-      if (mt(r)) {
-        const u = r;
-        e.events[u] = a;
+      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));
       }
       let s = a;
-      if (s === "" && (s = !0), re(i)) {
-        Array.isArray(s) ? e[c](...s) : e[c](s);
+      if (s === "" && (s = !0), re(r)) {
+        Array.isArray(s) ? e[u](...s) : e[u](s);
         return;
       }
-      !(i != null && i.set) && !re(i) ? n[c] = s : i.constructor === s.constructor && (i != null && i.copy) ? i == null || i.copy(s) : Array.isArray(s) ? i.set(...s) : !i.isColor && i.setScalar ? i.setScalar(s) : i.set(s);
+      !(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);
     }
   },
   parentNode(e) {
@@ -420,15 +485,15 @@ const pt = {
   setScopeId: () => void 0,
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
-}, { createApp: vt } = ke(pt), gt = (e) => {
-  const t = vt(o);
-  function o() {
+}, { createApp: vt } = Oe(mt), gt = (e) => {
+  const t = vt(n);
+  function n() {
     return e && e.default ? e.default() : [];
   }
   return t;
 };
-Me(be);
-const { logWarning: fe } = F(), wt = we({
+ve(q);
+const { logWarning: se } = O(), wt = de({
   name: "TresScene",
   props: [
     "shadows",
@@ -447,57 +512,54 @@ const { logWarning: fe } = F(), wt = we({
     "disableRender",
     "camera"
   ],
-  setup(e, { slots: t, expose: o }) {
-    e.physicallyCorrectLights === !0 && fe("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const a = E(), n = E(), r = new be.Scene(), { setState: c } = B();
-    c("scene", r), c("canvas", n), c("container", a);
-    const i = E(), s = t && t.default && t.default();
-    s && (s == null ? void 0 : s.length) > 0 && (i.value = s.some((w) => Xe(w.type) && w.type.includes("Camera")) || e.camera, i.value || fe("No camera found in the scene, please add one!"));
-    const { onLoop: u, resume: l } = Pe();
-    je(() => {
-      M();
-    }), ge(() => {
-      c("renderer", null);
+  setup(e, { slots: t, expose: n }) {
+    e.physicallyCorrectLights === !0 && se("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
+    const a = G(), o = G(), i = new q.Scene(), u = pt(), { 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();
+    ke(() => {
+      h();
+    }), le(() => {
+      r("renderer", null);
     });
-    const { activeCamera: d, pushCamera: v, clearCameras: C } = xe();
-    function M() {
-      const { renderer: w } = ut(e);
-      e.camera && v(e.camera);
-      const { raycaster: x, pointer: $ } = lt();
-      let y = null, m = null;
-      pe(() => {
-        d.value && x.value.setFromCamera($.value, d.value);
-      }), u(() => {
-        var R, g, h, O, k, S, z, j, T, G;
-        if (d.value && e.disableRender !== !0 && ((R = w.value) == null || R.render(r, d.value)), x.value) {
-          const L = x.value.intersectObjects(r.children);
-          L.length > 0 ? (m = L[0], y === null && ((O = (h = (g = m.object) == null ? void 0 : g.events) == null ? void 0 : h.onPointerEnter) == null || O.call(h, m)), (z = (S = (k = m.object) == null ? void 0 : k.events) == null ? void 0 : S.onPointerMove) == null || z.call(S, m)) : y !== null && ((G = (T = (j = m == null ? void 0 : m.object) == null ? void 0 : j.events) == null ? void 0 : T.onPointerLeave) == null || G.call(T, y), m = null), y = m;
-        }
-      }), Je(n.value, "click", () => {
-        var R, g, h;
-        m !== null && ((h = (g = (R = m.object) == null ? void 0 : R.events) == null ? void 0 : g.onClick) == null || h.call(g, m));
+    const { activeCamera: l, pushCamera: d, clearCameras: p } = tt();
+    function y() {
+      const w = i.getObjectByProperty("isCamera", !0);
+      if (w)
+        d(w);
+      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);
+      }
+    }
+    function h() {
+      const { renderer: w } = ft(e);
+      e.camera && d(e.camera), s(() => {
+        var E;
+        l.value && e.disableRender !== !0 && ((E = w.value) == null || E.render(i, l.value));
       });
     }
-    let b;
-    function P() {
-      b = gt(t);
-      const w = B();
-      b.provide("useTres", w), b.provide(Q, w), b.provide("extend", Me), b.mount(r);
+    let v;
+    function M() {
+      v = gt(t);
+      const w = S();
+      v.provide("useTres", w), v.provide(K, w), v.provide("extend", ve), v.mount(i), y();
     }
-    return P(), o({
-      scene: r
-    }), H(
+    return M(), n({
+      scene: i
+    }), D(
       () => e.camera,
       (w) => {
-        w && (C(), v(w));
+        w && (p(), d(w));
       }
-    ), () => D(
-      D(
+    ), () => L(
+      L(
         "div",
         {
           ref: a,
-          "data-scene": r.uuid,
-          key: r.uuid,
+          "data-scene": i.uuid,
+          key: i.uuid,
           style: {
             position: "relative",
             width: "100%",
@@ -507,7 +569,7 @@ const { logWarning: fe } = F(), wt = we({
           }
         },
         [
-          D(
+          L(
             "div",
             {
               style: {
@@ -516,9 +578,9 @@ const { logWarning: fe } = F(), wt = we({
               }
             },
             [
-              D("canvas", {
-                ref: n,
-                "data-scene": r.uuid,
+              L("canvas", {
+                ref: o,
+                "data-scene": i.uuid,
                 style: {
                   display: "block",
                   width: "100%",
@@ -534,7 +596,7 @@ const { logWarning: fe } = F(), wt = we({
       )
     );
   }
-}), bt = we({
+}), bt = de({
   name: "TresCanvas",
   props: [
     "shadows",
@@ -553,32 +615,33 @@ const { logWarning: fe } = F(), wt = we({
     "disableRender",
     "camera"
   ],
-  setup(e, { slots: t, expose: o }) {
-    const a = Ze();
-    return o(a), () => D(wt, e, t);
+  setup(e, { slots: t, expose: n }) {
+    const a = Qe();
+    return n(a), () => L(wt, e, t);
   }
-}), Pt = {
+}), xt = {
   install(e) {
     e.component("TresCanvas", bt);
   }
 };
 export {
-  et as CameraType,
-  Q as TRES_CONTEXT_KEY,
+  Ze as CameraType,
+  K as TRES_CONTEXT_KEY,
   bt as TresCanvas,
-  Ce as catalogue,
-  Pt as default,
-  Me as extend,
+  me as catalogue,
+  xt as default,
+  ve as extend,
   Mt as isProd,
-  ft as trasverseObjects,
-  xe as useCamera,
-  xt as useLoader,
-  F as useLogger,
-  lt as useRaycaster,
-  Pe as useRenderLoop,
-  ut as useRenderer,
-  Et as useSeek,
-  Rt as useTexture,
-  B as useTres,
-  Ze as useTresProvider
+  lt as trasverseObjects,
+  tt as useCamera,
+  Pt as useLoader,
+  O as useLogger,
+  pt as usePointerEventHandler,
+  dt as useRaycaster,
+  he as useRenderLoop,
+  ft as useRenderer,
+  Rt as useSeek,
+  Ct as useTexture,
+  S as useTres,
+  Qe as useTresProvider
 };