@tresjs/core 2.1.2 → 2.2.0

package/dist/tres.js

@@ -1,67 +1,71 @@
 /**
  * name: @tresjs/core
- * version: v2.1.2
+ * 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 me, computed as pe, toRefs as ve, provide as Oe, inject as ke, watchEffect as ge, toRef as je, shallowRef as we, watch as H, onUnmounted as he, createRenderer as De, defineComponent as be, onMounted as Ie, h as D } from "vue";
-import * as ye from "three";
-import { PerspectiveCamera as N, OrthographicCamera as Be, Clock as Ce, Color as U, SRGBColorSpace as Fe, ACESFilmicToneMapping as ze, PCFSoftShadowMap as Ge, PCFShadowMap as Ve, LinearSRGBColorSpace as re, NoToneMapping as oe, WebGLRenderer as He, LoadingManager as We, TextureLoader as Ye, Raycaster as $e, Vector2 as Ne, BufferAttribute as Ue } from "three";
-import { createEventHook as X, useRafFn as Ke, toValue as u, useWindowSize as qe, useElementSize as Je, useDevicePixelRatio as Xe, unrefElement as K, useEventListener as Qe } from "@vueuse/core";
-const ie = (e) => typeof e == "function", Ze = (e) => typeof e == "string", Me = (e) => !!e && e.constructor === Array, xe = E({}), Re = (e) => void Object.assign(xe.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 et() {
-  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 tt() {
-  const e = me({
-    uuid: et(),
+const K = Symbol();
+function Qe() {
+  const e = ce({
+    uuid: Xe(),
     camera: void 0,
     cameras: [],
+    canvas: void 0,
     scene: void 0,
     renderer: void 0,
-    aspectRatio: pe(() => 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,
-    ...ve(e),
+    ...ue(e),
     getState: t,
-    setState: o
+    setState: n
   };
-  return Oe(Q, a), a;
+  return Te(K, a), a;
 }
-const B = () => ke(Q, {
-  state: me({
+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 at = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(at || {});
-const nt = 45;
-let A;
-function Ee() {
-  const { state: e, setState: t, aspectRatio: o } = B();
-  function a(s = "Perspective", f) {
-    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: h } = f || {
+      const { near: y, far: h, fov: v } = c || {
         near: 0.1,
         far: 1e3,
-        fov: nt
+        fov: et
       };
-      A = new N(h, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, C, M), (d = e.cameras) == null || d.push(A);
+      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: h, bottom: S, near: w, far: x } = f || {
+      const { left: y, right: h, top: v, bottom: M, near: w, far: E } = c || {
         left: -100,
         right: 100,
         top: 100,
@@ -69,342 +73,404 @@ function Ee() {
         near: 0.1,
         far: 1e3
       };
-      A = new Be(C, M, h, S, w, x), (v = e.cameras) == null || v.push(A);
+      x = new je(y, h, v, M, w, E), (p = e.cameras) == null || p.push(x);
     }
-    return e.camera = A, t("camera", e.camera), A;
+    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 f;
-    (f = e.cameras) == null || f.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 f;
-    ((f = e.cameras) == null ? void 0 : f.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 ge(() => {
-    o != null && o.value && n();
+  return fe(() => {
+    n != null && n.value && o();
   }), {
-    activeCamera: je(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 Se = X(), Pe = X(), Z = X(), I = new Ce();
-let W = 0, Y = 0;
-const { pause: rt, resume: ot, isActive: it } = Ke(
+const we = A(), be = A(), J = A(), _ = new pe();
+let I = 0, B = 0;
+const { pause: at, resume: nt, isActive: rt } = Ue(
   () => {
-    Se.trigger({ delta: W, elapsed: Y, clock: I }), Pe.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 Te() {
+function he() {
   return {
-    onBeforeLoop: Se.on,
-    onLoop: Pe.on,
-    onAfterLoop: Z.on,
-    pause: rt,
-    resume: ot,
-    isActive: it
+    onBeforeLoop: we.on,
+    onLoop: be.on,
+    onAfterLoop: J.on,
+    pause: at,
+    resume: nt,
+    isActive: rt
   };
 }
-function st(e) {
-  return e instanceof U ? e : Array.isArray(e) ? new U(...e) : new U(e);
+function ot(e) {
+  return e instanceof W ? e : Array.isArray(e) ? new W(...e) : new W(e);
 }
-const q = {
+const Y = {
   realistic: {
-    outputColorSpace: Fe,
-    toneMapping: ze,
+    outputColorSpace: De,
+    toneMapping: Ie,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: Ge
+      type: Be
     }
   }
-}, Le = (e, t) => {
-  for (const o of Object.keys(t))
-    t[o] instanceof Object && Object.assign(t[o], Le(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;
-}, ct = "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", ft = /* @__PURE__ */ ut(ct);
-function V(e) {
-  return e.replace(/-([a-z])/g, (t, o) => o.toUpperCase());
+}, 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 j(e) {
+  return e.replace(/-([a-z])/g, (t, n) => n.toUpperCase());
 }
-function ut(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];
+function ct(e, t) {
+  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 Rt = !0, se = "[TresJS ▲ ■ ●] ";
-function F() {
-  function e(a, n) {
-    console.error(`${se} ${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(`${se} ${a}`);
+    console.warn(`${oe} ${a}`);
   }
-  function o(a, n) {
+  function n(a, o) {
   }
   return {
     logError: e,
     logWarning: t,
-    logMessage: o
+    logMessage: n
   };
 }
-function lt(e) {
-  var ae, ne;
-  const t = we(), 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: f,
+    premultipliedAlpha: c,
     stencil: l,
     shadows: d = !1,
-    shadowMapType: v = Ve,
-    useLegacyLights: C = !1,
-    outputColorSpace: M = re,
-    toneMapping: h = oe,
-    toneMappingExposure: S = 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
-  } = ve(e), { state: g, setState: b } = B(), { width: O, height: k } = u(m) == !0 || u(m) === "" || u(m) === "true" ? qe() : Je(g.container), { logError: P, logWarning: z } = F(), { pixelRatio: j } = Xe(), { pause: T, resume: G } = Te(), L = pe(() => O.value / k.value);
-  !u(m) && ((ne = (ae = g.container) == null ? void 0 : ae.value) == null ? void 0 : ne.offsetHeight) === 0 && z(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
-You could set windowSize=true to force the canvas to be the size of the window.`);
+    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(() => {
+    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 _ = u(R);
-    if (_) {
-      _ in q || P("Renderer Preset must be one of these: " + Object.keys(q).join(", ")), Le(t.value, q[_]);
+    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 = u(d), t.value.shadowMap.type = u(v), t.value.toneMapping = u(h) || oe, t.value.toneMappingExposure = u(S), t.value.outputColorSpace = u(M) || re, y != null && y.value && t.value.setClearColor(st(u(y))), t.value.useLegacyLights = u(C);
-  }, _e = () => {
-    const _ = K(g.canvas);
-    _ && (t.value = new He({
-      canvas: _,
-      alpha: u(a),
-      antialias: u(n),
-      context: u(w),
-      depth: u(r),
-      failIfMajorPerformanceCaveat: u(i),
-      logarithmicDepthBuffer: u(c),
-      powerPreference: u(x),
-      precision: u(s),
-      stencil: u(l),
-      preserveDrawingBuffer: u($),
-      premultipliedAlpha: u(f)
-    }), b("renderer", t.value), b("clock", new Ce()), b("aspectRatio", L), te(), ee(), G(), o.value = !0);
-  }, Ae = () => {
-    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, h, S, 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) && _e();
+      U(f.canvas) && U(f.container) && Re();
     },
     { immediate: !0, deep: !0 }
   ), {
     renderer: t,
-    isReady: o,
-    dispose: Ae,
-    aspectRatio: L
+    isReady: n,
+    dispose: xe,
+    aspectRatio: F
   };
 }
-function dt(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 Et(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(
-    (f) => new Promise((l, d) => {
-      c.load(
-        f,
-        (v) => {
-          v.scene && Object.assign(v, dt(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 Me(t) ? await Promise.all(s) : await s[0];
+  return ge(t) ? await Promise.all(s) : await s[0];
 }
-async function St(e) {
-  const t = new We(), o = new Ye(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 (Me(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: f,
+      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: f ? await a(f) : null,
+      aoMap: c ? await a(c) : null,
       alphaMap: l ? await a(l) : null,
       matcap: d ? await a(d) : null
     };
   }
 }
-function mt() {
-  var c;
-  const e = we(new $e()), t = E(new Ne()), 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), he(() => {
-    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 Pt() {
-  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 pt = /^on[^a-z]/, vt = (e) => pt.test(e);
-let J = null, ce = null;
-const fe = {
+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: ue } = F();
-let le = !0;
-const gt = {
-  createElement(e, t, o, a) {
-    var s, f;
-    if (a || (a = {}), a.args || (a.args = []), e === "template" || ft(e))
+  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 && ue("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 = xe.value[n];
-      l || ue(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`), r = new l(...a.args);
-    }
-    if (r.isCamera && le) {
-      a != null && a.position || r.position.set(3, 3, 3), a != null && a.lookAt || r.lookAt(0, 0, 0);
-      const { setFirstCamera: l } = Ee();
-      l(r), le = !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 } = fe;
-    return r.isObject3D && ((s = a == null ? void 0 : a.material) != null && s.isMaterial && (r.userData[i] = !0), (f = a == null ? void 0 : a.geometry) != null && f.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 && (ce = 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 = ce);
-    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, f;
-          const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } = fe;
-          r.userData[i] || (s = r.material) == null || s.dispose(), r.userData[c] || (f = r.geometry) == null || f.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 Ue(...a)
+        o.setAttribute(
+          j(i),
+          new We(...a)
         );
         return;
       }
-      if (r.includes("-") && i === void 0) {
-        const f = r.split("-");
-        i = f.reduce((l, d) => l[V(d)], n), r = f.pop(), c = r.toLowerCase(), i != null && i.set || (n = f.reduce((l, d) => l[V(d)], n));
-      }
-      if (vt(r)) {
-        const f = r;
-        e.events[f] = 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), ie(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) && !ie(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) {
@@ -419,15 +485,15 @@ const gt = {
   setScopeId: () => void 0,
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
-}, { createApp: wt } = De(gt), ht = (e) => {
-  const t = wt(o);
-  function o() {
+}, { createApp: vt } = Oe(mt), gt = (e) => {
+  const t = vt(n);
+  function n() {
     return e && e.default ? e.default() : [];
   }
   return t;
 };
-Re(ye);
-const { logWarning: de } = F(), bt = be({
+ve(q);
+const { logWarning: se } = O(), wt = de({
   name: "TresScene",
   props: [
     "shadows",
@@ -446,57 +512,54 @@ const { logWarning: de } = F(), bt = be({
     "disableRender",
     "camera"
   ],
-  setup(e, { slots: t, expose: o }) {
-    e.physicallyCorrectLights === !0 && de("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const a = E(), n = E(), r = new ye.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) => Ze(w.type) && w.type.includes("Camera")) || e.camera, i.value || de("No camera found in the scene, please add one!"));
-    const { onLoop: f, resume: l } = Te();
-    Ie(() => {
-      M();
-    }), he(() => {
-      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 } = Ee();
-    function M() {
-      const { renderer: w } = lt(e);
-      e.camera && v(e.camera);
-      const { raycaster: x, pointer: $ } = mt();
-      let y = null, m = null;
-      ge(() => {
-        d.value && x.value.setFromCamera($.value, d.value);
-      }), f(() => {
-        var R, g, b, O, k, P, 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 = (b = (g = m.object) == null ? void 0 : g.events) == null ? void 0 : b.onPointerEnter) == null || O.call(b, m)), (z = (P = (k = m.object) == null ? void 0 : k.events) == null ? void 0 : P.onPointerMove) == null || z.call(P, 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;
-        }
-      }), Qe(n.value, "click", () => {
-        var R, g, b;
-        m !== null && ((b = (g = (R = m.object) == null ? void 0 : R.events) == null ? void 0 : g.onClick) == null || b.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 h;
-    function S() {
-      h = ht(t);
-      const w = B();
-      h.provide("useTres", w), h.provide(Q, w), h.provide("extend", Re), h.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 S(), 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%",
@@ -506,7 +569,7 @@ const { logWarning: de } = F(), bt = be({
           }
         },
         [
-          D(
+          L(
             "div",
             {
               style: {
@@ -515,9 +578,9 @@ const { logWarning: de } = F(), bt = be({
               }
             },
             [
-              D("canvas", {
-                ref: n,
-                "data-scene": r.uuid,
+              L("canvas", {
+                ref: o,
+                "data-scene": i.uuid,
                 style: {
                   display: "block",
                   width: "100%",
@@ -533,7 +596,7 @@ const { logWarning: de } = F(), bt = be({
       )
     );
   }
-}), yt = be({
+}), bt = de({
   name: "TresCanvas",
   props: [
     "shadows",
@@ -552,32 +615,33 @@ const { logWarning: de } = F(), bt = be({
     "disableRender",
     "camera"
   ],
-  setup(e, { slots: t, expose: o }) {
-    const a = tt();
-    return o(a), () => D(bt, e, t);
+  setup(e, { slots: t, expose: n }) {
+    const a = Qe();
+    return n(a), () => L(wt, e, t);
   }
-}), Tt = {
+}), xt = {
   install(e) {
-    e.component("TresCanvas", yt);
+    e.component("TresCanvas", bt);
   }
 };
 export {
-  at as CameraType,
-  Q as TRES_CONTEXT_KEY,
-  yt as TresCanvas,
-  xe as catalogue,
-  Tt as default,
-  Re as extend,
-  Rt as isProd,
-  dt as trasverseObjects,
-  Ee as useCamera,
-  Et as useLoader,
-  F as useLogger,
-  mt as useRaycaster,
-  Te as useRenderLoop,
-  lt as useRenderer,
-  Pt as useSeek,
-  St as useTexture,
-  B as useTres,
-  tt as useTresProvider
+  Ze as CameraType,
+  K as TRES_CONTEXT_KEY,
+  bt as TresCanvas,
+  me as catalogue,
+  xt as default,
+  ve as extend,
+  Mt as isProd,
+  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
 };