@tresjs/core 1.8.0 → 2.0.0-alpha.0

package/dist/tres.js

@@ -1,30 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v1.8.0
+ * version: v2.0.0-alpha.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-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 || {
+import { ref as y, watchEffect as Ee, toRef as xe, shallowRef as ne, toRefs as ae, computed as re, watch as T, shallowReactive as Pe, createRenderer as Re, defineComponent as Se, h as x } 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 = y({ 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 h;
+function ce() {
+  const { state: e, setState: t, aspectRatio: r } = k();
+  function o(a = "Perspective", s) {
+    var l, f, d;
+    if (a === "Perspective") {
+      const { near: m, far: g, fov: v } = s || {
         near: 0.1,
         far: 1e3,
-        fov: et
+        fov: qe
       };
-      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);
+      h = new _(v, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, m, g), (f = e.cameras) == null || f.push(h);
     } else {
-      const { left: i, right: f, top: g, bottom: v, near: p, far: m } = t || {
+      const { left: m, right: g, top: v, bottom: b, near: L, far: E } = s || {
         left: -100,
         right: 100,
         top: 100,
@@ -32,501 +33,423 @@ function Se() {
         near: 0.1,
         far: 1e3
       };
-      P = new ye(i, f, g, v, p, m), (s = e.cameras) == null || s.push(P);
+      h = new Oe(m, g, v, b, L, E), (d = e.cameras) == null || d.push(h);
     }
-    return e.camera = P, n("camera", e.camera), P;
+    return e.camera = h, t("camera", e.camera), h;
   }
-  function a() {
-    var u;
-    e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (u = e.camera) == null || u.updateProjectionMatrix();
+  function n() {
+    var a;
+    e.camera instanceof _ && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (a = e.camera) == null || a.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 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 d() {
+  function c() {
     e.cameras = [];
   }
-  return e.aspectRatio && j(e.aspectRatio, a), {
-    activeCamera: Oe(e, "camera"),
+  return Ee(() => {
+    r != null && r.value && n();
+  }), {
+    activeCamera: xe(e, "camera"),
     createCamera: o,
-    updateCamera: a,
-    pushCamera: c,
-    clearCameras: d
+    updateCamera: n,
+    pushCamera: i,
+    clearCameras: c
   };
 }
-const ue = "[TresJS ▲ ■ ●] ";
-function I() {
-  function e(a, c) {
-    console.error(`${ue} ${a}`, c || "");
-  }
-  function n(a) {
-    console.warn(`${ue} ${a}`);
-  }
-  function o(a, c) {
-  }
+const ue = U(), le = U(), V = U(), C = new ie();
+let O = 0, A = 0;
+const { pause: Je, resume: Ke, isActive: Xe } = He(
+  () => {
+    ue.trigger({ delta: O, elapsed: A, clock: C }), le.trigger({ delta: O, elapsed: A, clock: C }), V.trigger({ delta: O, elapsed: A, clock: C });
+  },
+  { immediate: !1 }
+);
+V.on(() => {
+  O = C.getDelta(), A = C.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 = 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: (d) => {
-      if (!d) {
-        o("No objects provided to extend catalogue");
-        return;
-      }
-      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: D
-  };
+function Ye(e) {
+  return e instanceof W ? e : Array.isArray(e) ? new W(...e) : new W(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;
+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 Y ? e : Array.isArray(e) ? new Y(...e) : new Y(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 fe = ["rotation", "scale", "position"], ot = ["X", "Y", "Z"], at = ["color"], it = ["r", "g", "b"];
-function Ee(e) {
+const p = ne(), H = y(!1);
+function tt(e, t, r) {
   const {
-    /* logMessage, */
-    logError: n
-  } = 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 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 (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 (s === "" && (s = !0), tt(r[i])) {
-              if (l === "center" && !s)
-                return;
-              r[i](...N(s) ? s : [s]);
-              return;
-            }
-            r[i] = s;
-          }
-        } catch (m) {
-          n(`There was an error setting ${i} property`, m);
-        }
-      }
-    });
-  }
-  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()))
+    alpha: o = !0,
+    antialias: n = !0,
+    depth: i,
+    logarithmicDepthBuffer: c,
+    failIfMajorPerformanceCaveat: a,
+    precision: s,
+    premultipliedAlpha: l,
+    stencil: f,
+    shadows: d = !1,
+    shadowMapType: m = De,
+    physicallyCorrectLights: g = !1,
+    useLegacyLights: v = !1,
+    outputEncoding: b = Y,
+    toneMapping: L = Q,
+    toneMappingExposure: E = 1,
+    context: de = void 0,
+    powerPreference: ve = "default",
+    preserveDrawingBuffer: ge = !1,
+    clearColor: M,
+    windowSize: we = !1,
+    preset: he = void 0
+  } = ae(r), { setState: D } = k(), { 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 = () => {
+    p.value && (p.value.setSize(N.value, q.value), p.value.setPixelRatio(Math.min(J.value, 2)));
+  }, X = () => {
+    if (!p.value)
+      return;
+    const w = u(he);
+    if (w) {
+      w in B || ye("Renderer Preset must be one of these: " + Object.keys(B).join(", ")), fe(p.value, B[w]);
       return;
-    {
-      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
-          (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 d(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((f) => {
-          i.add(f);
-        }), i;
-      } else
-        return new t(...s.flat().filter(Boolean));
-    } else
-      return r.args ? new t(...r.args) : new t();
-  }
-  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 _ = Ie(window, "click", () => {
-              p.emit("click", E);
-            });
-            ge(() => {
-              _();
-            });
-          }
-          return S && y instanceof We && (S.fog = y), p.expose(y), () => {
-          };
-        }
-      });
-      return [s, i];
-    });
-  }
-  return {
-    createComponentInstances: u,
-    processProps: a,
-    createInstanceFromVNode: c
+    p.value.shadowMap.enabled = u(d), p.value.shadowMap.type = u(m), p.value.toneMapping = u(L) || Q, p.value.toneMappingExposure = u(E), p.value.outputEncoding = u(b) || Y, M != null && M.value && p.value.setClearColor(Ye(u(M))), p.value.useLegacyLights = u(v);
+  }, be = () => {
+    const w = z(e);
+    w && (p.value = new Fe({
+      canvas: w,
+      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(f),
+      preserveDrawingBuffer: u(ge),
+      premultipliedAlpha: u(l)
+    }), D("renderer", p.value), D("clock", new ie()), D("aspectRatio", F), X(), K(), Ce(), H.value = !0);
+  }, Le = () => {
+    p.value && (p.value.dispose(), p.value = void 0, H.value = !1, Me());
   };
-}
-const Re = te(), Me = te(), ne = te(), B = new ve();
-let W = 0, k = 0;
-const { pause: st, resume: ct, isActive: lt } = Fe(
-  () => {
-    Re.trigger({ delta: W, elapsed: k, clock: B }), Me.trigger({ delta: W, elapsed: k, clock: B }), ne.trigger({ delta: W, elapsed: k, clock: B });
-  },
-  { immediate: !1 }
-);
-ne.on(() => {
-  W = B.getDelta(), k = B.getElapsedTime();
-});
-function re() {
-  return {
-    onBeforeLoop: Re.on,
-    onLoop: Me.on,
-    onAfterLoop: ne.on,
-    pause: st,
-    resume: ct,
-    isActive: lt
-  };
-}
-const ut = ee(new Ne());
-function ft() {
-  return {
-    scene: ut
+  return T([F, J], K), T(
+    [d, m, b, v, L, E, M],
+    X
+  ), T(
+    () => [e, t],
+    () => {
+      z(e) && z(t) && be();
+    },
+    { immediate: !0, deep: !0 }
+  ), {
+    renderer: p,
+    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: 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(
+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((f, d) => {
+      c.load(
         l,
-        (f) => {
-          f.scene && Object.assign(f, pt(f.scene)), s(f);
+        (m) => {
+          m.scene && Object.assign(m, nt(m.scene)), f(m);
         },
-        a,
-        (f) => i(d("[useLoader] - Failed to load resource", f))
+        o,
+        (m) => d(i("[useLoader] - Failed to load resource", m))
       );
     })
   );
-  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 Ve(), o = new He(n), a = (c) => new Promise((d, u) => {
-    o.load(
-      c,
-      (t) => d(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,
       () => {
-        u(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((d) => a(d)));
-    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: d, normalMap: u, 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: 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
+      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 = Ae({
+const P = Pe({
   camera: void 0,
   cameras: [],
-  aspectRatio: he(() => window.innerWidth / window.innerHeight)
+  aspectRatio: re(() => window.innerWidth / window.innerHeight)
 });
-function T() {
-  function e(o) {
-    return U[o];
+function k() {
+  function e(r) {
+    return P[r];
   }
-  function n(o, a) {
-    U[o] = a;
+  function t(r, o) {
+    P[r] = o;
   }
   return {
-    state: U,
-    ...we(U),
+    state: P,
+    ...ae(P),
     getState: e,
-    setState: n
+    setState: t
   };
 }
-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;
+const ee = ne(new ze()), R = y(new Be()), at = y(null);
+function me() {
+  const { setState: e } = k();
+  e("raycaster", ee.value), e("pointer", R), e("currentInstance", at);
+  function t(r) {
+    R.value.x = r.clientX / window.innerWidth * 2 - 1, R.value.y = -(r.clientY / window.innerHeight) * 2 + 1;
   }
-  return window.addEventListener("pointermove", n), ge(() => {
-    window.removeEventListener("pointermove", n);
-  }), {
-    raycaster: J,
-    pointer: A
+  return window.addEventListener("pointermove", t), {
+    raycaster: ee,
+    pointer: R
   };
 }
-const Z = {
-  realistic: {
-    outputEncoding: Xe,
-    toneMapping: Ye,
-    toneMappingExposure: 3,
-    shadowMap: {
-      enabled: !0,
-      type: Je
-    }
+const gt = !0, te = "[TresJS ▲ ■ ●] ";
+function j() {
+  function e(o, n) {
+    console.error(`${te} ${o}`, n || "");
   }
-}, 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: a = !0,
-    antialias: c = !0,
-    depth: d,
-    logarithmicDepthBuffer: u,
-    failIfMajorPerformanceCaveat: t,
-    precision: r,
-    premultipliedAlpha: l,
-    stencil: s,
-    shadows: i = !1,
-    shadowMapType: f = Ze,
-    physicallyCorrectLights: g = !1,
-    useLegacyLights: v = !1,
-    outputEncoding: p = ce,
-    toneMapping: m = le,
-    toneMappingExposure: L = 1,
-    context: S = void 0,
-    powerPreference: F = "default",
-    preserveDrawingBuffer: V = !1,
-    clearColor: y,
-    windowSize: E = !1,
-    preset: C = void 0
-  } = we(o), { width: _, height: $ } = h(E) ? _e() : Ue(n), { logError: xe } = I(), { pixelRatio: oe } = je(), { pause: Pe, resume: be } = re(), H = he(() => _.value / $.value), ae = () => {
-    w.value && (w.value.setSize(_.value, $.value), w.value.setPixelRatio(Math.min(oe.value, 2)));
-  }, ie = () => {
-    if (!w.value)
-      return;
-    const x = 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: 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 j([H, oe], ae), j(
-    [i, f, p, v, m, L, y],
-    ie
-  ), j(
-    () => [e, n],
-    () => {
-      X(e) && X(n) && Te();
-    },
-    { immediate: !0, deep: !0 }
-  ), {
-    renderer: w,
-    isReady: q,
-    dispose: $e,
-    aspectRatio: H
+  function t(o) {
+    console.warn(`${te} ${o}`);
+  }
+  function r(o, n) {
+  }
+  return {
+    logError: e,
+    logWarning: t,
+    logMessage: r
   };
 }
-const { logError: me, logWarning: gt } = I(), 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 S = 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 (S === null && t.isScene && (S = t), t === null && (t = S), 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 f = c.value.intersectObjects(t.children);
+        f.length > 0 && f[0].object.uuid === e.uuid ? (i = f[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);
   },
-  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 K(
-          "div",
-          {
-            ref: c,
-            style: {
-              position: "relative",
-              width: "100%",
-              height: "100%",
-              overflow: "hidden",
-              pointerEvents: "auto",
-              touchAction: "none",
-              ...o.style
-            }
-          },
-          [
-            K(
-              "div",
-              {
+  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 = S), i.includes("-") && a === void 0) {
+        const l = i.split("-");
+        a = l.reduce((f, d) => f[I(d)], n), i = l.pop(), a != null && a.set || (n = l.reduce((f, d) => f[I(d)], 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;
+  },
+  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 = y(), n = y(), i = new oe.Scene();
+    function c() {
+      const { renderer: l } = tt(n, o, e), { activeCamera: f } = ce(), { onLoop: d } = $(), { raycaster: m, pointer: g } = me();
+      d(() => {
+        var v;
+        f.value && (m.value.setFromCamera(g.value, f.value), (v = l.value) == null || v.render(i, f.value));
+      });
+    }
+    T(n, c);
+    let a;
+    function s() {
+      a = ct(t), a.provide("useTres", k()), a.provide("extend", se), a.mount(i);
+    }
+    return s(), r({
+      scene: i
+    }), () => x(
+      x(
+        "div",
+        {
+          ref: o,
+          style: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            pointerEvents: "auto",
+            touchAction: "none"
+          }
+        },
+        [
+          x(
+            "div",
+            {
+              style: {
+                width: "100%",
+                height: "100%"
+              }
+            },
+            [
+              x("canvas", {
+                ref: n,
                 style: {
+                  display: "block",
                   width: "100%",
-                  height: "100%"
+                  height: "100%",
+                  position: e.windowSize ? "fixed" : "absolute",
+                  top: 0,
+                  left: 0
                 }
-              },
-              [
-                K("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 } = 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();
-    };
+              })
+            ]
+          )
+        ]
+      )
+    );
   }
-}), 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 } = 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);
-    });
+}), wt = {
+  install(e) {
+    e.component("TresCanvas", lt);
   }
 };
 export {
-  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
+  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,
+  k as useTres
 };