@tresjs/core 1.7.0 → 1.8.0

package/dist/tres.js

@@ -1,32 +1,30 @@
 /**
  * name: @tresjs/core
- * version: v1.7.0
+ * version: v1.8.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { computed as me, watch as U, ref as R, inject as de, defineComponent as Z, onUnmounted as ge, shallowRef as ee, shallowReactive as be, toRefs as we, provide as L, onBeforeUnmount as Be, h as ie } from "vue";
-import { useEventListener as Oe, createEventHook as te, useRafFn as Ae, resolveUnref as m, useWindowSize as Ie, useElementSize as Fe, useDevicePixelRatio as $e, unrefElement as J } from "@vueuse/core";
-import * as ce from "three";
-import { PerspectiveCamera as _, OrthographicCamera as he, Vector3 as je, Color as X, Mesh as ke, Fog as ze, BufferAttribute as De, Clock as ve, Scene as Ue, LoadingManager as _e, TextureLoader as Ne, Raycaster as Ve, Vector2 as We, sRGBEncoding as Ge, ACESFilmicToneMapping as He, PCFSoftShadowMap as Ke, PCFShadowMap as Je, LinearEncoding as ue, NoToneMapping as le, WebGLRenderer as Xe } from "three";
-var Ye = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Ye || {});
-const B = {
-  cameras: []
-}, qe = 45;
+import { watch as j, toRef as Oe, ref as M, inject as de, defineComponent as Q, onUnmounted as ge, shallowRef as ee, shallowReactive as Ae, computed as he, toRefs as we, provide as b, onBeforeUnmount as Be, h as K } from "vue";
+import { useEventListener as Ie, createEventHook as te, useRafFn as Fe, resolveUnref as h, useWindowSize as _e, useElementSize as Ue, useDevicePixelRatio as je, unrefElement as X } from "@vueuse/core";
+import * as se from "three";
+import { PerspectiveCamera as z, OrthographicCamera as ye, Vector3 as ze, Color as Y, Mesh as De, Fog as We, BufferAttribute as ke, Clock as ve, Scene as Ne, LoadingManager as Ve, TextureLoader as He, Raycaster as Ge, Vector2 as Ke, sRGBEncoding as Xe, ACESFilmicToneMapping as Ye, PCFSoftShadowMap as Je, PCFShadowMap as Ze, LinearEncoding as ce, NoToneMapping as le, WebGLRenderer as qe } from "three";
+var Qe = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Qe || {});
+const et = 45;
 let P;
-function ye() {
+function Se() {
   const { state: e, setState: n } = T();
-  function o(p = "Perspective", t) {
-    var s;
-    if (p === "Perspective") {
-      const { near: c, far: a, fov: u } = t || {
+  function o(u = "Perspective", t) {
+    var r, l, s;
+    if (u === "Perspective") {
+      const { near: i, far: f, fov: g } = t || {
         near: 0.1,
         far: 1e3,
-        fov: qe
+        fov: et
       };
-      P = new _(u, ((s = e.aspectRatio) == null ? void 0 : s.value) || 1, c, a), B.cameras.push(P);
+      P = new z(g, ((r = e.aspectRatio) == null ? void 0 : r.value) || window.innerWidth / window.innerHeight, i, f), (l = e.cameras) == null || l.push(P);
     } else {
-      const { left: c, right: a, top: u, bottom: f, near: S, far: g } = t || {
+      const { left: i, right: f, top: g, bottom: v, near: p, far: m } = t || {
         left: -100,
         right: 100,
         top: 100,
@@ -34,34 +32,38 @@ function ye() {
         near: 0.1,
         far: 1e3
       };
-      P = new he(c, a, u, f, S, g), B.cameras.push(P);
+      P = new ye(i, f, g, v, p, m), (s = e.cameras) == null || s.push(P);
     }
-    return B.cameras.push(P), P;
+    return e.camera = P, n("camera", e.camera), P;
   }
-  const r = me(() => B.cameras[0]);
-  n("camera", r);
-  function i() {
-    r.value instanceof _ && e.aspectRatio && (r.value.aspect = e.aspectRatio.value), r.value.updateProjectionMatrix();
+  function a() {
+    var u;
+    e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (u = e.camera) == null || u.updateProjectionMatrix();
   }
-  function l(p) {
-    B.cameras.push(p), p instanceof _ && e.aspectRatio && (p.aspect = e.aspectRatio.value), p.updateProjectionMatrix();
+  function c(u) {
+    var t;
+    (t = e.cameras) == null || t.push(u), u instanceof z && e.aspectRatio && (u.aspect = e.aspectRatio.value), u.updateProjectionMatrix(), n("camera", u);
   }
-  return e.aspectRatio && U(e.aspectRatio, i), {
-    activeCamera: r,
+  function d() {
+    e.cameras = [];
+  }
+  return e.aspectRatio && j(e.aspectRatio, a), {
+    activeCamera: Oe(e, "camera"),
     createCamera: o,
-    updateCamera: i,
-    pushCamera: l
+    updateCamera: a,
+    pushCamera: c,
+    clearCameras: d
   };
 }
-const fe = "[TresJS ▲ ■ ●] ";
-function $() {
-  function e(r, i) {
-    console.error(`${fe} ${r}`, i || "");
+const ue = "[TresJS ▲ ■ ●] ";
+function I() {
+  function e(a, c) {
+    console.error(`${ue} ${a}`, c || "");
   }
-  function n(r) {
-    console.warn(`${fe} ${r}`);
+  function n(a) {
+    console.warn(`${ue} ${a}`);
   }
-  function o(r, i) {
+  function o(a, c) {
   }
   return {
     logError: e,
@@ -69,340 +71,367 @@ function $() {
     logMessage: o
   };
 }
-const N = R({ ...ce, uuid: ce.MathUtils.generateUUID() });
-delete N.value.Scene;
+const D = M({ ...se, uuid: se.MathUtils.generateUUID() });
+delete D.value.Scene;
 let O;
-function Se(e, n = "Tres") {
-  const { logError: o } = $();
+function Ce(e, n = "Tres") {
+  const { logError: o } = I();
   !O && e && (O = e);
-  const { createComponentInstances: r } = Me(n);
+  const { createComponentInstances: a } = Ee(n);
   return {
-    extend: (l) => {
-      if (!l) {
+    extend: (d) => {
+      if (!d) {
         o("No objects provided to extend catalogue");
         return;
       }
-      N.value = Object.assign(N.value, l);
-      const p = r(R(l));
-      O && p.forEach(([t, s]) => {
-        O._context.components[t] || O.component(t, s);
+      D.value = Object.assign(D.value, d);
+      const u = a(M(d));
+      O && u.forEach(([t, r]) => {
+        O._context.components[t] || O.component(t, r);
       });
     },
-    catalogue: N
+    catalogue: D
   };
 }
-const A = (e) => typeof e < "u", Qe = (e) => typeof e == "function", G = (e) => !!e && e.constructor === Array;
-function Ze(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof je ? [e.x, e.y, e.z] : e;
+const R = (e) => typeof e < "u", tt = (e) => typeof e == "function", N = (e) => !!e && e.constructor === Array;
+function nt(e) {
+  return typeof e == "number" ? [e, e, e] : e instanceof ze ? [e.x, e.y, e.z] : e;
 }
-function et(e) {
-  return e instanceof X ? e : Array.isArray(e) ? new X(...e) : new X(e);
+function rt(e) {
+  return e instanceof Y ? e : Array.isArray(e) ? new Y(...e) : new Y(e);
 }
-const tt = ["rotation", "scale", "position"];
-function Me(e) {
+const fe = ["rotation", "scale", "position"], ot = ["X", "Y", "Z"], at = ["color"], it = ["r", "g", "b"];
+function Ee(e) {
   const {
     /* logMessage, */
     logError: n
-  } = $();
-  function o(t, s) {
-    A(t) && A(s) && Object.entries(t).forEach(([c, a]) => {
-      const u = c.replace(/(-\w)/g, (f) => f[1].toUpperCase());
-      s.setAttribute(u, new De(...a));
+  } = I();
+  function o(t, r) {
+    R(t) && R(r) && Object.entries(t).forEach(([l, s]) => {
+      const i = l.replace(/(-\w)/g, (f) => f[1].toUpperCase());
+      r.setAttribute(i, new ke(...s));
     });
   }
-  function r(t, s) {
-    A(t) && A(s) && Object.entries(t).forEach(([c, a]) => {
-      const u = c.replace(/(-\w)/g, (f) => f[1].toUpperCase());
-      if (!(u === "args" || a === void 0)) {
-        tt.includes(u) && a && (a = Ze(a)), t.ref && (t.ref = s);
+  function a(t, r) {
+    R(t) && R(r) && Object.entries(t).forEach(([l, s]) => {
+      const i = l.replace(/(-\w)/g, (m) => m[1].toUpperCase());
+      let f, g, v, p;
+      if (!(i === "args" || s === void 0)) {
+        fe.includes(i) && s ? s = nt(s) : fe.forEach((m) => {
+          i.startsWith(m) && i.length === m.length + 1 && (f = m, g = i.substring(m.length), ot.includes(g) || n(
+            // eslint-disable-next-line max-len
+            `There was an error setting ${l} property, ${g} is not a valid axis for ${f}`
+          ));
+        }), at.forEach((m) => {
+          i.startsWith(m) && i.length === m.length + 1 && (v = m, p = i.substring(m.length).toLowerCase(), it.includes(p) || n(`There was an error setting ${l} property , ${p} is not a valid axis for ${v}`));
+        }), t.ref && (t.ref = r);
         try {
-          if (s[u] && A(s[u].set))
-            s[u].set(...G(a) ? a : [a]);
+          if (r[i] && R(r[i].set))
+            r[i].set(...N(s) ? s : [s]);
+          else if (
+            // Check if the property has a "setAxis" method
+            f && r[f]
+          )
+            R(r[f][`set${g}`]) ? r[f][`set${g}`](s) : R(r[`rotate${g}`]) && r[`rotate${g}`](s);
+          else if (
+            // Check if the instance has a "color" property
+            v && p && r[v] && r[v][p]
+          )
+            r[v][p] = s;
           else {
-            if (a === "" && (a = !0), Qe(s[u])) {
-              if (c === "center" && !a)
+            if (s === "" && (s = !0), tt(r[i])) {
+              if (l === "center" && !s)
                 return;
-              s[u](...G(a) ? a : [a]);
+              r[i](...N(s) ? s : [s]);
               return;
             }
-            s[u] = a;
+            r[i] = s;
           }
-        } catch (f) {
-          n(`There was an error setting ${u} property`, f);
+        } catch (m) {
+          n(`There was an error setting ${i} property`, m);
         }
       }
     });
   }
-  function i(t) {
-    var a, u;
-    const s = /^Symbol\(Fragment\)$/g, c = /^Symbol\(Text\)$/g;
-    if (s.test(t.type.toString()))
-      return t.children.map((f) => i(f));
-    if (c.test(t.type.toString()))
+  function c(t) {
+    var i, f;
+    const r = /^Symbol\(Fragment\)$/g, l = /^Symbol\(Text\)$/g, s = /^Symbol\(Comment\)$/g;
+    if (r.test(t.type.toString()))
+      return t.children.map((g) => c(g));
+    if (l.test(t.type.toString()) || s.test(t.type.toString()))
       return;
     {
-      const f = t.type.name.replace(e, ""), { catalogue: S } = Se(), g = de("catalogue") || S;
-      let w;
-      if (g)
-        if ((a = t.children) != null && a.default) {
-          const C = t.children.default().map((b) => i(b));
-          w = new g.value[f](...C.flat().filter(Boolean));
+      const g = t.type.name.replace(e, ""), { catalogue: v } = Ce(), p = de("catalogue") || v;
+      let m;
+      if (p)
+        if ((i = t.children) != null && i.default) {
+          const L = t.children.default().map((S) => c(S));
+          m = new p.value[g](...L.flat().filter(Boolean));
         } else
-          (u = t == null ? void 0 : t.props) != null && u.args ? g != null && g.value[f] ? w = new g.value[f](...t.props.args) : n(`There is no ${f} in the catalogue`, g == null ? void 0 : g.value.uuid) : w = new g.value[f]();
-      return t != null && t.props && (f === "BufferGeometry" ? o(t.props, w) : r(t.props, w)), w;
+          (f = t == null ? void 0 : t.props) != null && f.args ? p != null && p.value[g] ? m = new p.value[g](...t.props.args) : n(`There is no ${g} in the catalogue`, p == null ? void 0 : p.value.uuid) : m = new p.value[g]();
+      return t != null && t.props && (g === "BufferGeometry" ? o(t.props, m) : a(t.props, m)), m;
     }
   }
-  function l(t, s, c) {
-    if (c.default && (c != null && c.default())) {
-      const a = c.default().map((u) => i(u));
+  function d(t, r, l) {
+    if (l.default && (l != null && l.default())) {
+      const s = l.default().map((i) => c(i));
       if (t.name === "Group") {
-        const u = new t();
-        return a.forEach((f) => {
-          u.add(f);
-        }), u;
+        const i = new t();
+        return s.forEach((f) => {
+          i.add(f);
+        }), i;
       } else
-        return new t(...a.flat().filter(Boolean));
+        return new t(...s.flat().filter(Boolean));
     } else
-      return s.args ? new t(...s.args) : new t();
+      return r.args ? new t(...r.args) : new t();
   }
-  function p(t) {
-    return Object.entries(t.value).filter(([s, c]) => {
-      var a, u;
-      return (u = (a = c == null ? void 0 : c.prototype) == null ? void 0 : a.constructor) == null ? void 0 : u.toString().includes("class");
-    }).map(([s, c]) => {
-      const a = `${e}${s}`, u = Z({
-        name: a,
-        setup(f, { slots: S, attrs: g, ...w }) {
-          const { state: C } = T(), { onLoop: b } = re(), h = C.scene, j = C.raycaster, { pushCamera: E } = ye();
-          let v = l(c, g, S);
-          r(g, v), (v instanceof _ || v instanceof he) && E(v), v.isObject3D && (h == null || h.add(v));
-          let M = null, y = null;
-          if (v instanceof ke) {
-            b(() => {
-              if (v && j && (h != null && h.children)) {
-                const z = j.intersectObjects(h == null ? void 0 : h.children);
-                z.length > 0 ? (y = z[0], (M === null || M.object.uuid !== (y == null ? void 0 : y.object.uuid)) && w.emit("pointer-enter", y), w.emit("pointer-move", y)) : (y = null, M !== null && w.emit("pointer-leave", M)), M = y;
+  function u(t) {
+    return Object.entries(t.value).filter(([r, l]) => {
+      var s, i;
+      return (i = (s = l == null ? void 0 : l.prototype) == null ? void 0 : s.constructor) == null ? void 0 : i.toString().includes("class");
+    }).map(([r, l]) => {
+      const s = `${e}${r}`, i = Q({
+        name: s,
+        setup(f, { slots: g, attrs: v, ...p }) {
+          const { state: m } = T(), { onLoop: L } = re(), S = m.scene, F = m.raycaster, { pushCamera: V } = Se();
+          let y = d(l, v, g);
+          a(v, y), (y instanceof z || y instanceof ye) && V(y), y.isObject3D && (S == null || S.add(y));
+          let E = null, C = null;
+          if (y instanceof De) {
+            L(() => {
+              if (y && F && (S != null && S.children)) {
+                const $ = F.intersectObjects(S == null ? void 0 : S.children);
+                $.length > 0 ? (C = $[0], (E === null || E.object.uuid !== (C == null ? void 0 : C.object.uuid)) && p.emit("pointer-enter", C), p.emit("pointer-move", C)) : (C = null, E !== null && p.emit("pointer-leave", E)), E = C;
               }
             });
-            const k = Oe(window, "click", () => {
-              w.emit("click", M);
+            const _ = Ie(window, "click", () => {
+              p.emit("click", E);
             });
             ge(() => {
-              k();
+              _();
             });
           }
-          return h && v instanceof ze && (h.fog = v), w.expose(v), () => {
+          return S && y instanceof We && (S.fog = y), p.expose(y), () => {
           };
         }
       });
-      return [a, u];
+      return [s, i];
     });
   }
   return {
-    createComponentInstances: p,
-    processProps: r,
-    createInstanceFromVNode: i
+    createComponentInstances: u,
+    processProps: a,
+    createInstanceFromVNode: c
   };
 }
-const Ce = te(), Ee = te(), ne = te(), F = new ve();
-let V = 0, W = 0;
-const { pause: nt, resume: rt, isActive: ot } = Ae(
+const Re = te(), Me = te(), ne = te(), B = new ve();
+let W = 0, k = 0;
+const { pause: st, resume: ct, isActive: lt } = Fe(
   () => {
-    Ce.trigger({ delta: V, elapsed: W, clock: F }), Ee.trigger({ delta: V, elapsed: W, clock: F }), ne.trigger({ delta: V, elapsed: W, clock: F });
+    Re.trigger({ delta: W, elapsed: k, clock: B }), Me.trigger({ delta: W, elapsed: k, clock: B }), ne.trigger({ delta: W, elapsed: k, clock: B });
   },
   { immediate: !1 }
 );
 ne.on(() => {
-  V = F.getDelta(), W = F.getElapsedTime();
+  W = B.getDelta(), k = B.getElapsedTime();
 });
 function re() {
   return {
-    onBeforeLoop: Ce.on,
-    onLoop: Ee.on,
+    onBeforeLoop: Re.on,
+    onLoop: Me.on,
     onAfterLoop: ne.on,
-    pause: nt,
-    resume: rt,
-    isActive: ot
+    pause: st,
+    resume: ct,
+    isActive: lt
   };
 }
-const at = ee(new Ue());
-function st() {
+const ut = ee(new Ne());
+function ft() {
   return {
-    scene: at
+    scene: ut
   };
 }
-function it(e) {
+function pt(e) {
   const n = { nodes: {}, materials: {} };
   return e && e.traverse((o) => {
     o.name && (n.nodes[o.name] = o), o.material && !n.materials[o.material.name] && (n.materials[o.material.name] = o.material);
   }), n;
 }
-async function gt(e, n, o, r, i) {
-  const { logError: l } = $(), p = new e();
-  i && i(p), o && o(p);
-  const s = (Array.isArray(n) ? n : [n]).map(
-    (c) => new Promise((a, u) => {
-      p.load(
-        c,
+async function Ct(e, n, o, a, c) {
+  const { logError: d } = I(), u = new e();
+  c && c(u), o && o(u);
+  const r = (Array.isArray(n) ? n : [n]).map(
+    (l) => new Promise((s, i) => {
+      u.load(
+        l,
         (f) => {
-          f.scene && Object.assign(f, it(f.scene)), a(f);
+          f.scene && Object.assign(f, pt(f.scene)), s(f);
         },
-        r,
-        (f) => u(l("[useLoader] - Failed to load resource", f))
+        a,
+        (f) => i(d("[useLoader] - Failed to load resource", f))
       );
     })
   );
-  return G(n) ? await Promise.all(s) : await s[0];
+  return N(n) ? await Promise.all(r) : await r[0];
 }
-async function wt(e) {
-  const n = new _e(), o = new Ne(n), r = (i) => new Promise((l, p) => {
+async function Et(e) {
+  const n = new Ve(), o = new He(n), a = (c) => new Promise((d, u) => {
     o.load(
-      i,
-      (t) => l(t),
+      c,
+      (t) => d(t),
       () => null,
       () => {
-        p(new Error("[useTextures] - Failed to load texture"));
+        u(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (G(e)) {
-    const i = await Promise.all(e.map((l) => r(l)));
-    return e.length > 1 ? i : i[0];
+  if (N(e)) {
+    const c = await Promise.all(e.map((d) => a(d)));
+    return e.length > 1 ? c : c[0];
   } else {
-    const { map: i, displacementMap: l, normalMap: p, roughnessMap: t, metalnessMap: s, aoMap: c } = e;
+    const { map: c, displacementMap: d, normalMap: u, roughnessMap: t, metalnessMap: r, aoMap: l } = e;
     return {
-      map: i ? await r(i) : null,
-      displacementMap: l ? await r(l) : null,
-      normalMap: p ? await r(p) : null,
-      roughnessMap: t ? await r(t) : null,
-      metalnessMap: s ? await r(s) : null,
-      aoMap: c ? await r(c) : null
+      map: c ? await a(c) : null,
+      displacementMap: d ? await a(d) : null,
+      normalMap: u ? await a(u) : null,
+      roughnessMap: t ? await a(t) : null,
+      metalnessMap: r ? await a(r) : null,
+      aoMap: l ? await a(l) : null
     };
   }
 }
-const D = be({});
+const U = Ae({
+  camera: void 0,
+  cameras: [],
+  aspectRatio: he(() => window.innerWidth / window.innerHeight)
+});
 function T() {
   function e(o) {
-    return D[o];
+    return U[o];
   }
-  function n(o, r) {
-    D[o] = r;
+  function n(o, a) {
+    U[o] = a;
   }
   return {
-    state: D,
-    ...we(D),
+    state: U,
+    ...we(U),
     getState: e,
     setState: n
   };
 }
-const Y = ee(new Ve()), I = R(new We()), pe = R(null);
-function ct() {
+const J = ee(new Ge()), A = M(new Ke()), pe = M(null);
+function mt() {
   const { setState: e } = T();
-  e("raycaster", Y.value), e("pointer", I), e("currentInstance", pe), L("raycaster", Y), L("pointer", I), L("currentInstance", pe);
+  e("raycaster", J.value), e("pointer", A), e("currentInstance", pe), b("raycaster", J), b("pointer", A), b("currentInstance", pe);
   function n(o) {
-    I.value.x = o.clientX / window.innerWidth * 2 - 1, I.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
+    A.value.x = o.clientX / window.innerWidth * 2 - 1, A.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
   }
   return window.addEventListener("pointermove", n), ge(() => {
     window.removeEventListener("pointermove", n);
   }), {
-    raycaster: Y,
-    pointer: I
+    raycaster: J,
+    pointer: A
   };
 }
-const q = {
+const Z = {
   realistic: {
-    physicallyCorrectLights: !0,
-    outputEncoding: Ge,
-    toneMapping: He,
+    outputEncoding: Xe,
+    toneMapping: Ye,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: Ke
+      type: Je
     }
   }
-}, Re = (e, n) => {
+}, Le = (e, n) => {
   for (const o of Object.keys(n))
-    n[o] instanceof Object && Object.assign(n[o], Re(e[o], n[o]));
+    n[o] instanceof Object && Object.assign(n[o], Le(e[o], n[o]));
   return Object.assign(e || {}, n), e;
-}, d = ee(), Q = R(!1);
-function ut(e, n, o) {
+}, w = ee(), q = M(!1);
+function dt(e, n, o) {
   const {
-    alpha: r = !0,
-    antialias: i = !0,
-    depth: l,
-    logarithmicDepthBuffer: p,
+    alpha: a = !0,
+    antialias: c = !0,
+    depth: d,
+    logarithmicDepthBuffer: u,
     failIfMajorPerformanceCaveat: t,
-    precision: s,
-    premultipliedAlpha: c,
-    stencil: a,
-    shadows: u = !1,
-    shadowMapType: f = Je,
-    physicallyCorrectLights: S = !1,
-    outputEncoding: g = ue,
-    toneMapping: w = le,
-    toneMappingExposure: C = 1,
-    context: b = void 0,
-    powerPreference: h = "default",
-    preserveDrawingBuffer: j = !1,
-    clearColor: E,
-    windowSize: v = !1,
-    preset: M = void 0
-  } = we(o), { width: y, height: k } = m(v) ? Ie() : Fe(n), { logError: z } = $(), { pixelRatio: oe } = $e(), { pause: xe, resume: Pe } = re(), H = me(() => y.value / k.value), ae = () => {
-    d.value && (d.value.setSize(y.value, k.value), d.value.setPixelRatio(Math.min(oe.value, 2)));
-  }, se = () => {
-    if (!d.value)
+    precision: r,
+    premultipliedAlpha: l,
+    stencil: s,
+    shadows: i = !1,
+    shadowMapType: f = Ze,
+    physicallyCorrectLights: g = !1,
+    useLegacyLights: v = !1,
+    outputEncoding: p = ce,
+    toneMapping: m = le,
+    toneMappingExposure: L = 1,
+    context: S = void 0,
+    powerPreference: F = "default",
+    preserveDrawingBuffer: V = !1,
+    clearColor: y,
+    windowSize: E = !1,
+    preset: C = void 0
+  } = we(o), { width: _, height: $ } = h(E) ? _e() : Ue(n), { logError: xe } = I(), { pixelRatio: oe } = je(), { pause: Pe, resume: be } = re(), H = he(() => _.value / $.value), ae = () => {
+    w.value && (w.value.setSize(_.value, $.value), w.value.setPixelRatio(Math.min(oe.value, 2)));
+  }, ie = () => {
+    if (!w.value)
       return;
-    const x = m(M);
+    const x = h(C);
     if (x) {
-      x in q || z("Renderer Preset must be one of these: " + Object.keys(q).join(", ")), Re(d.value, q[x]);
+      x in Z || xe("Renderer Preset must be one of these: " + Object.keys(Z).join(", ")), Le(w.value, Z[x]);
       return;
     }
-    d.value.shadowMap.enabled = m(u), d.value.shadowMap.type = m(f), d.value.toneMapping = m(w) || le, d.value.toneMappingExposure = m(C), d.value.outputEncoding = m(g) || ue, E != null && E.value && d.value.setClearColor(et(m(E))), d.value.physicallyCorrectLights = m(S);
-  }, Le = () => {
-    const x = J(e);
-    if (d.value || !x)
+    w.value.shadowMap.enabled = h(i), w.value.shadowMap.type = h(f), w.value.toneMapping = h(m) || le, w.value.toneMappingExposure = h(L), w.value.outputEncoding = h(p) || ce, y != null && y.value && w.value.setClearColor(rt(h(y))), w.value.useLegacyLights = h(v);
+  }, Te = () => {
+    const x = X(e);
+    if (w.value || !x)
       return;
-    d.value = new Xe({
+    w.value = new qe({
       canvas: x,
-      alpha: m(r),
-      antialias: m(i),
-      context: m(b),
-      depth: m(l),
-      failIfMajorPerformanceCaveat: m(t),
-      logarithmicDepthBuffer: m(p),
-      powerPreference: m(h),
-      precision: m(s),
-      stencil: m(a),
-      preserveDrawingBuffer: m(j),
-      premultipliedAlpha: m(c)
+      alpha: h(a),
+      antialias: h(c),
+      context: h(S),
+      depth: h(d),
+      failIfMajorPerformanceCaveat: h(t),
+      logarithmicDepthBuffer: h(u),
+      powerPreference: h(F),
+      precision: h(r),
+      stencil: h(s),
+      preserveDrawingBuffer: h(V),
+      premultipliedAlpha: h(l)
     });
-    const { setState: K } = T();
-    K("renderer", d.value), K("clock", new ve()), K("aspectRatio", H), se(), ae(), Pe(), Q.value = !0;
-  }, Te = () => {
-    d.value && (d.value.dispose(), d.value = void 0, Q.value = !1, xe());
+    const { setState: G } = T();
+    G("renderer", w.value), G("clock", new ve()), G("aspectRatio", H), ie(), ae(), be(), q.value = !0;
+  }, $e = () => {
+    w.value && (w.value.dispose(), w.value = void 0, q.value = !1, Pe());
   };
-  return U([H, oe], ae), U(
-    [u, f, g, S, w, C, E],
-    se
-  ), U(
+  return j([H, oe], ae), j(
+    [i, f, p, v, m, L, y],
+    ie
+  ), j(
     () => [e, n],
     () => {
-      J(e) && J(n) && Le();
+      X(e) && X(n) && Te();
     },
     { immediate: !0, deep: !0 }
   ), {
-    renderer: d,
-    isReady: Q,
-    dispose: Te,
+    renderer: w,
+    isReady: q,
+    dispose: $e,
     aspectRatio: H
   };
 }
-const lt = Z({
+const { logError: me, logWarning: gt } = I(), ht = Q({
   name: "TresCanvas",
   props: {
     shadows: Boolean,
     shadowMapType: Number,
-    physicallyCorrectLights: Boolean,
+    physicallyCorrectLights: {
+      type: Boolean,
+      default: !1,
+      validator: (e) => (e && gt("physicallyCorrectLights is deprecated. Use useLegacyLights instead."), !0)
+    },
+    useLegacyLights: Boolean,
     outputEncoding: Number,
     toneMapping: Number,
     toneMappingExposure: Number,
@@ -414,75 +443,90 @@ const lt = Z({
     preset: String
   },
   setup(e, { slots: n, attrs: o }) {
-    const { logError: r } = $(), i = R(), l = R(), { renderer: p, dispose: t, aspectRatio: s } = ut(i, l, e);
-    return L("aspect-ratio", s), L("renderer", p), n.default && !n.default().some((c) => c.type.name === "Scene") && r("TresCanvas must contain a Scene component."), n.default && !n.default().some((c) => {
-      var a;
-      return (a = c.type.name) == null ? void 0 : a.includes("Camera");
-    }) && r("Scene must contain a Camera component."), Be(() => t()), () => {
+    const a = M(), c = M(), { renderer: d, dispose: u, aspectRatio: t } = dt(a, c, e);
+    return b("aspect-ratio", t), b("renderer", d), n.default && !n.default().some((r) => r.type.name === "Scene") && me("TresCanvas must contain a Scene component."), n.default && !n.default().some((r) => {
+      var l;
+      return (l = r.type.name) == null ? void 0 : l.includes("Camera");
+    }) && me("Scene must contain a Camera component."), Be(() => u()), () => {
       if (n.default)
-        return ie(
+        return K(
           "div",
           {
-            ref: l,
+            ref: c,
             style: {
               position: "relative",
               width: "100%",
-              height: "100vh",
+              height: "100%",
+              overflow: "hidden",
+              pointerEvents: "auto",
+              touchAction: "none",
               ...o.style
             }
           },
           [
-            ie("canvas", {
-              ref: i,
-              style: {
-                width: "100%",
-                height: "100%",
-                position: e.windowSize ? "fixed" : "absolute",
-                top: 0,
-                left: 0
-              }
-            }),
-            n.default()
+            K(
+              "div",
+              {
+                style: {
+                  width: "100%",
+                  height: "100%"
+                }
+              },
+              [
+                K("canvas", {
+                  ref: a,
+                  style: {
+                    display: "block",
+                    width: "100%",
+                    height: "100%",
+                    position: e.windowSize ? "fixed" : "absolute",
+                    top: 0,
+                    left: 0
+                  }
+                }),
+                n.default()
+              ]
+            )
           ]
         );
     };
   }
-}), ft = Z({
+}), wt = Q({
   name: "Scene",
   setup(e, { slots: n }) {
-    const { setState: o } = T(), { scene: r } = st(), i = de("renderer"), { activeCamera: l } = ye(), { raycaster: p, pointer: t } = ct(), { onLoop: s } = re();
-    return L("local-scene", r), o("scene", r.value), s(() => {
-      p.value.setFromCamera(t.value, l.value), i != null && i.value && (l != null && l.value) && (r != null && r.value) && i.value.render(r == null ? void 0 : r.value, l.value);
+    const { setState: o } = T(), { scene: a } = ft(), c = de("renderer"), { activeCamera: d } = Se(), { raycaster: u, pointer: t } = mt(), { onLoop: r } = re();
+    return b("local-scene", a), o("scene", a.value), r(() => {
+      d.value && (u.value.setFromCamera(t.value, d.value), c != null && c.value && d && (a != null && a.value) && c.value.render(a == null ? void 0 : a.value, d.value));
     }), () => {
       if (n.default)
         return n.default();
     };
   }
-}), ht = Symbol("UseTresState"), vt = {
+}), Rt = Symbol("UseTresState"), Mt = {
   install(e, n) {
     const o = (n == null ? void 0 : n.prefix) || "Tres";
-    e.component(`${o}Canvas`, lt), e.component(`${o}Scene`, ft);
-    const { catalogue: r, extend: i } = Se(e, o);
-    e.provide("catalogue", r), e.provide("extend", i), e.provide("useTres", T());
-    const { createComponentInstances: l } = Me(o);
-    l(r).forEach(([t, s]) => {
-      e.component(t, s);
+    e.component(`${o}Canvas`, ht), e.component(`${o}Scene`, wt);
+    const { catalogue: a, extend: c } = Ce(e, o);
+    e.provide("catalogue", a), e.provide("extend", c), e.provide("useTres", T());
+    const { createComponentInstances: d } = Ee(o);
+    d(a).forEach(([t, r]) => {
+      e.component(t, r);
     });
   }
 };
 export {
-  Ye as CameraType,
-  ht as UseTresStateSymbol,
-  vt as default,
-  it as trasverseObjects,
-  ye as useCamera,
-  Se as useCatalogue,
-  Me as useInstanceCreator,
-  gt as useLoader,
-  ct as useRaycaster,
+  Qe as CameraType,
+  Rt as UseTresStateSymbol,
+  Mt as default,
+  pt as trasverseObjects,
+  Se as useCamera,
+  Ce as useCatalogue,
+  Ee as useInstanceCreator,
+  Ct as useLoader,
+  mt as useRaycaster,
   re as useRenderLoop,
-  ut as useRenderer,
-  st as useScene,
-  wt as useTexture,
+  dt as useRenderer,
+  ft as useScene,
+  Et as useTexture,
   T as useTres
 };