@tresjs/core 2.3.0 → 2.4.0-next.1

package/dist/tres.js

@@ -1,479 +1,477 @@
 /**
  * name: @tresjs/core
- * version: v2.3.0
+ * version: v2.4.0-next.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { ref as V, shallowReactive as ce, toRefs as ue, provide as Te, inject as Le, watchEffect as fe, toRef as _e, shallowRef as Ae, computed as G, watch as D, onUnmounted as le, reactive as Se, createRenderer as Oe, defineComponent as de, onMounted as ke, h as L } from "vue";
-import * as q from "three";
-import { PerspectiveCamera as z, OrthographicCamera as je, Clock as pe, Vector3 as De, Color as W, SRGBColorSpace as Ie, ACESFilmicToneMapping as Be, PCFSoftShadowMap as He, PCFShadowMap as Ve, LinearSRGBColorSpace as ae, NoToneMapping as ne, WebGLRenderer as Ge, LoadingManager as Fe, TextureLoader as Ne, Raycaster as ze, Vector2 as We, BufferAttribute as Ue } from "three";
-import { createEventHook as A, useRafFn as Ye, toValue as m, useWindowSize as $e, useElementSize as qe, useDevicePixelRatio as Ke, unrefElement as U, usePointer as Je, useElementBounding as Xe } from "@vueuse/core";
-const me = V({}), ve = (e) => void Object.assign(me.value, e), re = (e) => typeof e == "function", ge = (e) => !!e && e.constructor === Array, b = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0e", "0f", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1a", "1b", "1c", "1d", "1e", "1f", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2a", "2b", "2c", "2d", "2e", "2f", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3a", "3b", "3c", "3d", "3e", "3f", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4a", "4b", "4c", "4d", "4e", "4f", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5a", "5b", "5c", "5d", "5e", "5f", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6a", "6b", "6c", "6d", "6e", "6f", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7a", "7b", "7c", "7d", "7e", "7f", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8a", "8b", "8c", "8d", "8e", "8f", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9a", "9b", "9c", "9d", "9e", "9f", "a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "aa", "ab", "ac", "ad", "ae", "af", "b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "ba", "bb", "bc", "bd", "be", "bf", "c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "ca", "cb", "cc", "cd", "ce", "cf", "d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9", "da", "db", "dc", "dd", "de", "df", "e0", "e1", "e2", "e3", "e4", "e5", "e6", "e7", "e8", "e9", "ea", "eb", "ec", "ed", "ee", "ef", "f0", "f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "fa", "fb", "fc", "fd", "fe", "ff"];
-function Qe() {
-  const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, n = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0;
-  return (b[e & 255] + b[e >> 8 & 255] + b[e >> 16 & 255] + b[e >> 24 & 255] + "-" + b[t & 255] + b[t >> 8 & 255] + "-" + b[t >> 16 & 15 | 64] + b[t >> 24 & 255] + "-" + b[n & 63 | 128] + b[n >> 8 & 255] + "-" + b[n >> 16 & 255] + b[n >> 24 & 255] + b[a & 255] + b[a >> 8 & 255] + b[a >> 16 & 255] + b[a >> 24 & 255]).toLowerCase();
-}
-const K = Symbol();
-function Ze() {
-  const e = ce({
-    uuid: Qe(),
-    camera: void 0,
-    cameras: [],
-    canvas: void 0,
-    scene: void 0,
-    renderer: void 0,
-    aspectRatio: void 0,
-    pointerEventHandler: void 0
-  });
-  function t(o) {
-    return e[o];
+import { shallowRef as A, computed as R, watchEffect as $, ref as U, toRefs as ne, watch as W, shallowReactive as ae, provide as oe, inject as re, onUnmounted as ie, reactive as Ce, readonly as z, createRenderer as Te, defineComponent as Pe, useSlots as _e, onMounted as xe, openBlock as he, createElementBlock as Ae, normalizeStyle as Re } from "vue";
+import * as Se from "three";
+import { PerspectiveCamera as se, Clock as Le, Vector3 as Oe, Color as G, SRGBColorSpace as ke, ACESFilmicToneMapping as Ie, PCFSoftShadowMap as Be, PCFShadowMap as De, LinearSRGBColorSpace as J, NoToneMapping as X, WebGLRenderer as je, LoadingManager as Ve, TextureLoader as ze, Raycaster as Ge, Vector2 as He, BufferAttribute as Fe, Scene as Ne } from "three";
+import { createEventHook as S, useRafFn as We, useDevicePixelRatio as $e, unrefElement as Q, toValue as m, usePointer as Ue, useElementBounding as Ye, useWindowSize as qe, useElementSize as Ke } from "@vueuse/core";
+function Je(e) {
+  const n = A([]), o = R(() => n.value.find((c) => c.userData.IS_ACTIVE_CAMERA));
+  function t(c, a = !0) {
+    n.value.push(c), a && r(c.uuid);
   }
-  function n(o, i) {
-    e[o] = i;
+  function r(c) {
+    const a = n.value.find((s) => s.uuid === c);
+    a && (n.value.forEach((s) => s.userData.IS_ACTIVE_CAMERA = !1), a.userData.IS_ACTIVE_CAMERA = !0);
   }
-  const a = {
-    state: e,
-    ...ue(e),
-    getState: t,
-    setState: n
-  };
-  return Te(K, a), a;
-}
-const S = () => Le(K, {
-  state: ce({
-    camera: void 0,
-    cameras: [],
-    canvas: void 0,
-    scene: void 0,
-    renderer: void 0,
-    pointerEventHandler: void 0
-  })
-});
-var et = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(et || {});
-const tt = 45;
-let R;
-function at() {
-  const { state: e, setState: t, aspectRatio: n } = S();
-  function a(s = "Perspective", c) {
-    var l, d, p;
-    if (s === "Perspective") {
-      const { near: y, far: h, fov: v } = c || {
-        near: 0.1,
-        far: 1e3,
-        fov: tt
-      };
-      R = new z(v, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, y, h), (d = e.cameras) == null || d.push(R);
-    } else {
-      const { left: y, right: h, top: v, bottom: M, near: w, far: E } = c || {
-        left: -100,
-        right: 100,
-        top: 100,
-        bottom: -100,
-        near: 0.1,
-        far: 1e3
-      };
-      R = new je(y, h, v, M, w, E), (p = e.cameras) == null || p.push(R);
-    }
-    return e.camera = R, t("camera", e.camera), R;
-  }
-  function o() {
-    var s;
-    e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (s = e.camera) == null || s.updateProjectionMatrix();
-  }
-  function i(s) {
-    var c;
-    (c = e.cameras) == null || c.push(s), s instanceof z && e.aspectRatio && (s.aspect = e.aspectRatio.value), s.updateProjectionMatrix(), t("camera", s);
+  function i() {
+    n.value = [];
   }
-  function u(s) {
+  return $(() => {
     var c;
-    ((c = e.cameras) == null ? void 0 : c.length) === 0 && i(s);
-  }
-  function r() {
-    e.cameras = [];
-  }
-  return fe(() => {
-    n != null && n.value && o();
+    (c = e.aspectRatio) != null && c.value && (console.log("camera watcher aspectRatio", e.aspectRatio.value), n.value.forEach((a) => {
+      a instanceof se && (a.aspect = e.aspectRatio.value), a.updateProjectionMatrix();
+    }));
   }), {
-    activeCamera: _e(e, "camera"),
-    createCamera: a,
-    updateCamera: o,
-    pushCamera: i,
-    clearCameras: r,
-    setFirstCamera: u
+    cameras: n,
+    camera: o,
+    addCamera: t,
+    setCameraToActive: r,
+    clearCameras: i
   };
 }
-const we = A(), be = A(), J = A(), _ = new pe();
-let I = 0, B = 0;
-const { pause: nt, resume: rt, isActive: ot } = Ye(
+const ce = S(), ue = S(), Y = S(), h = new Le();
+let D = 0, j = 0;
+const { pause: Xe, resume: Qe, isActive: Ze } = We(
   () => {
-    we.trigger({ delta: I, elapsed: B, clock: _ }), be.trigger({ delta: I, elapsed: B, clock: _ }), J.trigger({ delta: I, elapsed: B, clock: _ });
+    ce.trigger({ delta: D, elapsed: j, clock: h }), ue.trigger({ delta: D, elapsed: j, clock: h }), Y.trigger({ delta: D, elapsed: j, clock: h });
   },
   { immediate: !1 }
 );
-J.on(() => {
-  I = _.getDelta(), B = _.getElapsedTime();
+Y.on(() => {
+  D = h.getDelta(), j = h.getElapsedTime();
 });
-function he() {
+function fe() {
   return {
-    onBeforeLoop: we.on,
-    onLoop: be.on,
-    onAfterLoop: J.on,
-    pause: nt,
-    resume: rt,
-    isActive: ot
+    onBeforeLoop: ce.on,
+    onLoop: ue.on,
+    onAfterLoop: Y.on,
+    pause: Xe,
+    resume: Qe,
+    isActive: Ze
   };
 }
 function Pt(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof De ? [e.x, e.y, e.z] : e;
+  return typeof e == "number" ? [e, e, e] : e instanceof Oe ? [e.x, e.y, e.z] : e;
 }
-function it(e) {
-  return e instanceof W ? e : Array.isArray(e) ? new W(...e) : new W(e);
+function et(e) {
+  return e instanceof G ? e : Array.isArray(e) ? new G(...e) : new G(e);
 }
-const Y = {
+const H = {
   realistic: {
-    outputColorSpace: Ie,
-    toneMapping: Be,
+    outputColorSpace: ke,
+    toneMapping: Ie,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: He
+      type: Be
     }
   }
-}, ye = (e, t) => {
-  for (const n of Object.keys(t))
-    t[n] instanceof Object && Object.assign(t[n], ye(e[n], t[n]));
-  return Object.assign(e || {}, t), e;
-}, st = "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", ct = /* @__PURE__ */ ut(st);
-function j(e) {
-  return e.replace(/-([a-z])/g, (t, n) => n.toUpperCase());
+}, 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;
+}, tt = "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", nt = /* @__PURE__ */ at(tt);
+function B(e) {
+  return e.replace(/-([a-z])/g, (n, o) => o.toUpperCase());
 }
-function ut(e, t) {
-  const n = /* @__PURE__ */ Object.create(null), a = e.split(",");
-  for (let o = 0; o < a.length; o++)
-    n[a[o]] = !0;
-  return t ? (o) => !!n[o.toLowerCase()] : (o) => !!n[o];
+function at(e, n) {
+  const o = /* @__PURE__ */ Object.create(null), t = e.split(",");
+  for (let r = 0; r < t.length; r++)
+    o[t[r]] = !0;
+  return n ? (r) => !!o[r.toLowerCase()] : (r) => !!o[r];
 }
-const ft = (e, t) => {
-  const n = /* @__PURE__ */ new Set(), a = [];
-  for (const o of e) {
-    const i = t(o);
-    n.has(i) || (n.add(i), a.push(o));
+const ot = (e, n) => {
+  const o = /* @__PURE__ */ new Set(), t = [];
+  for (const r of e) {
+    const i = n(r);
+    o.has(i) || (o.add(i), t.push(r));
   }
-  return a;
-}, xt = !0, oe = "[TresJS ▲ ■ ●] ";
-function O() {
-  function e(a, o) {
-    console.error(`${oe} ${a}`, o || "");
+  return t;
+}, _t = !0, Z = "[TresJS ▲ ■ ●] ";
+function P() {
+  function e(t, r) {
+    console.error(`${Z} ${t}`, r || "");
   }
-  function t(a) {
-    console.warn(`${oe} ${a}`);
+  function n(t) {
+    console.warn(`${Z} ${t}`);
   }
-  function n(a, o) {
+  function o(t, r) {
   }
   return {
     logError: e,
-    logWarning: t,
-    logMessage: n
+    logWarning: n,
+    logMessage: o
   };
 }
-function lt(e) {
-  const t = Ae(), n = V(!1), {
-    alpha: a = !0,
-    antialias: o = !0,
-    depth: i,
-    logarithmicDepthBuffer: u,
-    failIfMajorPerformanceCaveat: r,
-    precision: s,
-    premultipliedAlpha: c,
-    stencil: l,
-    shadows: d = !1,
-    shadowMapType: p = Ve,
-    useLegacyLights: y = !1,
-    outputColorSpace: h = ae,
-    toneMapping: v = ne,
-    toneMappingExposure: M = 1,
-    context: w = void 0,
-    powerPreference: E = "default",
+function rt(e, n, o) {
+  const t = A(), r = U(!1), {
+    alpha: i = !0,
+    antialias: c = !0,
+    depth: a,
+    logarithmicDepthBuffer: s,
+    failIfMajorPerformanceCaveat: u,
+    precision: l,
+    premultipliedAlpha: p,
+    stencil: d,
+    shadows: M = !1,
+    shadowMapType: E = De,
+    useLegacyLights: b = !1,
+    outputColorSpace: g = J,
+    toneMapping: y = X,
+    toneMappingExposure: _ = 1,
+    context: L = void 0,
+    powerPreference: O = "default",
     preserveDrawingBuffer: k = !1,
-    clearColor: x,
-    windowSize: C = !1,
-    preset: F = void 0
-  } = ue(e), { state: f, setState: g } = S(), { width: X, height: Q } = m(C) == !0 || m(C) === "" || m(C) === "true" ? $e() : qe(f.container), { logError: Ee, logWarning: Me } = O(), { pixelRatio: Z } = Ke(), { pause: Pe, resume: xe } = he(), N = G(() => X.value / Q.value);
-  setTimeout(() => {
-    var P;
-    !m(C) && !((P = f.canvas) != null && P.value.offsetHeight) && Me(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
-  You could set windowSize=true to force the canvas to be the size of the window.`);
-  }, 1e3);
-  const ee = () => {
-    t.value && (t.value.setSize(X.value, Q.value), t.value.setPixelRatio(Math.min(Z.value, 2)));
-  }, te = () => {
+    clearColor: T,
+    windowSize: f = !1,
+    preset: v = void 0
+  } = ne(o), { cameras: Et, setRenderer: ge, sizes: V } = n, { logError: we, logWarning: yt } = P(), { pixelRatio: I } = $e(), { pause: be, resume: Ee } = fe(), q = () => {
+    t.value && (t.value.setSize(V.width.value, V.height.value), t.value.setPixelRatio(Math.min(I.value, 2)));
+  }, K = () => {
     if (!t.value)
       return;
-    const P = m(F);
-    if (P) {
-      P in Y || Ee("Renderer Preset must be one of these: " + Object.keys(Y).join(", ")), ye(t.value, Y[P]);
+    const C = m(v);
+    if (C) {
+      C in H || we("Renderer Preset must be one of these: " + Object.keys(H).join(", ")), le(t.value, H[C]);
       return;
     }
-    t.value.shadowMap.enabled = m(d), t.value.shadowMap.type = m(p), t.value.toneMapping = m(v) || ne, t.value.toneMappingExposure = m(M), t.value.outputColorSpace = m(h) || ae, x != null && x.value && t.value.setClearColor(it(m(x))), t.value.useLegacyLights = m(y);
-  }, Ce = () => {
-    const P = U(f.canvas);
-    P && (t.value = new Ge({
-      canvas: P,
-      alpha: m(a),
-      antialias: m(o),
-      context: m(w),
-      depth: m(i),
-      failIfMajorPerformanceCaveat: m(r),
-      logarithmicDepthBuffer: m(u),
-      powerPreference: m(E),
-      precision: m(s),
-      stencil: m(l),
+    t.value.shadowMap.enabled = m(M), t.value.shadowMap.type = m(E), t.value.toneMapping = m(y) || X, t.value.toneMappingExposure = m(_), t.value.outputColorSpace = m(g) || J, T != null && T.value && t.value.setClearColor(et(m(T))), t.value.useLegacyLights = m(b);
+  }, ye = () => {
+    const C = Q(e);
+    console.count("init renderer"), C && (t.value = new je({
+      canvas: C,
+      alpha: m(i),
+      antialias: m(c),
+      context: m(L),
+      depth: m(a),
+      failIfMajorPerformanceCaveat: m(u),
+      logarithmicDepthBuffer: m(s),
+      powerPreference: m(O),
+      precision: m(l),
+      stencil: m(d),
       preserveDrawingBuffer: m(k),
-      premultipliedAlpha: m(c)
-    }), g("renderer", t.value), g("clock", new pe()), g("aspectRatio", N), te(), ee(), xe(), n.value = !0);
-  }, Re = () => {
-    t.value && (t.value.dispose(), t.value = void 0, n.value = !1, Pe());
+      premultipliedAlpha: m(p)
+    }), ge(t.value), K(), q(), Ee(), r.value = !0);
+  }, Me = () => {
+    t.value && (t.value.dispose(), t.value = void 0, r.value = !1, be());
   };
-  return D([N, Z], ee), D(
-    [d, p, h, y, v, M, x],
-    te
-  ), D(
-    () => [f.canvas, f.container],
+  return $(() => {
+    var C;
+    ((C = V.aspectRatio) != null && C.value || I != null && I.value) && q();
+  }), W(
+    [M, E, g, b, y, _, T],
+    K
+  ), W(
+    e,
     () => {
-      U(f.canvas) && U(f.container) && Ce();
+      Q(e) && ye();
     },
     { immediate: !0, deep: !0 }
   ), {
     renderer: t,
-    isReady: n,
-    dispose: Re,
-    aspectRatio: N
+    isReady: r,
+    dispose: Me
   };
 }
-function dt(e) {
-  const t = { nodes: {}, materials: {} };
-  return e && e.traverse((n) => {
-    n.name && (t.nodes[n.name] = n), n.material && !t.materials[n.material.name] && (t.materials[n.material.name] = n.material);
-  }), t;
+const ee = (e) => typeof e == "function", de = (e) => !!e && e.constructor === Array;
+function it(e) {
+  const n = { nodes: {}, materials: {} };
+  return e && e.traverse((o) => {
+    o.name && (n.nodes[o.name] = o), o.material && !n.materials[o.material.name] && (n.materials[o.material.name] = o.material);
+  }), n;
 }
-async function Ct(e, t, n, a, o) {
-  const { logError: i } = O(), u = new e();
-  o && o(u), n && n(u);
-  const s = (Array.isArray(t) ? t : [t]).map(
-    (c) => new Promise((l, d) => {
-      u.load(
-        c,
-        (p) => {
-          p.scene && Object.assign(p, dt(p.scene)), l(p);
+async function xt(e, n, o, t, r) {
+  const { logError: i } = P(), c = new e();
+  r && r(c), o && o(c);
+  const s = (Array.isArray(n) ? n : [n]).map(
+    (u) => new Promise((l, p) => {
+      c.load(
+        u,
+        (d) => {
+          d.scene && Object.assign(d, it(d.scene)), l(d);
         },
-        a,
-        (p) => d(i("[useLoader] - Failed to load resource", p))
+        t,
+        (d) => p(i("[useLoader] - Failed to load resource", d))
       );
     })
   );
-  return ge(t) ? await Promise.all(s) : await s[0];
+  return de(n) ? await Promise.all(s) : await s[0];
 }
-async function Rt(e) {
-  const t = new Fe(), n = new Ne(t), a = (o) => new Promise((i, u) => {
-    n.load(
-      o,
-      (r) => i(r),
+async function ht(e) {
+  const n = new Ve(), o = new ze(n), t = (r) => new Promise((i, c) => {
+    o.load(
+      r,
+      (a) => i(a),
       () => null,
       () => {
-        u(new Error("[useTextures] - Failed to load texture"));
+        c(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (ge(e)) {
-    const o = await Promise.all(e.map((i) => a(i)));
-    return e.length > 1 ? o : o[0];
+  if (de(e)) {
+    const r = await Promise.all(e.map((i) => t(i)));
+    return e.length > 1 ? r : r[0];
   } else {
     const {
-      map: o,
+      map: r,
       displacementMap: i,
-      normalMap: u,
-      roughnessMap: r,
+      normalMap: c,
+      roughnessMap: a,
       metalnessMap: s,
-      aoMap: c,
+      aoMap: u,
       alphaMap: l,
-      matcap: d
+      matcap: p
     } = e;
     return {
-      map: o ? await a(o) : null,
-      displacementMap: i ? await a(i) : null,
-      normalMap: u ? await a(u) : null,
-      roughnessMap: r ? await a(r) : null,
-      metalnessMap: s ? await a(s) : null,
-      aoMap: c ? await a(c) : null,
-      alphaMap: l ? await a(l) : null,
-      matcap: d ? await a(d) : null
+      map: r ? await t(r) : null,
+      displacementMap: i ? await t(i) : null,
+      normalMap: c ? await t(c) : null,
+      roughnessMap: a ? await t(a) : null,
+      metalnessMap: s ? await t(s) : null,
+      aoMap: u ? await t(u) : null,
+      alphaMap: l ? await t(l) : null,
+      matcap: p ? await t(p) : null
     };
   }
 }
-const pt = (e) => {
-  const { state: t } = S(), n = G(() => {
+const w = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0e", "0f", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1a", "1b", "1c", "1d", "1e", "1f", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2a", "2b", "2c", "2d", "2e", "2f", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3a", "3b", "3c", "3d", "3e", "3f", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4a", "4b", "4c", "4d", "4e", "4f", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5a", "5b", "5c", "5d", "5e", "5f", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6a", "6b", "6c", "6d", "6e", "6f", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7a", "7b", "7c", "7d", "7e", "7f", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8a", "8b", "8c", "8d", "8e", "8f", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9a", "9b", "9c", "9d", "9e", "9f", "a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "aa", "ab", "ac", "ad", "ae", "af", "b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "ba", "bb", "bc", "bd", "be", "bf", "c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "ca", "cb", "cc", "cd", "ce", "cf", "d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9", "da", "db", "dc", "dd", "de", "df", "e0", "e1", "e2", "e3", "e4", "e5", "e6", "e7", "e8", "e9", "ea", "eb", "ec", "ed", "ee", "ef", "f0", "f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "fa", "fb", "fc", "fd", "fe", "ff"];
+function st() {
+  const e = Math.random() * 4294967295 | 0, n = Math.random() * 4294967295 | 0, o = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0;
+  return (w[e & 255] + w[e >> 8 & 255] + w[e >> 16 & 255] + w[e >> 24 & 255] + "-" + w[n & 255] + w[n >> 8 & 255] + "-" + w[n >> 16 & 15 | 64] + w[n >> 24 & 255] + "-" + w[o & 63 | 128] + w[o >> 8 & 255] + "-" + w[o >> 16 & 255] + w[o >> 24 & 255] + w[t & 255] + w[t >> 8 & 255] + w[t >> 16 & 255] + w[t >> 24 & 255]).toLowerCase();
+}
+const me = Symbol();
+function At() {
+  const e = ae({
+    uuid: st(),
+    camera: void 0,
+    cameras: [],
+    canvas: void 0,
+    scene: void 0,
+    renderer: void 0,
+    aspectRatio: void 0,
+    pointerEventHandler: void 0
+  });
+  function n(r) {
+    return e[r];
+  }
+  function o(r, i) {
+    e[r] = i;
+  }
+  const t = {
+    state: e,
+    ...ne(e),
+    getState: n,
+    setState: o
+  };
+  return oe(me, t), t;
+}
+const ct = () => re(me, {
+  state: ae({
+    camera: void 0,
+    cameras: [],
+    canvas: void 0,
+    scene: void 0,
+    renderer: void 0,
+    pointerEventHandler: void 0
+  })
+}), ut = (e) => {
+  const { state: n } = ct(), o = R(() => {
     var f;
-    return (f = t.canvas) == null ? void 0 : f.value;
-  }), { x: a, y: o } = Je({ target: n }), { width: i, height: u, top: r, left: s } = Xe(n), c = new ze(), l = ({ x: f, y: g }) => {
-    if (n.value)
+    return (f = n.canvas) == null ? void 0 : f.value;
+  }), { x: t, y: r } = Ue({ target: o }), { width: i, height: c, top: a, left: s } = Ye(o), u = new Ge(), l = ({ x: f, y: v }) => {
+    if (o.value)
       return {
         x: (f - s.value) / i.value * 2 - 1,
-        y: -((g - r.value) / u.value) * 2 + 1
+        y: -((v - a.value) / c.value) * 2 + 1
       };
-  }, d = ({ x: f, y: g }) => {
-    if (t.camera)
-      return c.setFromCamera(new We(f, g), t.camera), c.intersectObjects(e.value, !1);
-  }, p = (f) => {
-    const g = l({
-      x: (f == null ? void 0 : f.clientX) ?? a.value,
-      y: (f == null ? void 0 : f.clientY) ?? o.value
+  }, p = ({ x: f, y: v }) => {
+    if (n.camera)
+      return u.setFromCamera(new He(f, v), n.camera), u.intersectObjects(e.value, !1);
+  }, d = (f) => {
+    const v = l({
+      x: (f == null ? void 0 : f.clientX) ?? t.value,
+      y: (f == null ? void 0 : f.clientY) ?? r.value
     });
-    return g ? d(g) || [] : [];
-  }, y = G(() => p()), h = A(), v = A(), M = (f, g) => {
-    f.trigger({ event: g, intersects: p(g) });
-  }, w = (f) => {
-    M(v, f);
+    return v ? p(v) || [] : [];
+  }, M = R(() => d()), E = S(), b = S(), g = (f, v) => {
+    f.trigger({ event: v, intersects: d(v) });
+  }, y = (f) => {
+    g(b, f);
   };
-  let E;
-  const k = (f) => {
-    var g;
-    E = (g = p(f)[0]) == null ? void 0 : g.object;
-  }, x = (f) => {
-    var g;
-    f instanceof PointerEvent && E === ((g = p(f)[0]) == null ? void 0 : g.object) && M(h, f);
-  }, C = (f) => v.trigger({ event: f, intersects: [] }), F = fe(() => {
-    n != null && n.value && (n.value.addEventListener("pointerup", x), n.value.addEventListener("pointerdown", k), n.value.addEventListener("pointermove", w), n.value.addEventListener("pointerleave", C), F());
+  let _;
+  const L = (f) => {
+    var v;
+    _ = (v = d(f)[0]) == null ? void 0 : v.object;
+  }, O = (f) => {
+    var v;
+    f instanceof PointerEvent && _ === ((v = d(f)[0]) == null ? void 0 : v.object) && g(E, f);
+  }, k = (f) => b.trigger({ event: f, intersects: [] }), T = $(() => {
+    o != null && o.value && (o.value.addEventListener("pointerup", O), o.value.addEventListener("pointerdown", L), o.value.addEventListener("pointermove", y), o.value.addEventListener("pointerleave", k), T());
   });
-  return le(() => {
-    n != null && n.value && (n.value.removeEventListener("pointerup", x), n.value.removeEventListener("pointerdown", k), n.value.removeEventListener("pointermove", w), n.value.removeEventListener("pointerleave", C));
+  return ie(() => {
+    o != null && o.value && (o.value.removeEventListener("pointerup", O), o.value.removeEventListener("pointerdown", L), o.value.removeEventListener("pointermove", y), o.value.removeEventListener("pointerleave", k));
   }), {
-    intersects: y,
-    onClick: (f) => h.on(f).off,
-    onPointerMove: (f) => v.on(f).off
+    intersects: M,
+    onClick: (f) => E.on(f).off,
+    onPointerMove: (f) => b.on(f).off
   };
 };
-function Tt() {
-  const { logWarning: e } = O();
-  function t(a, o, i) {
-    let u = null;
-    return a.traverse((r) => {
-      r[o] === i && (u = r);
-    }), u || e(`Child with ${o} '${i}' not found.`), u;
+function Rt() {
+  const { logWarning: e } = P();
+  function n(t, r, i) {
+    let c = null;
+    return t.traverse((a) => {
+      a[r] === i && (c = a);
+    }), c || e(`Child with ${r} '${i}' not found.`), c;
   }
-  function n(a, o) {
-    return t(a, "name", o);
+  function o(t, r) {
+    return n(t, "name", r);
   }
   return {
-    seek: t,
-    seekByName: n
+    seek: n,
+    seekByName: o
   };
 }
-const mt = () => {
-  const e = Se({
+const St = () => {
+  const e = Ce({
     click: /* @__PURE__ */ new Map(),
     pointerMove: /* @__PURE__ */ new Map(),
     pointerEnter: /* @__PURE__ */ new Map(),
     pointerLeave: /* @__PURE__ */ new Map()
-  }), t = (r) => {
-    Object.values(e).forEach((s) => s.delete(r));
-  }, n = (r) => {
-    const { onClick: s, onPointerMove: c, onPointerEnter: l, onPointerLeave: d } = r;
-    s && e.click.set(r, s), c && e.pointerMove.set(r, c), l && e.pointerEnter.set(r, l), d && e.pointerLeave.set(r, d), r.addEventListener("removed", () => {
-      r.traverse((p) => {
-        t(p);
-      }), t(r);
+  }), n = (a) => {
+    Object.values(e).forEach((s) => s.delete(a));
+  }, o = (a) => {
+    const { onClick: s, onPointerMove: u, onPointerEnter: l, onPointerLeave: p } = a;
+    s && e.click.set(a, s), u && e.pointerMove.set(a, u), l && e.pointerEnter.set(a, l), p && e.pointerLeave.set(a, p), a.addEventListener("removed", () => {
+      a.traverse((d) => {
+        n(d);
+      }), n(a);
     });
-  }, a = G(
-    () => ft(
-      Object.values(e).map((r) => Array.from(r.keys())).flat(),
-      ({ uuid: r }) => r
+  }, t = R(
+    () => ot(
+      Object.values(e).map((a) => Array.from(a.keys())).flat(),
+      ({ uuid: a }) => a
     )
-  ), { onClick: o, onPointerMove: i } = pt(a);
-  o(({ intersects: r, event: s }) => {
-    var c;
-    r.length && ((c = e.click.get(r[0].object)) == null || c(r[0], s));
+  ), { onClick: r, onPointerMove: i } = ut(t);
+  r(({ intersects: a, event: s }) => {
+    var u;
+    a.length && ((u = e.click.get(a[0].object)) == null || u(a[0], s));
   });
-  let u;
-  return i(({ intersects: r, event: s }) => {
-    var y, h, v, M;
-    const c = (y = r == null ? void 0 : r[0]) == null ? void 0 : y.object, { pointerLeave: l, pointerEnter: d, pointerMove: p } = e;
-    u && u !== c && ((h = l.get(u)) == null || h(u, s)), c && (u !== c && ((v = d.get(c)) == null || v(r[0], s)), (M = p.get(c)) == null || M(r[0], s)), u = c || null;
+  let c;
+  return i(({ intersects: a, event: s }) => {
+    var M, E, b, g;
+    const u = (M = a == null ? void 0 : a[0]) == null ? void 0 : M.object, { pointerLeave: l, pointerEnter: p, pointerMove: d } = e;
+    c && c !== u && ((E = l.get(c)) == null || E(c, s)), u && (c !== u && ((b = p.get(u)) == null || b(a[0], s)), (g = d.get(u)) == null || g(a[0], s)), c = u || null;
   }), {
-    registerObject: n,
-    deregisterObject: t
+    registerObject: o,
+    deregisterObject: n
   };
-}, H = {
+}, { logError: ft } = P();
+function lt(e, n, o) {
+  var b;
+  e || ft("A scene most be provided to the TresProvider");
+  const { width: t, height: r } = m(o.windowSize) == !0 || m(o.windowSize) === "" || m(o.windowSize) === "true" || n.value === void 0 ? qe() : Ke((b = n.value) == null ? void 0 : b.parentElement), i = R(() => t.value / r.value), c = {
+    height: r,
+    width: t,
+    aspectRatio: i
+  }, a = A(e), { camera: s, cameras: u, addCamera: l, setCameraToActive: p } = Je(c), d = A(null);
+  function M(g) {
+    d.value || (d.value = g);
+  }
+  const E = {
+    scene: z(a),
+    cameras: z(u),
+    camera: s,
+    addCamera: l,
+    setCameraToActive: p,
+    renderer: z(d),
+    setRenderer: M,
+    sizes: c
+  };
+  return oe("useTres", E), E;
+}
+function Lt() {
+  const e = re("useTres");
+  if (!e)
+    throw new Error("useTresContext must be used within a TresProvider");
+  return e;
+}
+const pe = U({}), ve = (e) => void Object.assign(pe.value, e), F = {
   GEOMETRY_VIA_PROP: "tres__geometryViaProp",
   MATERIAL_VIA_PROP: "tres__materialViaProp",
   REGISTER_AT_POINTER_EVENT_HANDLER: "tres__registerAtPointerEventHandler"
 };
-let $ = null, T = null;
-const { logError: ie } = O(), vt = {
-  createElement(e, t, n, a) {
-    var s, c;
-    if (a || (a = {}), a.args || (a.args = []), e === "template" || ct(e))
+let N = null, x = null;
+const { logError: te } = P(), dt = {
+  createElement(e, n, o, t) {
+    var s, u;
+    if (t || (t = {}), t.args || (t.args = []), e === "template" || nt(e))
       return null;
-    let o = e.replace("Tres", ""), i;
+    let r = e.replace("Tres", ""), i;
     if (e === "primitive") {
-      (a == null ? void 0 : a.object) === void 0 && ie("Tres primitives need a prop 'object'");
-      const l = a.object;
-      o = l.type, i = Object.assign(l, { type: o, attach: a.attach, primitive: !0 });
+      (t == null ? void 0 : t.object) === void 0 && te("Tres primitives need a prop 'object'");
+      const l = t.object;
+      r = l.type, i = Object.assign(l, { type: r, attach: t.attach, primitive: !0 });
     } else {
-      const l = me.value[o];
-      l || ie(`${o} is not defined on the THREE namespace. Use extend to add it to the catalog.`), i = new l(...a.args);
+      const l = pe.value[r];
+      l || te(`${r} is not defined on the THREE namespace. Use extend to add it to the catalog.`), i = new l(...t.args);
     }
-    i.isCamera && (a != null && a.position || i.position.set(3, 3, 3), a != null && a.lookAt || i.lookAt(0, 0, 0)), (a == null ? void 0 : a.attach) === void 0 && (i.isMaterial ? i.attach = "material" : i.isBufferGeometry && (i.attach = "geometry"));
-    const { GEOMETRY_VIA_PROP: u, MATERIAL_VIA_PROP: r } = H;
-    return i.isObject3D && ((s = a == null ? void 0 : a.material) != null && s.isMaterial && (i.userData[r] = !0), (c = a == null ? void 0 : a.geometry) != null && c.isBufferGeometry && (i.userData[u] = !0)), i;
+    i.isCamera && (t != null && t.position || i.position.set(3, 3, 3), t != null && t.lookAt || i.lookAt(0, 0, 0)), (t == null ? void 0 : t.attach) === void 0 && (i.isMaterial ? i.attach = "material" : i.isBufferGeometry && (i.attach = "geometry"));
+    const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: a } = F;
+    return i.isObject3D && ((s = t == null ? void 0 : t.material) != null && s.isMaterial && (i.userData[a] = !0), (u = t == null ? void 0 : t.geometry) != null && u.isBufferGeometry && (i.userData[c] = !0)), i;
   },
-  insert(e, t) {
-    var n, a, o, i, u, r, s;
-    if (t && t.isScene && (T = t), (((n = e == null ? void 0 : e.__vnode) == null ? void 0 : n.type) === "TresGroup" || ((a = e == null ? void 0 : e.__vnode) == null ? void 0 : a.type) === "TresObject3D") && t === null && !((i = (o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.ctx) != null && i.asyncResolved)) {
-      $ = e;
+  insert(e, n) {
+    var o, t, r, i, c, a, s;
+    if (n && n.isScene && (x = n), (((o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.type) === "TresGroup" || ((t = e == null ? void 0 : e.__vnode) == null ? void 0 : t.type) === "TresObject3D") && n === null && !((i = (r = e == null ? void 0 : e.__vnode) == null ? void 0 : r.ctx) != null && i.asyncResolved)) {
+      N = e;
       return;
     } else
-      (u = e == null ? void 0 : e.__vnode) != null && u.type.includes("Controls") && t === null && ($ = T);
-    t || (t = $), e != null && e.isObject3D && (t != null && t.isObject3D) ? (t.add(e), e.dispatchEvent({ type: "added" }), (s = (r = T == null ? void 0 : T.userData) == null ? void 0 : r[H.REGISTER_AT_POINTER_EVENT_HANDLER]) == null || s.call(r, e)) : e != null && e.isFog ? t.fog = e : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[t == null ? void 0 : t.attach], t && (t[e.attach] = e));
+      (c = e == null ? void 0 : e.__vnode) != null && c.type.includes("Controls") && n === null && (N = x);
+    n || (n = N), e != null && e.isObject3D && (n != null && n.isObject3D) ? (n.add(e), e.dispatchEvent({ type: "added" }), (s = (a = x == null ? void 0 : x.userData) == null ? void 0 : a[F.REGISTER_AT_POINTER_EVENT_HANDLER]) == null || s.call(a, e)) : e != null && e.isFog ? n.fog = e : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[n == null ? void 0 : n.attach], n && (n[e.attach] = e));
   },
   remove(e) {
-    var t, n;
+    var n, o;
     if (e) {
       if (e.isObject3D) {
-        const a = e, o = (i) => {
-          var s, c;
-          const { GEOMETRY_VIA_PROP: u, MATERIAL_VIA_PROP: r } = H;
-          i.userData[r] || (s = i.material) == null || s.dispose(), i.userData[u] || (c = i.geometry) == null || c.dispose();
+        const t = e, r = (i) => {
+          var s, u;
+          const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: a } = F;
+          i.userData[a] || (s = i.material) == null || s.dispose(), i.userData[c] || (u = i.geometry) == null || u.dispose();
         };
-        a.traverse((i) => {
-          o(i);
-        }), o(a);
+        t.traverse((i) => {
+          r(i);
+        }), r(t);
       }
-      (t = e.removeFromParent) == null || t.call(e), (n = e.dispose) == null || n.call(e);
+      (n = e.removeFromParent) == null || n.call(e), (o = e.dispose) == null || o.call(e);
     }
   },
-  patchProp(e, t, n, a) {
+  patchProp(e, n, o, t) {
     if (e) {
-      let o = e, i = t, u = j(i), r = o == null ? void 0 : o[u];
-      if (o.type === "BufferGeometry") {
+      let r = e, i = n, c = B(i), a = r == null ? void 0 : r[c];
+      if (r.type === "BufferGeometry") {
         if (i === "args")
           return;
-        o.setAttribute(
-          j(i),
-          new Ue(...a)
+        r.setAttribute(
+          B(i),
+          new Fe(...t)
         );
         return;
       }
-      if (i.includes("-") && r === void 0) {
-        const c = i.split("-");
-        r = c.reduce((l, d) => l[j(d)], o), i = c.pop(), u = i.toLowerCase(), r != null && r.set || (o = c.reduce((l, d) => l[j(d)], o));
+      if (i.includes("-") && a === void 0) {
+        const u = i.split("-");
+        a = u.reduce((l, p) => l[B(p)], r), i = u.pop(), c = i.toLowerCase(), a != null && a.set || (r = u.reduce((l, p) => l[B(p)], r));
       }
-      let s = a;
-      if (s === "" && (s = !0), re(r)) {
-        Array.isArray(s) ? e[u](...s) : e[u](s);
+      let s = t;
+      if (s === "" && (s = !0), ee(a)) {
+        Array.isArray(s) ? e[c](...s) : e[c](s);
         return;
       }
-      !(r != null && r.set) && !re(r) ? o[u] = s : r.constructor === s.constructor && (r != null && r.copy) ? r == null || r.copy(s) : Array.isArray(s) ? r.set(...s) : !r.isColor && r.setScalar ? r.setScalar(s) : r.set(s);
+      !(a != null && a.set) && !ee(a) ? r[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) {
@@ -488,165 +486,120 @@ const { logError: ie } = O(), vt = {
   setScopeId: () => void 0,
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
-}, { createApp: gt } = Oe(vt), wt = (e) => {
-  const t = gt(n);
-  function n() {
+}, { createApp: mt } = Te(dt), pt = (e) => {
+  const n = mt(o);
+  function o() {
     return e && e.default ? e.default() : [];
   }
-  return t;
+  return n;
 };
-ve(q);
-const { logWarning: se } = O(), bt = de({
-  name: "TresScene",
-  props: [
-    "shadows",
-    "shadowMapType",
-    "physicallyCorrectLights",
-    "useLegacyLights",
-    "outputColorSpace",
-    "toneMapping",
-    "toneMappingExposure",
-    "context",
-    "powerPreference",
-    "preserveDrawingBuffer",
-    "clearColor",
-    "windowSize",
-    "preset",
-    "disableRender",
-    "camera"
-  ],
-  setup(e, { slots: t, expose: n }) {
-    e.physicallyCorrectLights === !0 && se("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const a = V(), o = V(), i = new q.Scene(), u = mt(), { setState: r } = S();
-    i.userData[H.REGISTER_AT_POINTER_EVENT_HANDLER] = u.registerObject, r("scene", i), r("canvas", o), r("container", a), r("pointerEventHandler", u);
-    const { onLoop: s, resume: c } = he();
-    ke(() => {
-      h();
-    }), le(() => {
-      r("renderer", null);
-    });
-    const { activeCamera: l, pushCamera: d, clearCameras: p } = at();
-    function y() {
-      const w = i.getObjectByProperty("isCamera", !0);
-      if (w)
-        d(w);
-      else {
-        se("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");
-        const E = new q.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1e3);
-        E.position.set(3, 3, 3), E.lookAt(0, 0, 0), d(E);
+ve(Se);
+const vt = ["data-scene"], gt = /* @__PURE__ */ Pe({
+  __name: "TresCanvas",
+  props: {
+    shadows: { type: Boolean },
+    shadowMapType: {},
+    useLegacyLights: { type: Boolean },
+    outputColorSpace: {},
+    toneMapping: {},
+    toneMappingExposure: {},
+    context: {},
+    powerPreference: {},
+    preserveDrawingBuffer: { type: Boolean },
+    clearColor: {},
+    windowSize: { type: Boolean },
+    preset: {},
+    disableRender: { type: Boolean },
+    camera: {}
+  },
+  setup(e) {
+    const n = e, { logWarning: o } = P(), t = U(), r = A(new Ne()), { onLoop: i } = fe(), c = _e();
+    function a() {
+      const s = lt(r.value, t, n), { addCamera: u, camera: l, clearCameras: p } = s;
+      let d;
+      function M() {
+        d = pt(c), d.provide("useTres", s), d.provide("extend", ve), d.mount(r.value), b();
       }
-    }
-    function h() {
-      const { renderer: w } = lt(e);
-      e.camera && d(e.camera), s(() => {
-        var E;
-        l.value && e.disableRender !== !0 && ((E = w.value) == null || E.render(i, l.value));
+      M();
+      const { renderer: E } = rt(t, s, n);
+      n.camera && u(n.camera), i(() => {
+        var g;
+        l.value && n.disableRender !== !0 && ((g = E.value) == null || g.render(r.value, l.value));
       });
-    }
-    let v;
-    function M() {
-      v = wt(t);
-      const w = S();
-      v.provide("useTres", w), v.provide(K, w), v.provide("extend", ve), v.mount(i), y();
-    }
-    return M(), n({
-      scene: i
-    }), D(
-      () => e.camera,
-      (w) => {
-        w && (p(), d(w));
-      }
-    ), () => L(
-      L(
-        "div",
-        {
-          ref: a,
-          "data-scene": i.uuid,
-          key: i.uuid,
-          style: {
-            position: "relative",
-            width: "100%",
-            height: "100%",
-            pointerEvents: "auto",
-            touchAction: "none"
+      function b() {
+        const g = r.value.getObjectByProperty("isCamera", !0);
+        if (g)
+          u(g);
+        else {
+          o("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");
+          const y = new se(45, window.innerWidth / window.innerHeight, 0.1, 1e3);
+          y.position.set(3, 3, 3), y.lookAt(0, 0, 0), u(y);
+        }
+        W(
+          () => n.camera,
+          (y) => {
+            y && (p(), u(y));
           }
-        },
-        [
-          L(
-            "div",
-            {
-              style: {
-                width: "100%",
-                height: "100%"
-              }
-            },
-            [
-              L("canvas", {
-                ref: o,
-                "data-scene": i.uuid,
-                style: {
-                  display: "block",
-                  width: "100%",
-                  height: "100%",
-                  position: e.windowSize ? "fixed" : "absolute",
-                  top: 0,
-                  left: 0
-                }
-              })
-            ]
-          )
-        ]
-      )
-    );
+        );
+      }
+    }
+    return xe(() => {
+      a();
+    }), ie(() => {
+    }), (s, u) => (he(), Ae("canvas", {
+      ref_key: "canvas",
+      ref: t,
+      "data-scene": r.value.uuid,
+      style: Re({
+        display: "block",
+        width: "100%",
+        height: "100%",
+        position: s.windowSize ? "fixed" : "relative",
+        top: 0,
+        left: 0,
+        pointerEvents: "auto",
+        touchAction: "none",
+        zIndex: 1
+      })
+    }, null, 12, vt));
   }
-}), ht = de({
-  name: "TresCanvas",
-  props: [
-    "shadows",
-    "shadowMapType",
-    "physicallyCorrectLights",
-    "useLegacyLights",
-    "outputColorSpace",
-    "toneMapping",
-    "toneMappingExposure",
-    "context",
-    "powerPreference",
-    "preserveDrawingBuffer",
-    "clearColor",
-    "windowSize",
-    "preset",
-    "disableRender",
-    "camera"
-  ],
-  setup(e, { slots: t, expose: n }) {
-    const a = Ze();
-    return n(a), () => L(bt, e, t);
+}), wt = [
+  "TresCanvas",
+  "TresLeches",
+  "TresScene"
+], bt = {
+  template: {
+    compilerOptions: {
+      isCustomElement: (e) => e.startsWith("Tres") && !wt.includes(e) || e === "primitive"
+    }
   }
-}), Lt = {
+}, Ot = bt, kt = {
   install(e) {
-    e.component("TresCanvas", ht);
+    e.component("TresCanvas", gt);
   }
 };
 export {
-  et as CameraType,
-  K as TRES_CONTEXT_KEY,
-  ht as TresCanvas,
-  me as catalogue,
-  Lt as default,
+  me as TRES_CONTEXT_KEY,
+  gt as TresCanvas,
+  pe as catalogue,
+  kt as default,
   ve as extend,
-  xt as isProd,
-  it as normalizeColor,
+  _t as isProd,
+  et as normalizeColor,
   Pt as normalizeVectorFlexibleParam,
-  dt as trasverseObjects,
-  at as useCamera,
-  Ct as useLoader,
-  O as useLogger,
-  mt as usePointerEventHandler,
-  pt as useRaycaster,
-  he as useRenderLoop,
-  lt as useRenderer,
-  Tt as useSeek,
-  Rt as useTexture,
-  S as useTres,
-  Ze as useTresProvider
+  Ot as templateCompilerOptions,
+  it as trasverseObjects,
+  Je as useCamera,
+  xt as useLoader,
+  P as useLogger,
+  St as usePointerEventHandler,
+  ut as useRaycaster,
+  fe as useRenderLoop,
+  rt as useRenderer,
+  Rt as useSeek,
+  ht as useTexture,
+  ct as useTres,
+  Lt as useTresContext,
+  lt as useTresContextProvider,
+  At as useTresProvider
 };