@tresjs/core 1.7.0 → 1.8.1

package/dist/tres.js

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