@tresjs/core 1.8.1 → 2.0.0-alpha.1

package/dist/tres.js

@@ -1,30 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v1.8.1
+ * version: v2.0.0-alpha.1
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-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 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 || {
+import { ref as M, watchEffect as Ee, toRef as xe, shallowRef as ne, toRefs as ae, computed as re, watch as O, shallowReactive as Pe, createRenderer as Re, defineComponent as Se, h as P } from "vue";
+import * as oe from "three";
+import { MathUtils as Te, PerspectiveCamera as _, OrthographicCamera as Oe, Clock as ie, Color as W, sRGBEncoding as Ae, ACESFilmicToneMapping as ke, PCFSoftShadowMap as je, PCFShadowMap as De, LinearEncoding as Y, NoToneMapping as Q, WebGLRenderer as Fe, LoadingManager as _e, TextureLoader as We, Raycaster as ze, Vector2 as Be, Mesh as Ie } from "three";
+import { createEventHook as U, useRafFn as He, resolveUnref as u, useWindowSize as Ge, useElementSize as Ue, useDevicePixelRatio as Ve, unrefElement as z, useEventListener as $e, isFunction as Z } from "@vueuse/core";
+const G = M({ uuid: Te.generateUUID() }), se = (e) => void Object.assign(G.value, e);
+var Ne = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Ne || {});
+const qe = 45;
+let y;
+function ce() {
+  const { state: e, setState: t, aspectRatio: r } = L();
+  function o(a = "Perspective", s) {
+    var l, p, m;
+    if (a === "Perspective") {
+      const { near: d, far: w, fov: v } = s || {
         near: 0.1,
         far: 1e3,
-        fov: Qe
+        fov: qe
       };
-      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);
+      y = new _(v, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, d, w), (p = e.cameras) == null || p.push(y);
     } else {
-      const { left: u, right: d, top: p, bottom: m, near: g, far: R } = r || {
+      const { left: d, right: w, top: v, bottom: g, near: E, far: x } = s || {
         left: -100,
         right: 100,
         top: 100,
@@ -32,501 +33,424 @@ function Se() {
         near: 0.1,
         far: 1e3
       };
-      b = new ye(u, d, p, m, g, R), (i = e.cameras) == null || i.push(b);
+      y = new Oe(d, w, v, g, E, x), (m = e.cameras) == null || m.push(y);
     }
-    return e.camera = b, n("camera", e.camera), b;
+    return e.camera = y, t("camera", e.camera), y;
   }
-  function c() {
-    var t;
-    e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (t = e.camera) == null || t.updateProjectionMatrix();
+  function n() {
+    var a;
+    e.camera instanceof _ && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (a = e.camera) == null || a.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);
+  function i(a) {
+    var s;
+    (s = e.cameras) == null || s.push(a), a instanceof _ && e.aspectRatio && (a.aspect = e.aspectRatio.value), a.updateProjectionMatrix(), t("camera", a);
   }
-  function h() {
+  function c() {
     e.cameras = [];
   }
-  return o && j(o, c), {
-    activeCamera: $e(e, "camera"),
-    createCamera: a,
-    updateCamera: c,
-    pushCamera: f,
-    clearCameras: h
+  return Ee(() => {
+    r != null && r.value && n();
+  }), {
+    activeCamera: xe(e, "camera"),
+    createCamera: o,
+    updateCamera: n,
+    pushCamera: i,
+    clearCameras: c
   };
 }
-const fe = "[TresJS ▲ ■ ●] ";
-function F() {
-  function e(a, c) {
-    console.error(`${fe} ${a}`, c || "");
-  }
-  function n(a) {
-    console.warn(`${fe} ${a}`);
-  }
-  function o(a, c) {
-  }
+const ue = U(), le = U(), V = U(), b = new ie();
+let A = 0, k = 0;
+const { pause: Je, resume: Ke, isActive: Xe } = He(
+  () => {
+    ue.trigger({ delta: A, elapsed: k, clock: b }), le.trigger({ delta: A, elapsed: k, clock: b }), V.trigger({ delta: A, elapsed: k, clock: b });
+  },
+  { immediate: !1 }
+);
+V.on(() => {
+  A = b.getDelta(), k = b.getElapsedTime();
+});
+function $() {
   return {
-    logError: e,
-    logWarning: n,
-    logMessage: o
+    onBeforeLoop: ue.on,
+    onLoop: le.on,
+    onAfterLoop: V.on,
+    pause: Je,
+    resume: Ke,
+    isActive: Xe
   };
 }
-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: (f) => {
-      if (!f) {
-        o("No objects provided to extend catalogue");
-        return;
-      }
-      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: D
-  };
+function Ye(e) {
+  return e instanceof W ? e : Array.isArray(e) ? new W(...e) : new W(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;
+const B = {
+  realistic: {
+    outputEncoding: Ae,
+    toneMapping: ke,
+    toneMappingExposure: 3,
+    shadowMap: {
+      enabled: !0,
+      type: je
+    }
+  }
+}, fe = (e, t) => {
+  for (const r of Object.keys(t))
+    t[r] instanceof Object && Object.assign(t[r], fe(e[r], t[r]));
+  return Object.assign(e || {}, t), e;
+}, Qe = "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", Ze = /* @__PURE__ */ et(Qe);
+function I(e) {
+  return e.replace(/-([a-z])/g, (t, r) => r.toUpperCase());
 }
-function rt(e) {
-  return e instanceof K ? e : Array.isArray(e) ? new K(...e) : new K(e);
+function et(e, t) {
+  const r = /* @__PURE__ */ Object.create(null), o = e.split(",");
+  for (let n = 0; n < o.length; n++)
+    r[o[n]] = !0;
+  return t ? (n) => !!r[n.toLowerCase()] : (n) => !!r[n];
 }
-const pe = ["rotation", "scale", "position"], ot = ["X", "Y", "Z"], at = ["color"], it = ["r", "g", "b"];
-function Ce(e) {
+const f = ne(), H = M(!1);
+function tt(e, t, r) {
   const {
-    /* logMessage, */
-    logError: n
-  } = 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 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 (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 (s === "" && (s = !0), tt(r[i])) {
-              if (l === "center" && !s)
-                return;
-              r[i](...N(s) ? s : [s]);
-              return;
-            }
-            r[i] = s;
-          }
-        } catch (g) {
-          n(`There was an error setting ${i} property`, g);
-        }
-      }
-    });
-  }
-  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()))
+    alpha: o = !0,
+    antialias: n = !0,
+    depth: i,
+    logarithmicDepthBuffer: c,
+    failIfMajorPerformanceCaveat: a,
+    precision: s,
+    premultipliedAlpha: l,
+    stencil: p,
+    shadows: m = !1,
+    shadowMapType: d = De,
+    physicallyCorrectLights: w = !1,
+    useLegacyLights: v = !1,
+    outputEncoding: g = Y,
+    toneMapping: E = Q,
+    toneMappingExposure: x = 1,
+    context: de = void 0,
+    powerPreference: ve = "default",
+    preserveDrawingBuffer: ge = !1,
+    clearColor: C,
+    windowSize: we = !1,
+    preset: he = void 0
+  } = ae(r), { setState: D } = L(), { width: N, height: q } = u(we) ? Ge() : Ue(t), { logError: ye } = j(), { pixelRatio: J } = Ve(), { pause: Me, resume: Ce } = $(), F = re(() => N.value / q.value), K = () => {
+    f.value && (f.value.setSize(N.value, q.value), f.value.setPixelRatio(Math.min(J.value, 2)));
+  }, X = () => {
+    if (!f.value)
+      return;
+    const h = u(he);
+    if (h) {
+      h in B || ye("Renderer Preset must be one of these: " + Object.keys(B).join(", ")), fe(f.value, B[h]);
       return;
-    {
-      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 ? 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 f(t, r, l) {
-    if (l.default && (l != null && l.default())) {
-      const s = l.default().map((i) => c(i));
-      if (t.name === "Group") {
-        const i = new t();
-        return s.forEach((u) => {
-          i.add(u);
-        }), i;
-      } else
-        return new t(...s.flat().filter(Boolean));
-    } else
-      return r.args ? new t(...r.args) : new t();
-  }
-  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 O = Be(window, "click", () => {
-              m.emit("click", C);
-            });
-            ge(() => {
-              O();
-            });
-          }
-          return v && S instanceof De && (v.fog = S), m.expose(S), () => {
-          };
-        }
-      });
-      return [s, i];
-    });
-  }
-  return {
-    createComponentInstances: h,
-    processProps: a,
-    createInstanceFromVNode: c
-  };
-}
-const Ee = ee(), Re = ee(), te = ee(), I = new ve();
-let W = 0, k = 0;
-const { pause: st, resume: ct, isActive: lt } = Ie(
-  () => {
-    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 }
-);
-te.on(() => {
-  W = I.getDelta(), k = I.getElapsedTime();
-});
-function ne() {
-  return {
-    onBeforeLoop: Ee.on,
-    onLoop: Re.on,
-    onAfterLoop: te.on,
-    pause: st,
-    resume: ct,
-    isActive: lt
+    f.value.shadowMap.enabled = u(m), f.value.shadowMap.type = u(d), f.value.toneMapping = u(E) || Q, f.value.toneMappingExposure = u(x), f.value.outputEncoding = u(g) || Y, C != null && C.value && f.value.setClearColor(Ye(u(C))), f.value.useLegacyLights = u(v);
+  }, be = () => {
+    const h = z(e);
+    h && (f.value = new Fe({
+      canvas: h,
+      alpha: u(o),
+      antialias: u(n),
+      context: u(de),
+      depth: u(i),
+      failIfMajorPerformanceCaveat: u(a),
+      logarithmicDepthBuffer: u(c),
+      powerPreference: u(ve),
+      precision: u(s),
+      stencil: u(p),
+      preserveDrawingBuffer: u(ge),
+      premultipliedAlpha: u(l)
+    }), D("renderer", f.value), D("clock", new ie()), D("aspectRatio", F), X(), K(), Ce(), H.value = !0);
+  }, Le = () => {
+    f.value && (f.value.dispose(), f.value = void 0, H.value = !1, Me());
   };
-}
-const ut = Q(new ke());
-function ft() {
-  return {
-    scene: ut
+  return O([F, J], K), O(
+    [m, d, g, v, E, x, C],
+    X
+  ), O(
+    () => [e, t],
+    () => {
+      z(e) && z(t) && be();
+    },
+    { immediate: !0, deep: !0 }
+  ), {
+    renderer: f,
+    isReady: H,
+    dispose: Le,
+    aspectRatio: F
   };
 }
-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;
+const pe = (e) => !!e && e.constructor === Array;
+function nt(e) {
+  const t = { nodes: {}, materials: {} };
+  return e && e.traverse((r) => {
+    r.name && (t.nodes[r.name] = r), r.material && !t.materials[r.material.name] && (t.materials[r.material.name] = r.material);
+  }), t;
 }
-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(
+async function dt(e, t, r, o, n) {
+  const { logError: i } = j(), c = new e();
+  n && n(c), r && r(c);
+  const s = (Array.isArray(t) ? t : [t]).map(
+    (l) => new Promise((p, m) => {
+      c.load(
         l,
-        (u) => {
-          u.scene && Object.assign(u, pt(u.scene)), s(u);
+        (d) => {
+          d.scene && Object.assign(d, nt(d.scene)), p(d);
         },
-        a,
-        (u) => i(f("[useLoader] - Failed to load resource", u))
+        o,
+        (d) => m(i("[useLoader] - Failed to load resource", d))
       );
     })
   );
-  return N(n) ? await Promise.all(r) : await r[0];
+  return pe(t) ? await Promise.all(s) : await s[0];
 }
-async function Et(e) {
-  const n = new Ne(), o = new Ve(n), a = (c) => new Promise((f, h) => {
-    o.load(
-      c,
-      (t) => f(t),
+async function vt(e) {
+  const t = new _e(), r = new We(t), o = (n) => new Promise((i, c) => {
+    r.load(
+      n,
+      (a) => i(a),
       () => null,
       () => {
-        h(new Error("[useTextures] - Failed to load texture"));
+        c(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (N(e)) {
-    const c = await Promise.all(e.map((f) => a(f)));
-    return e.length > 1 ? c : c[0];
+  if (pe(e)) {
+    const n = await Promise.all(e.map((i) => o(i)));
+    return e.length > 1 ? n : n[0];
   } else {
-    const { map: c, displacementMap: f, normalMap: h, roughnessMap: t, metalnessMap: r, aoMap: l } = e;
+    const { map: n, displacementMap: i, normalMap: c, roughnessMap: a, metalnessMap: s, aoMap: l } = e;
     return {
-      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
+      map: n ? await o(n) : null,
+      displacementMap: i ? await o(i) : null,
+      normalMap: c ? await o(c) : null,
+      roughnessMap: a ? await o(a) : null,
+      metalnessMap: s ? await o(s) : null,
+      aoMap: l ? await o(l) : null
     };
   }
 }
-const U = Oe({
+const R = Pe({
   camera: void 0,
   cameras: [],
-  aspectRatio: he(() => window.innerWidth / window.innerHeight)
+  aspectRatio: re(() => window.innerWidth / window.innerHeight)
 });
-function $() {
-  function e(o) {
-    return U[o];
+function L() {
+  function e(r) {
+    return R[r];
   }
-  function n(o, a) {
-    U[o] = a;
+  function t(r, o) {
+    R[r] = o;
   }
   return {
-    state: U,
-    ...we(U),
+    state: R,
+    ...ae(R),
     getState: e,
-    setState: n
+    setState: t
   };
 }
-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) {
-    B.value.x = o.clientX / window.innerWidth * 2 - 1, B.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
+const ee = ne(new ze()), S = M(new Be()), at = M(null);
+function me() {
+  const { setState: e } = L();
+  e("raycaster", ee.value), e("pointer", S), e("currentInstance", at);
+  function t(r) {
+    S.value.x = r.clientX / window.innerWidth * 2 - 1, S.value.y = -(r.clientY / window.innerHeight) * 2 + 1;
   }
-  return window.addEventListener("pointermove", n), ge(() => {
-    window.removeEventListener("pointermove", n);
-  }), {
-    raycaster: X,
-    pointer: B
+  return window.addEventListener("pointermove", t), {
+    raycaster: ee,
+    pointer: S
   };
 }
-const Y = {
-  realistic: {
-    outputEncoding: Ke,
-    toneMapping: Xe,
-    toneMappingExposure: 3,
-    shadowMap: {
-      enabled: !0,
-      type: Ye
-    }
+const gt = !0, te = "[TresJS ▲ ■ ●] ";
+function j() {
+  function e(o, n) {
+    console.error(`${te} ${o}`, n || "");
   }
-}, Me = (e, n) => {
-  for (const o of Object.keys(n))
-    n[o] instanceof Object && Object.assign(n[o], Me(e[o], n[o]));
-  return Object.assign(e || {}, n), e;
-}, y = Q(), J = L(!1);
-function dt(e, n, o) {
-  const {
-    alpha: a = !0,
-    antialias: c = !0,
-    depth: f,
-    logarithmicDepthBuffer: h,
-    failIfMajorPerformanceCaveat: t,
-    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 (!y.value)
-      return;
-    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;
-    }
-    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 = () => {
-    y.value && (y.value.dispose(), y.value = void 0, J.value = !1, xe());
-  };
-  return j([V, ae], ie), j(
-    [i, u, m, p, g, R, C],
-    se
-  ), j(
-    () => [e, n],
-    () => {
-      G(e) && G(n) && be();
-    },
-    { immediate: !0, deep: !0 }
-  ), {
-    renderer: y,
-    isReady: J,
-    dispose: Te,
-    aspectRatio: V
+  function t(o) {
+    console.warn(`${te} ${o}`);
+  }
+  function r(o, n) {
+  }
+  return {
+    logError: e,
+    logWarning: t,
+    logMessage: r
   };
 }
-const { logError: de, logWarning: gt } = F(), ht = q({
-  name: "TresCanvas",
-  props: {
-    shadows: Boolean,
-    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: String,
-    preserveDrawingBuffer: Boolean,
-    clearColor: String,
-    windowSize: { type: Boolean, default: !1 },
-    preset: String
+const { logWarning: rt } = j();
+function ot(e) {
+  for (const t in e)
+    if (t.indexOf("on") === 0)
+      return !0;
+  return !1;
+}
+let T = null;
+const it = {
+  createElement(e, t, r, o) {
+    if (e === "template" || Ze(e))
+      return null;
+    let n;
+    if (o === null && (o = {}), o != null && o.args ? n = new G.value[e.replace("Tres", "")](...o.args) : n = new G.value[e.replace("Tres", "")](), n.isCamera) {
+      (!(o != null && o.position) || o != null && o.position.every((c) => c == 0)) && rt(
+        // eslint-disable-next-line max-len
+        "Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗"
+      );
+      const { pushCamera: i } = ce();
+      i(n);
+    }
+    return (o == null ? void 0 : o.attach) === void 0 && (n.isMaterial ? n.attach = "material" : n.isBufferGeometry && (n.attach = "geometry")), n;
+  },
+  insert(e, t, r) {
+    if (T === null && t.isScene && (T = t), t === null && (t = T), t != null && t.isObject3D && (e != null && e.isObject3D)) {
+      const a = r ? t.children.indexOf(r) : 0;
+      e.parent = t, t.children.splice(a, 0, e), e.dispatchEvent({ type: "added" });
+    } else
+      typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[t == null ? void 0 : t.attach], t && (t[e.attach] = e));
+    const { onLoop: o } = $();
+    let n = null, i = null;
+    const { raycaster: c } = me();
+    e && e instanceof Ie && ot(e) && (o(() => {
+      var a, s, l;
+      if (t != null && t.children && e && c) {
+        const p = c.value.intersectObjects(t.children);
+        p.length > 0 && p[0].object.uuid === e.uuid ? (i = p[0], (n === null || n.object.uuid !== (i == null ? void 0 : i.object.uuid)) && ((a = e.onPointerEnter) == null || a.call(e, i)), (s = e.onPointerMove) == null || s.call(e, i)) : (i = null, n !== null && ((l = e.onPointerLeave) == null || l.call(e, n))), n = i;
+      }
+    }), $e(window, "click", () => {
+      var a;
+      i !== null && ((a = e.onClick) == null || a.call(e, i));
+    }));
+  },
+  remove(e) {
+    if (!e)
+      return;
+    const t = e.parentNode;
+    t && t.removeChild(e);
+  },
+  patchProp(e, t, r, o) {
+    if (e) {
+      let n = e, i = t;
+      const c = I(i);
+      let a = n == null ? void 0 : n[c];
+      if (e.parent || (e.parent = T), i.includes("-") && a === void 0) {
+        const l = i.split("-");
+        a = l.reduce((p, m) => p[I(m)], n), i = l.pop(), a != null && a.set || (n = l.reduce((p, m) => p[I(m)], n));
+      }
+      let s = o;
+      if (s === "" && (s = !0), Z(a))
+        return;
+      !(a != null && a.set) && !Z(a) ? n[c] = s : a.constructor === s.constructor && (a != null && a.copy) ? a == null || a.copy(s) : Array.isArray(s) ? a.set(...s) : !a.isColor && a.setScalar ? a.setScalar(s) : a.set(s);
+    }
+  },
+  parentNode(e) {
+    return (e == null ? void 0 : e.parent) || null;
   },
-  setup(e, { slots: n, attrs: o }) {
-    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 H(
-          "div",
-          {
-            ref: c,
-            style: {
-              position: "relative",
-              width: "100%",
-              height: "100%",
-              overflow: "hidden",
-              pointerEvents: "auto",
-              touchAction: "none",
-              ...o.style
-            }
-          },
-          [
-            H(
-              "div",
-              {
+  createText: () => void 0,
+  createComment: () => void 0,
+  setText: () => void 0,
+  setElementText: () => void 0,
+  nextSibling: () => void 0,
+  querySelector: () => void 0,
+  setScopeId: () => void 0,
+  cloneNode: () => void 0,
+  insertStaticContent: () => void 0
+}, { createApp: st } = Re(it), ct = (e) => {
+  const t = st(r);
+  function r() {
+    return e && e.default ? e.default() : [];
+  }
+  return t;
+};
+se(oe);
+const { logWarning: ut } = j(), lt = Se({
+  name: "TresCanvas",
+  props: [
+    "shadows",
+    "shadowMapType",
+    "physicallyCorrectLights",
+    "useLegacyLights",
+    "outputEncoding",
+    "toneMapping",
+    "toneMappingExposure",
+    "context",
+    "powerPreference",
+    "preserveDrawingBuffer",
+    "clearColor",
+    "windowSize",
+    "preset"
+  ],
+  setup(e, { slots: t, expose: r }) {
+    e.physicallyCorrectLights === !0 && ut("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
+    const o = M(), n = M(), i = new oe.Scene(), { setState: c } = L();
+    c("scene", i);
+    function a() {
+      const { renderer: p } = tt(n, o, e), { activeCamera: m } = ce(), { onLoop: d } = $(), { raycaster: w, pointer: v } = me();
+      d(() => {
+        var g;
+        m.value && (w.value.setFromCamera(v.value, m.value), (g = p.value) == null || g.render(i, m.value));
+      });
+    }
+    O(n, a);
+    let s;
+    function l() {
+      s = ct(t), s.provide("useTres", L()), s.provide("extend", se), s.mount(i);
+    }
+    return l(), r({
+      scene: i
+    }), () => P(
+      P(
+        "div",
+        {
+          ref: o,
+          style: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            pointerEvents: "auto",
+            touchAction: "none"
+          }
+        },
+        [
+          P(
+            "div",
+            {
+              style: {
+                width: "100%",
+                height: "100%"
+              }
+            },
+            [
+              P("canvas", {
+                ref: n,
                 style: {
+                  display: "block",
                   width: "100%",
-                  height: "100%"
+                  height: "100%",
+                  position: e.windowSize ? "fixed" : "absolute",
+                  top: 0,
+                  left: 0
                 }
-              },
-              [
-                H("canvas", {
-                  ref: a,
-                  style: {
-                    display: "block",
-                    width: "100%",
-                    height: "100%",
-                    position: e.windowSize ? "fixed" : "absolute",
-                    top: 0,
-                    left: 0
-                  }
-                }),
-                n.default()
-              ]
-            )
-          ]
-        );
-    };
-  }
-}), wt = q({
-  name: "Scene",
-  setup(e, { slots: n }) {
-    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();
-    };
+              })
+            ]
+          )
+        ]
+      )
+    );
   }
-}), Rt = Symbol("UseTresState"), Mt = {
-  install(e, n) {
-    const o = (n == null ? void 0 : n.prefix) || "Tres";
-    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);
-    });
+}), wt = {
+  install(e) {
+    e.component("TresCanvas", lt);
   }
 };
 export {
-  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
+  Ne as CameraType,
+  lt as TresCanvas,
+  G as catalogue,
+  wt as default,
+  se as extend,
+  gt as isProd,
+  nt as trasverseObjects,
+  ce as useCamera,
+  dt as useLoader,
+  j as useLogger,
+  me as useRaycaster,
+  $ as useRenderLoop,
+  tt as useRenderer,
+  vt as useTexture,
+  L as useTres
 };