@tresjs/core 1.6.3 → 1.8.0

package/dist/tres.js

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