@tresjs/core 2.4.1 → 3.0.0

package/dist/tres.js

@@ -1,479 +1,473 @@
 /**
  * name: @tresjs/core
- * version: v2.4.1
+ * version: v3.0.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 se, toRefs as ce, provide as Re, inject as Te, watchEffect as ue, toRef as Le, shallowRef as Se, computed as z, watch as B, onUnmounted as fe, reactive as Ae, createRenderer as Oe, defineComponent as le, getCurrentInstance as ke, onMounted as Be, useSlots as je, openBlock as pe, createElementBlock as De, unref as F, createElementVNode as te, normalizeStyle as Ie, createBlock as He, normalizeProps as Ve, guardReactiveProps as ze, withCtx as Ge, renderSlot as Ne } from "vue";
-import * as Fe from "three";
-import { PerspectiveCamera as j, OrthographicCamera as We, Clock as de, Vector3 as $e, Color as W, SRGBColorSpace as Ue, ACESFilmicToneMapping as Ye, PCFSoftShadowMap as qe, PCFShadowMap as Ke, LinearSRGBColorSpace as ne, NoToneMapping as ae, WebGLRenderer as Je, LoadingManager as Xe, TextureLoader as Qe, Raycaster as Ze, Vector2 as et, BufferAttribute as tt, Scene as nt } from "three";
-import { createEventHook as S, useRafFn as at, toValue as m, useWindowSize as ot, useElementSize as rt, useDevicePixelRatio as it, unrefElement as $, usePointer as st, useElementBounding as ct } from "@vueuse/core";
-const me = V({}), ve = (e) => void Object.assign(me.value, e), oe = (e) => typeof e == "function", ge = (e) => !!e && e.constructor === Array, h = ["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 ut() {
-  const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, n = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0;
-  return (h[e & 255] + h[e >> 8 & 255] + h[e >> 16 & 255] + h[e >> 24 & 255] + "-" + h[t & 255] + h[t >> 8 & 255] + "-" + h[t >> 16 & 15 | 64] + h[t >> 24 & 255] + "-" + h[n & 63 | 128] + h[n >> 8 & 255] + "-" + h[n >> 16 & 255] + h[n >> 24 & 255] + h[a & 255] + h[a >> 8 & 255] + h[a >> 16 & 255] + h[a >> 24 & 255]).toLowerCase();
-}
-const q = Symbol();
-function ft() {
-  const e = se({
-    uuid: ut(),
-    camera: void 0,
-    cameras: [],
-    canvas: void 0,
-    scene: void 0,
-    renderer: void 0,
-    aspectRatio: void 0,
-    pointerEventHandler: void 0
-  });
-  function t(r) {
-    return e[r];
-  }
-  function n(r, s) {
-    e[r] = s;
-  }
-  const a = {
-    state: e,
-    ...ce(e),
-    getState: t,
-    setState: n
+import { ref as W, computed as _, watchEffect as b, onUnmounted as j, shallowRef as z, watch as J, reactive as re, readonly as ne, provide as ae, inject as oe, createRenderer as se, defineComponent as ie, useSlots as ue, onMounted as le, openBlock as ce, createElementBlock as fe, normalizeStyle as me } from "vue";
+import * as pe from "three";
+import { PerspectiveCamera as G, OrthographicCamera as ve, Camera as de, Clock as ge, SRGBColorSpace as we, ACESFilmicToneMapping as ye, PCFSoftShadowMap as Ce, Vector3 as Pe, Color as O, WebGLRenderer as H, LoadingManager as Me, TextureLoader as _e, Vector2 as Ee, Raycaster as xe, BufferAttribute as Le, Scene as Te } from "three";
+import { createEventHook as A, useRafFn as be, toValue as y, unrefElement as De, useDevicePixelRatio as Ae, usePointer as ke, useElementBounding as Se, useWindowSize as he, useElementSize as Be } from "@vueuse/core";
+const K = W({}), X = (e) => void Object.assign(K.value, e), I = (e) => typeof e == "function", Y = (e) => !!e && e.constructor === Array, Oe = ({ sizes: e, scene: a }) => {
+  const t = W([]), n = _(
+    () => t.value[0]
+  ), r = (o, s = !1) => {
+    t.value.some(({ uuid: u }) => u === o.uuid) || (s ? l(o) : t.value.push(o));
+  }, i = (o) => {
+    t.value = t.value.filter(({ uuid: s }) => s !== o.uuid);
+  }, l = (o) => {
+    const s = o instanceof de ? o : t.value.find((c) => c.uuid === o);
+    if (!s)
+      return;
+    const u = t.value.filter(({ uuid: c }) => c !== s.uuid);
+    t.value = [s, ...u];
   };
-  return Re(q, a), a;
-}
-const A = () => Te(q, {
-  state: se({
-    camera: void 0,
-    cameras: [],
-    canvas: void 0,
-    scene: void 0,
-    renderer: void 0,
-    pointerEventHandler: void 0
-  })
-});
-var lt = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(lt || {});
-const pt = 45;
-let R;
-function dt() {
-  const { state: e, setState: t, aspectRatio: n } = A();
-  function a(i = "Perspective", u) {
-    var l, d, p;
-    if (i === "Perspective") {
-      const { near: _, far: E, fov: b } = u || {
-        near: 0.1,
-        far: 1e3,
-        fov: pt
-      };
-      R = new j(b, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, _, E), (d = e.cameras) == null || d.push(R);
-    } else {
-      const { left: _, right: E, top: b, bottom: y, near: C, far: M } = u || {
-        left: -100,
-        right: 100,
-        top: 100,
-        bottom: -100,
-        near: 0.1,
-        far: 1e3
-      };
-      R = new We(_, E, b, y, C, M), (p = e.cameras) == null || p.push(R);
-    }
-    return e.camera = R, t("camera", e.camera), R;
-  }
-  function r() {
-    var i;
-    e.camera instanceof j && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (i = e.camera) == null || i.updateProjectionMatrix();
-  }
-  function s(i) {
-    var u;
-    (u = e.cameras) == null || u.push(i), i instanceof j && e.aspectRatio && (i.aspect = e.aspectRatio.value), i.updateProjectionMatrix(), t("camera", i);
-  }
-  function c(i) {
-    var u;
-    ((u = e.cameras) == null ? void 0 : u.length) === 0 && s(i);
-  }
-  function o() {
-    e.cameras = [];
-  }
-  return ue(() => {
-    n != null && n.value && r();
+  return b(() => {
+    e.aspectRatio.value && t.value.forEach((o) => {
+      o instanceof G && (o.aspect = e.aspectRatio.value), (o instanceof G || o instanceof ve) && o.updateProjectionMatrix();
+    });
+  }), a.userData.tres__registerCamera = r, a.userData.tres__deregisterCamera = i, j(() => {
+    t.value = [];
   }), {
-    activeCamera: Le(e, "camera"),
-    createCamera: a,
-    updateCamera: r,
-    pushCamera: s,
-    clearCameras: o,
-    setFirstCamera: c
+    camera: n,
+    cameras: t,
+    addCamera: r,
+    removeCamera: i,
+    setCameraActive: l
   };
-}
-const ye = S(), we = S(), K = S(), L = new de();
-let D = 0, I = 0;
-const { pause: mt, resume: vt, isActive: gt } = at(
+}, Q = A(), Z = A(), $ = A(), D = new ge();
+let R = 0, F = 0;
+const { pause: Re, resume: Fe, isActive: ze } = be(
   () => {
-    ye.trigger({ delta: D, elapsed: I, clock: L }), we.trigger({ delta: D, elapsed: I, clock: L }), K.trigger({ delta: D, elapsed: I, clock: L });
+    Q.trigger({ delta: R, elapsed: F, clock: D }), Z.trigger({ delta: R, elapsed: F, clock: D }), $.trigger({ delta: R, elapsed: F, clock: D });
   },
   { immediate: !1 }
 );
-K.on(() => {
-  D = L.getDelta(), I = L.getElapsedTime();
+$.on(() => {
+  R = D.getDelta(), F = D.getElapsedTime();
 });
-function he() {
-  return {
-    onBeforeLoop: ye.on,
-    onLoop: we.on,
-    onAfterLoop: K.on,
-    pause: mt,
-    resume: vt,
-    isActive: gt
-  };
-}
-function Vt(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof $e ? [e.x, e.y, e.z] : e;
-}
-function yt(e) {
-  return e instanceof W ? e : Array.isArray(e) ? new W(...e) : new W(e);
-}
-const U = {
+const ee = () => ({
+  onBeforeLoop: Q.on,
+  onLoop: Z.on,
+  onAfterLoop: $.on,
+  pause: Re,
+  resume: Fe,
+  isActive: ze
+}), h = {
   realistic: {
-    outputColorSpace: Ue,
-    toneMapping: Ye,
+    outputColorSpace: we,
+    toneMapping: ye,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: qe
+      type: Ce
     }
   }
-}, be = (e, t) => {
-  for (const n of Object.keys(t))
-    t[n] instanceof Object && Object.assign(t[n], be(e[n], t[n]));
-  return Object.assign(e || {}, t), e;
-}, wt = "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", ht = /* @__PURE__ */ bt(wt);
-function k(e) {
-  return e.replace(/-([a-z])/g, (t, n) => n.toUpperCase());
+}, te = (e, a) => {
+  for (const t of Object.keys(a))
+    a[t] instanceof Object && Object.assign(a[t], te(e[t], a[t]));
+  return Object.assign(e || {}, a), e;
+}, He = "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", Ve = /* @__PURE__ */ Ge(He);
+function B(e) {
+  return e.replace(/-([a-z])/g, (a, t) => t.toUpperCase());
 }
-function bt(e, t) {
-  const n = /* @__PURE__ */ Object.create(null), a = e.split(",");
-  for (let r = 0; r < a.length; r++)
-    n[a[r]] = !0;
-  return t ? (r) => !!n[r.toLowerCase()] : (r) => !!n[r];
+function Ge(e, a) {
+  const t = /* @__PURE__ */ Object.create(null), n = e.split(",");
+  for (let r = 0; r < n.length; r++)
+    t[n[r]] = !0;
+  return a ? (r) => !!t[r.toLowerCase()] : (r) => !!t[r];
 }
-const Et = (e, t) => {
-  const n = /* @__PURE__ */ new Set(), a = [];
+const We = (e, a) => {
+  const t = /* @__PURE__ */ new Set(), n = [];
   for (const r of e) {
-    const s = t(r);
-    n.has(s) || (n.add(s), a.push(r));
+    const i = a(r);
+    t.has(i) || (t.add(i), n.push(r));
   }
-  return a;
-}, zt = !0, re = "[TresJS ▲ ■ ●] ";
-function O() {
-  function e(a, r) {
-    console.error(`${re} ${a}`, r || "");
+  return n;
+}, N = (e, a) => {
+  if (!a)
+    return;
+  const t = Array.isArray(a) ? a : a.match(/([^[.\]])+/g);
+  return t == null ? void 0 : t.reduce((n, r) => n && n[r], e);
+}, je = (e, a, t) => {
+  const n = Array.isArray(a) ? a : a.match(/([^[.\]])+/g);
+  n && n.reduce((r, i, l) => (r[i] === void 0 && (r[i] = {}), l === n.length - 1 && (r[i] = t), r[i]), e);
+}, st = !0, q = "[TresJS ▲ ■ ●] ";
+function k() {
+  function e(n, r) {
+    console.error(`${q} ${n}`, r || "");
   }
-  function t(a) {
-    console.warn(`${re} ${a}`);
+  function a(n) {
+    console.warn(`${q} ${n}`);
   }
-  function n(a, r) {
+  function t(n, r) {
   }
   return {
     logError: e,
-    logWarning: t,
-    logMessage: n
+    logWarning: a,
+    logMessage: t
   };
 }
-function _t(e) {
-  const t = Se(), n = V(!1), {
-    alpha: a = !0,
-    antialias: r = !0,
-    depth: s,
-    logarithmicDepthBuffer: c,
-    failIfMajorPerformanceCaveat: o,
-    precision: i,
-    premultipliedAlpha: u,
-    stencil: l,
-    shadows: d = !1,
-    shadowMapType: p = Ke,
-    useLegacyLights: _ = !1,
-    outputColorSpace: E = ne,
-    toneMapping: b = ae,
-    toneMappingExposure: y = 1,
-    context: C = void 0,
-    powerPreference: M = "default",
-    preserveDrawingBuffer: g = !1,
-    clearColor: w,
-    windowSize: x = !1,
-    preset: G = void 0
-  } = ce(e), { state: f, setState: v } = A(), { width: J, height: X } = m(x) == !0 || m(x) === "" || m(x) === "true" ? ot() : rt(f.container), { logError: Ee, logWarning: _e } = O(), { pixelRatio: Q } = it(), { pause: Pe, resume: Ce } = he(), N = z(() => J.value / X.value);
-  setTimeout(() => {
-    var P;
-    !m(x) && !((P = f.canvas) != null && P.value.offsetHeight) && _e(`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 Z = () => {
-    t.value && (t.value.setSize(J.value, X.value), t.value.setPixelRatio(Math.min(Q.value, 2)));
-  }, ee = () => {
-    if (!t.value)
-      return;
-    const P = m(G);
-    if (P) {
-      P in U || Ee("Renderer Preset must be one of these: " + Object.keys(U).join(", ")), be(t.value, U[P]);
-      return;
-    }
-    t.value.shadowMap.enabled = m(d), t.value.shadowMap.type = m(p), t.value.toneMapping = m(b) || ae, t.value.toneMappingExposure = m(y), t.value.outputColorSpace = m(E) || ne, w != null && w.value && t.value.setClearColor(yt(m(w))), t.value.useLegacyLights = m(_);
-  }, Me = () => {
-    const P = $(f.canvas);
-    P && (t.value = new Je({
-      canvas: P,
-      alpha: m(a),
-      antialias: m(r),
-      context: m(C),
-      depth: m(s),
-      failIfMajorPerformanceCaveat: m(o),
-      logarithmicDepthBuffer: m(c),
-      powerPreference: m(M),
-      precision: m(i),
-      stencil: m(l),
-      preserveDrawingBuffer: m(g),
-      premultipliedAlpha: m(u)
-    }), v("renderer", t.value), v("clock", new de()), v("aspectRatio", N), ee(), Z(), Ce(), n.value = !0);
-  }, xe = () => {
-    t.value && (t.value.dispose(), t.value = void 0, n.value = !1, Pe());
-  };
-  return B([N, Q], Z), B(
-    [d, p, E, _, b, y, w],
-    ee
-  ), B(
-    () => [f.canvas, f.container],
-    () => {
-      $(f.canvas) && $(f.container) && Me();
-    },
-    { immediate: !0, deep: !0 }
-  ), {
-    renderer: t,
-    isReady: n,
-    dispose: xe,
-    aspectRatio: N
+function it(e) {
+  return typeof e == "number" ? [e, e, e] : e instanceof Pe ? [e.x, e.y, e.z] : e;
+}
+function $e(e) {
+  return e instanceof O ? e : Array.isArray(e) ? new O(...e) : new O(e);
+}
+function Ie({
+  scene: e,
+  canvas: a,
+  options: t,
+  disableRender: n,
+  contextParts: { sizes: r, camera: i }
+}) {
+  const l = _(() => ({
+    alpha: y(t.alpha),
+    depth: y(t.depth),
+    canvas: De(a),
+    context: y(t.context),
+    stencil: y(t.stencil),
+    antialias: y(t.antialias) === void 0 ? (
+      // an opinionated default of tres
+      !0
+    ) : y(t.antialias),
+    precision: y(t.precision),
+    powerPreference: y(t.powerPreference),
+    premultipliedAlpha: y(t.premultipliedAlpha),
+    preserveDrawingBuffer: y(t.preserveDrawingBuffer),
+    logarithmicDepthBuffer: y(t.logarithmicDepthBuffer),
+    failIfMajorPerformanceCaveat: y(t.failIfMajorPerformanceCaveat)
+  })), o = z(new H(l.value));
+  J(l, () => {
+    o.value.dispose(), o.value = new H(l.value);
+  }), b(() => {
+    o.value.setSize(r.width.value, r.height.value);
+  });
+  const { pixelRatio: s } = Ae();
+  b(() => {
+    o.value.setPixelRatio(s.value);
+  });
+  const { logError: u } = k(), f = (() => {
+    const p = new H(), d = {
+      shadowMap: {
+        enabled: p.shadowMap.enabled,
+        type: p.shadowMap.type
+      },
+      toneMapping: p.toneMapping,
+      toneMappingExposure: p.toneMappingExposure,
+      outputColorSpace: p.outputColorSpace,
+      useLegacyLights: p.useLegacyLights
+    };
+    return p.dispose(), d;
+  })();
+  b(() => {
+    const p = y(t.preset);
+    p && (p in h || u("Renderer Preset must be one of these: " + Object.keys(h).join(", ")), te(o.value, h[p]));
+    const d = (L, x) => {
+      const T = y(L), S = () => {
+        if (p)
+          return N(h[p], x);
+      };
+      if (T !== void 0)
+        return T;
+      const m = S();
+      return m !== void 0 ? m : N(f, x);
+    }, v = (L, x) => je(o.value, x, d(L, x));
+    v(t.shadows, "shadowMap.enabled"), v(t.toneMapping, "toneMapping"), v(t.shadowMapType, "shadowMap.type"), v(t.useLegacyLights, "useLegacyLights"), v(t.outputColorSpace, "outputColorSpace"), v(t.toneMappingExposure, "toneMappingExposure");
+    const E = d(t.clearColor, "clearColor");
+    E && o.value.setClearColor(
+      E ? $e(E) : new O(0)
+      // default clear color is not easily/efficiently retrievable from three
+    );
+  });
+  const { pause: w, resume: C, onLoop: M } = ee();
+  return M(() => {
+    i.value && !y(n) && o.value.render(e, i.value);
+  }), C(), j(() => {
+    w(), o.value.dispose(), o.value.forceContextLoss();
+  }), {
+    renderer: o
   };
 }
-function Pt(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;
+function Ne(e) {
+  const a = { nodes: {}, materials: {} };
+  return e && e.traverse((t) => {
+    t.name && (a.nodes[t.name] = t), t.material && !a.materials[t.material.name] && (a.materials[t.material.name] = t.material);
+  }), a;
 }
-async function Gt(e, t, n, a, r) {
-  const { logError: s } = O(), c = new e();
-  r && r(c), n && n(c);
-  const i = (Array.isArray(t) ? t : [t]).map(
-    (u) => new Promise((l, d) => {
-      c.load(
+async function ut(e, a, t, n, r) {
+  const { logError: i } = k(), l = new e();
+  r && r(l), t && t(l);
+  const s = (Array.isArray(a) ? a : [a]).map(
+    (u) => new Promise((c, f) => {
+      l.load(
         u,
-        (p) => {
-          p.scene && Object.assign(p, Pt(p.scene)), l(p);
+        (w) => {
+          w.scene && Object.assign(w, Ne(w.scene)), c(w);
         },
-        a,
-        (p) => d(s("[useLoader] - Failed to load resource", p))
+        n,
+        (w) => f(i("[useLoader] - Failed to load resource", w))
       );
     })
   );
-  return ge(t) ? await Promise.all(i) : await i[0];
+  return Y(a) ? await Promise.all(s) : await s[0];
 }
-async function Nt(e) {
-  const t = new Xe(), n = new Qe(t), a = (r) => new Promise((s, c) => {
-    n.load(
+async function lt(e) {
+  const a = new Me(), t = new _e(a), n = (r) => new Promise((i, l) => {
+    t.load(
       r,
-      (o) => s(o),
+      (o) => i(o),
       () => null,
       () => {
-        c(new Error("[useTextures] - Failed to load texture"));
+        l(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (ge(e)) {
-    const r = await Promise.all(e.map((s) => a(s)));
+  if (Y(e)) {
+    const r = await Promise.all(e.map((i) => n(i)));
     return e.length > 1 ? r : r[0];
   } else {
     const {
       map: r,
-      displacementMap: s,
-      normalMap: c,
+      displacementMap: i,
+      normalMap: l,
       roughnessMap: o,
-      metalnessMap: i,
+      metalnessMap: s,
       aoMap: u,
-      alphaMap: l,
-      matcap: d
+      alphaMap: c,
+      matcap: f
     } = e;
     return {
-      map: r ? await a(r) : null,
-      displacementMap: s ? await a(s) : null,
-      normalMap: c ? await a(c) : null,
-      roughnessMap: o ? await a(o) : null,
-      metalnessMap: i ? await a(i) : null,
-      aoMap: u ? await a(u) : null,
-      alphaMap: l ? await a(l) : null,
-      matcap: d ? await a(d) : null
+      map: r ? await n(r) : null,
+      displacementMap: i ? await n(i) : null,
+      normalMap: l ? await n(l) : null,
+      roughnessMap: o ? await n(o) : null,
+      metalnessMap: s ? await n(s) : null,
+      aoMap: u ? await n(u) : null,
+      alphaMap: c ? await n(c) : null,
+      matcap: f ? await n(f) : null
     };
   }
 }
-const Ct = (e) => {
-  const { state: t } = A(), n = z(() => {
-    var f;
-    return (f = t.canvas) == null ? void 0 : f.value;
-  }), { x: a, y: r } = st({ target: n }), { width: s, height: c, top: o, left: i } = ct(n), u = new Ze(), l = ({ x: f, y: v }) => {
-    if (n.value)
+const qe = (e, { renderer: a, camera: t, raycaster: n }) => {
+  const r = _(() => a.value.domElement), { x: i, y: l } = ke({ target: r }), { width: o, height: s, top: u, left: c } = Se(r), f = ({ x: m, y: P }) => {
+    if (r.value)
       return {
-        x: (f - i.value) / s.value * 2 - 1,
-        y: -((v - o.value) / c.value) * 2 + 1
+        x: (m - c.value) / o.value * 2 - 1,
+        y: -((P - u.value) / s.value) * 2 + 1
       };
-  }, d = ({ x: f, y: v }) => {
-    if (t.camera)
-      return u.setFromCamera(new et(f, v), t.camera), u.intersectObjects(e.value, !1);
-  }, p = (f) => {
-    const v = l({
-      x: (f == null ? void 0 : f.clientX) ?? a.value,
-      y: (f == null ? void 0 : f.clientY) ?? r.value
+  }, w = ({ x: m, y: P }) => {
+    if (t.value)
+      return n.value.setFromCamera(new Ee(m, P), t.value), n.value.intersectObjects(e.value, !1);
+  }, C = (m) => {
+    const P = f({
+      x: (m == null ? void 0 : m.clientX) ?? i.value,
+      y: (m == null ? void 0 : m.clientY) ?? l.value
     });
-    return v ? d(v) || [] : [];
-  }, _ = z(() => p()), E = S(), b = S(), y = (f, v) => {
-    f.trigger({ event: v, intersects: p(v) });
-  }, C = (f) => {
-    y(b, f);
+    return P ? w(P) || [] : [];
+  }, M = _(() => C()), p = A(), d = A(), v = (m, P) => {
+    m.trigger({ event: P, intersects: C(P) });
+  }, E = (m) => {
+    v(d, m);
   };
-  let M;
-  const g = (f) => {
-    var v;
-    M = (v = p(f)[0]) == null ? void 0 : v.object;
-  }, w = (f) => {
-    var v;
-    f instanceof PointerEvent && M === ((v = p(f)[0]) == null ? void 0 : v.object) && y(E, f);
-  }, x = (f) => b.trigger({ event: f, intersects: [] }), G = ue(() => {
-    n != null && n.value && (n.value.addEventListener("pointerup", w), n.value.addEventListener("pointerdown", g), n.value.addEventListener("pointermove", C), n.value.addEventListener("pointerleave", x), G());
-  });
-  return fe(() => {
-    n != null && n.value && (n.value.removeEventListener("pointerup", w), n.value.removeEventListener("pointerdown", g), n.value.removeEventListener("pointermove", C), n.value.removeEventListener("pointerleave", x));
+  let L;
+  const x = (m) => {
+    var P;
+    L = (P = C(m)[0]) == null ? void 0 : P.object;
+  }, T = (m) => {
+    var P;
+    m instanceof PointerEvent && L === ((P = C(m)[0]) == null ? void 0 : P.object) && v(p, m);
+  }, S = (m) => d.trigger({ event: m, intersects: [] });
+  return r.value.addEventListener("pointerup", T), r.value.addEventListener("pointerdown", x), r.value.addEventListener("pointermove", E), r.value.addEventListener("pointerleave", S), j(() => {
+    r != null && r.value && (r.value.removeEventListener("pointerup", T), r.value.removeEventListener("pointerdown", x), r.value.removeEventListener("pointermove", E), r.value.removeEventListener("pointerleave", S));
   }), {
-    intersects: _,
-    onClick: (f) => E.on(f).off,
-    onPointerMove: (f) => b.on(f).off
+    intersects: M,
+    onClick: (m) => p.on(m).off,
+    onPointerMove: (m) => d.on(m).off
   };
 };
-function Ft() {
-  const { logWarning: e } = O();
-  function t(a, r, s) {
-    let c = null;
-    return a.traverse((o) => {
-      o[r] === s && (c = o);
-    }), c || e(`Child with ${r} '${s}' not found.`), c;
+function ct() {
+  const { logWarning: e } = k();
+  function a(n, r, i) {
+    let l = null;
+    return n.traverse((o) => {
+      o[r] === i && (l = o);
+    }), l || e(`Child with ${r} '${i}' not found.`), l;
   }
-  function n(a, r) {
-    return t(a, "name", r);
+  function t(n, r) {
+    return a(n, "name", r);
   }
   return {
-    seek: t,
-    seekByName: n
+    seek: a,
+    seekByName: t
   };
 }
-const Mt = () => {
-  const e = Ae({
+const Ue = ({ scene: e, contextParts: a }) => {
+  const t = re({
     click: /* @__PURE__ */ new Map(),
     pointerMove: /* @__PURE__ */ new Map(),
     pointerEnter: /* @__PURE__ */ new Map(),
     pointerLeave: /* @__PURE__ */ new Map()
-  }), t = (o) => {
-    Object.values(e).forEach((i) => i.delete(o));
-  }, n = (o) => {
-    const { onClick: i, onPointerMove: u, onPointerEnter: l, onPointerLeave: d } = o;
-    i && e.click.set(o, i), u && e.pointerMove.set(o, u), l && e.pointerEnter.set(o, l), d && e.pointerLeave.set(o, d), o.addEventListener("removed", () => {
-      o.traverse((p) => {
-        t(p);
-      }), t(o);
-    });
-  }, a = z(
-    () => Et(
-      Object.values(e).map((o) => Array.from(o.keys())).flat(),
-      ({ uuid: o }) => o
+  }), n = (u) => {
+    Object.values(t).forEach((c) => c.delete(u));
+  }, r = (u) => {
+    const { onClick: c, onPointerMove: f, onPointerEnter: w, onPointerLeave: C } = u;
+    c && t.click.set(u, c), f && t.pointerMove.set(u, f), w && t.pointerEnter.set(u, w), C && t.pointerLeave.set(u, C);
+  };
+  e.userData.tres__registerAtPointerEventHandler = r, e.userData.tres__deregisterAtPointerEventHandler = n;
+  const i = _(
+    () => We(
+      Object.values(t).map((u) => Array.from(u.keys())).flat(),
+      ({ uuid: u }) => u
     )
-  ), { onClick: r, onPointerMove: s } = Ct(a);
-  r(({ intersects: o, event: i }) => {
-    var u;
-    o.length && ((u = e.click.get(o[0].object)) == null || u(o[0], i));
+  ), { onClick: l, onPointerMove: o } = qe(i, a);
+  l(({ intersects: u, event: c }) => {
+    var f;
+    u.length && ((f = t.click.get(u[0].object)) == null || f(u[0], c));
   });
-  let c;
-  return s(({ intersects: o, event: i }) => {
-    var _, E, b, y;
-    const u = (_ = o == null ? void 0 : o[0]) == null ? void 0 : _.object, { pointerLeave: l, pointerEnter: d, pointerMove: p } = e;
-    c && c !== u && ((E = l.get(c)) == null || E(c, i)), u && (c !== u && ((b = d.get(u)) == null || b(o[0], i)), (y = p.get(u)) == null || y(o[0], i)), c = u || null;
+  let s;
+  return o(({ intersects: u, event: c }) => {
+    var p, d, v, E;
+    const f = (p = u == null ? void 0 : u[0]) == null ? void 0 : p.object, { pointerLeave: w, pointerEnter: C, pointerMove: M } = t;
+    s && s !== f && ((d = w.get(s)) == null || d(s, c)), f && (s !== f && ((v = C.get(f)) == null || v(u[0], c)), (E = M.get(f)) == null || E(u[0], c)), s = f || null;
   }), {
-    registerObject: n,
-    deregisterObject: t
+    registerObject: r,
+    deregisterObject: n
   };
-}, H = {
-  GEOMETRY_VIA_PROP: "tres__geometryViaProp",
-  MATERIAL_VIA_PROP: "tres__materialViaProp",
-  REGISTER_AT_POINTER_EVENT_HANDLER: "tres__registerAtPointerEventHandler"
 };
-let Y = null, T = null;
-const { logError: ie } = O(), xt = {
-  createElement(e, t, n, a) {
-    var i, u;
-    if (a || (a = {}), a.args || (a.args = []), e === "template" || ht(e))
+function Je({
+  scene: e,
+  canvas: a,
+  windowSize: t,
+  disableRender: n,
+  rendererOptions: r
+}) {
+  const i = _(
+    () => y(t) ? he() : Be(y(a).parentElement)
+  ), l = _(() => i.value.width.value), o = _(() => i.value.height.value), s = _(() => l.value / o.value), u = {
+    height: o,
+    width: l,
+    aspectRatio: s
+  }, c = z(e), {
+    camera: f,
+    cameras: w,
+    addCamera: C,
+    removeCamera: M,
+    setCameraActive: p
+  } = Oe({ sizes: u, scene: e }), { renderer: d } = Ie(
+    {
+      scene: e,
+      canvas: a,
+      options: r,
+      contextParts: { sizes: u, camera: f },
+      disableRender: n
+    }
+  ), v = {
+    sizes: u,
+    scene: c,
+    camera: f,
+    cameras: ne(w),
+    renderer: d,
+    raycaster: z(new xe()),
+    addCamera: C,
+    removeCamera: M,
+    setCameraActive: p
+  };
+  return ae("useTres", v), v;
+}
+function Ke() {
+  const e = oe("useTres");
+  if (!e)
+    throw new Error("useTresContext must be used together with useTresContextProvider");
+  return e;
+}
+const ft = Ke;
+let V = null, g = null;
+const { logError: U } = k(), Xe = {
+  createElement(e, a, t, n) {
+    var l, o;
+    if (n || (n = {}), n.args || (n.args = []), e === "template" || Ve(e))
       return null;
-    let r = e.replace("Tres", ""), s;
+    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;
-      r = l.type, s = Object.assign(l, { type: r, attach: a.attach, primitive: !0 });
+      (n == null ? void 0 : n.object) === void 0 && U("Tres primitives need a prop 'object'");
+      const s = n.object;
+      r = s.type, i = Object.assign(s, { type: r, attach: n.attach, primitive: !0 });
     } else {
-      const l = me.value[r];
-      l || ie(`${r} is not defined on the THREE namespace. Use extend to add it to the catalog.`), s = new l(...a.args);
+      const s = K.value[r];
+      s || U(`${r} is not defined on the THREE namespace. Use extend to add it to the catalog.`), i = new s(...n.args);
     }
-    s.isCamera && (a != null && a.position || s.position.set(3, 3, 3), a != null && a.lookAt || s.lookAt(0, 0, 0)), (a == null ? void 0 : a.attach) === void 0 && (s.isMaterial ? s.attach = "material" : s.isBufferGeometry && (s.attach = "geometry"));
-    const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: o } = H;
-    return s.isObject3D && ((i = a == null ? void 0 : a.material) != null && i.isMaterial && (s.userData[o] = !0), (u = a == null ? void 0 : a.geometry) != null && u.isBufferGeometry && (s.userData[c] = !0)), s;
+    return i.isCamera && (n != null && n.position || i.position.set(3, 3, 3), n != null && n.lookAt || i.lookAt(0, 0, 0)), (n == null ? void 0 : n.attach) === void 0 && (i.isMaterial ? i.attach = "material" : i.isBufferGeometry && (i.attach = "geometry")), i.isObject3D && ((l = n == null ? void 0 : n.material) != null && l.isMaterial && (i.userData.tres__materialViaProp = !0), (o = n == null ? void 0 : n.geometry) != null && o.isBufferGeometry && (i.userData.tres__geometryViaProp = !0)), i;
   },
-  insert(e, t) {
-    var n, a, r, s, c, o, i;
-    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 && !((s = (r = e == null ? void 0 : e.__vnode) == null ? void 0 : r.ctx) != null && s.asyncResolved)) {
-      Y = e;
+  insert(e, a) {
+    var t, n, r, i, l, o, s, u, c;
+    if (a && a.isScene && (g = a), (((t = e == null ? void 0 : e.__vnode) == null ? void 0 : t.type) === "TresGroup" || ((n = e == null ? void 0 : e.__vnode) == null ? void 0 : n.type) === "TresObject3D") && a === null && !((i = (r = e == null ? void 0 : e.__vnode) == null ? void 0 : r.ctx) != null && i.asyncResolved)) {
+      V = e;
       return;
     } else
-      (c = e == null ? void 0 : e.__vnode) != null && c.type.includes("Controls") && t === null && (Y = T);
-    t || (t = Y), e != null && e.isObject3D && (t != null && t.isObject3D) ? (t.add(e), e.dispatchEvent({ type: "added" }), (i = (o = T == null ? void 0 : T.userData) == null ? void 0 : o[H.REGISTER_AT_POINTER_EVENT_HANDLER]) == null || i.call(o, 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));
+      (l = e == null ? void 0 : e.__vnode) != null && l.type.includes("Controls") && a === null && (V = g);
+    if (a || (a = V), e != null && e.isObject3D) {
+      if (e != null && e.isCamera) {
+        if (!(g != null && g.userData.tres__registerCamera))
+          throw "could not find tres__registerCamera on scene's userData";
+        (s = g == null ? void 0 : (o = g.userData).tres__registerCamera) == null || s.call(o, e);
+      }
+      if (e != null && e.onClick || e != null && e.onPointerMove || e != null && e.onPointerEnter || e != null && e.onPointerLeave) {
+        if (!(g != null && g.userData.tres__registerAtPointerEventHandler))
+          throw "could not find tres__registerAtPointerEventHandler on scene's userData";
+        (c = g == null ? void 0 : (u = g.userData).tres__registerAtPointerEventHandler) == null || c.call(u, e);
+      }
+    }
+    e != null && e.isObject3D && (a != null && a.isObject3D) ? (a.add(e), e.dispatchEvent({ type: "added" })) : e != null && e.isFog ? a.fog = e : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[a == null ? void 0 : a.attach], a && (a[e.attach] = e));
   },
   remove(e) {
-    var t, n;
+    var a, t;
     if (e) {
       if (e.isObject3D) {
-        const a = e, r = (s) => {
-          var i, u;
-          const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: o } = H;
-          s.userData[o] || (i = s.material) == null || i.dispose(), s.userData[c] || (u = s.geometry) == null || u.dispose();
+        const n = e, r = (s) => {
+          var c, f;
+          const u = s;
+          s.userData.tres__materialViaProp || (c = u.material) == null || c.dispose(), s.userData.tres__geometryViaProp || (f = u.geometry) == null || f.dispose();
+        }, i = g == null ? void 0 : g.userData.tres__deregisterAtPointerEventHandler, l = (s) => {
+          if (!i)
+            throw "could not find tres__deregisterAtPointerEventHandler on scene's userData";
+          (s != null && s.onClick || s != null && s.onPointerMove || s != null && s.onPointerEnter || s != null && s.onPointerLeave) && (i == null || i(s));
+        }, o = (s) => {
+          const u = g == null ? void 0 : g.userData.tres__deregisterCamera;
+          if (!u)
+            throw "could not find tres__deregisterCamera on scene's userData";
+          s.isCamera && (u == null || u(s));
         };
-        a.traverse((s) => {
-          r(s);
-        }), r(a);
+        n.traverse((s) => {
+          r(s), o(s), l == null || l(s);
+        }), r(n), o(n), l == null || l(n);
       }
-      (t = e.removeFromParent) == null || t.call(e), (n = e.dispose) == null || n.call(e);
+      (a = e.removeFromParent) == null || a.call(e), (t = e.dispose) == null || t.call(e);
     }
   },
-  patchProp(e, t, n, a) {
+  patchProp(e, a, t, n) {
     if (e) {
-      let r = e, s = t, c = k(s), o = r == null ? void 0 : r[c];
+      let r = e, i = a, l = B(i), o = r == null ? void 0 : r[l];
       if (r.type === "BufferGeometry") {
-        if (s === "args")
+        if (i === "args")
           return;
         r.setAttribute(
-          k(s),
-          new tt(...a)
+          B(i),
+          new Le(...n)
         );
         return;
       }
-      if (s.includes("-") && o === void 0) {
-        const u = s.split("-");
-        o = u.reduce((l, d) => l[k(d)], r), s = u.pop(), c = s.toLowerCase(), o != null && o.set || (r = u.reduce((l, d) => l[k(d)], r));
+      if (i.includes("-") && o === void 0) {
+        const u = i.split("-");
+        o = u.reduce((c, f) => c[B(f)], r), i = u.pop(), l = i.toLowerCase(), o != null && o.set || (r = u.reduce((c, f) => c[B(f)], r));
       }
-      let i = a;
-      if (i === "" && (i = !0), oe(o)) {
-        Array.isArray(i) ? e[c](...i) : e[c](i);
+      let s = n;
+      if (s === "" && (s = !0), I(o)) {
+        Array.isArray(s) ? e[l](...s) : e[l](s);
         return;
       }
-      !(o != null && o.set) && !oe(o) ? r[c] = i : o.constructor === i.constructor && (o != null && o.copy) ? o == null || o.copy(i) : Array.isArray(i) ? o.set(...i) : !o.isColor && o.setScalar ? o.setScalar(i) : o.set(i);
+      !(o != null && o.set) && !I(o) ? r[l] = s : o.constructor === s.constructor && (o != null && o.copy) ? o == null || o.copy(s) : Array.isArray(s) ? o.set(...s) : !o.isColor && o.setScalar ? o.setScalar(s) : o.set(s);
     }
   },
   parentNode(e) {
@@ -488,156 +482,127 @@ const { logError: ie } = O(), xt = {
   setScopeId: () => void 0,
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
-}, { createApp: Rt } = Oe(xt), Tt = (e) => {
-  const t = Rt(n);
-  function n() {
+}, { createApp: Ye } = se(Xe), Qe = (e) => {
+  const a = Ye(t);
+  function t() {
     return e && e.default ? e.default() : [];
   }
-  return t;
+  return a;
 };
-ve(Fe);
-const Lt = ["data-scene"], St = { style: { width: "100%", height: "100%" } }, At = ["data-scene"], Ot = /* @__PURE__ */ le({
-  __name: "TresScene",
+X(pe);
+const Ze = ["data-scene"], et = /* @__PURE__ */ ie({
+  __name: "TresCanvas",
   props: {
     shadows: { type: Boolean },
+    clearColor: {},
+    toneMapping: {},
     shadowMapType: {},
-    physicallyCorrectLights: { type: Boolean, default: !1 },
     useLegacyLights: { type: Boolean },
     outputColorSpace: {},
-    toneMapping: {},
     toneMappingExposure: {},
-    context: {},
-    powerPreference: {},
-    preserveDrawingBuffer: { type: Boolean },
-    clearColor: {},
     windowSize: { type: Boolean },
     preset: {},
     disableRender: { type: Boolean },
-    camera: {}
-  },
-  setup(e, { expose: t }) {
-    const n = e, { logWarning: a } = O();
-    n.physicallyCorrectLights === !0 && a("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const r = V(), s = V(), c = new nt(), o = Mt(), { setState: i } = A();
-    c.userData[H.REGISTER_AT_POINTER_EVENT_HANDLER] = o.registerObject, i("scene", c), i("canvas", s), i("container", r), i("pointerEventHandler", o), i("appContext", ke());
-    const { onLoop: u, resume: l } = he(), { activeCamera: d, pushCamera: p, clearCameras: _ } = dt();
-    Be(() => {
-      b();
-    }), fe(() => {
-      i("renderer", null);
-    });
-    function E() {
-      const g = c.getObjectByProperty("isCamera", !0);
-      if (g)
-        p(g);
-      else {
-        a("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");
-        const w = new j(45, window.innerWidth / window.innerHeight, 0.1, 1e3);
-        w.position.set(3, 3, 3), w.lookAt(0, 0, 0), p(w);
-      }
-    }
-    function b() {
-      const { renderer: g } = _t(n);
-      n.camera && p(n.camera), u(() => {
-        var w;
-        d.value && n.disableRender !== !0 && ((w = g.value) == null || w.render(c, d.value));
-      });
-    }
-    let y;
-    const C = je();
-    function M() {
-      y = Tt(C);
-      const g = A();
-      y.provide("useTres", g), y.provide(q, g), y.provide("extend", ve), y.mount(c), E();
-    }
-    return M(), t({
-      scene: c
-    }), B(
-      () => n.camera,
-      (g) => {
-        g && (_(), p(g));
-      }
-    ), (g, w) => (pe(), De("div", {
-      ref_key: "container",
-      ref: r,
-      key: F(c).uuid,
-      "data-scene": F(c).uuid,
-      style: { position: "relative", width: "100%", height: "100%", pointerEvents: "auto", touchAction: "none" }
-    }, [
-      te("div", St, [
-        te("canvas", {
-          ref_key: "canvas",
-          ref: s,
-          "data-scene": F(c).uuid,
-          style: Ie({ display: "block", width: "100%", height: "100%", position: g.windowSize ? "fixed" : "absolute", top: 0, left: 0 })
-        }, null, 12, At)
-      ])
-    ], 8, Lt));
-  }
-}), kt = /* @__PURE__ */ le({
-  __name: "TresCanvas",
-  props: {
-    shadows: { type: Boolean },
-    shadowMapType: {},
-    physicallyCorrectLights: { type: Boolean },
-    useLegacyLights: { type: Boolean },
-    outputColorSpace: {},
-    toneMapping: {},
-    toneMappingExposure: {},
+    camera: {},
     context: {},
+    precision: {},
+    alpha: { type: Boolean, default: !1 },
+    premultipliedAlpha: { type: Boolean },
+    antialias: { type: Boolean, default: !0 },
+    stencil: { type: Boolean, default: !0 },
+    preserveDrawingBuffer: { type: Boolean, default: !1 },
     powerPreference: {},
-    preserveDrawingBuffer: { type: Boolean },
-    clearColor: {},
-    windowSize: { type: Boolean },
-    preset: {},
-    disableRender: { type: Boolean },
-    camera: {}
+    depth: { type: Boolean, default: !0 },
+    logarithmicDepthBuffer: { type: Boolean },
+    failIfMajorPerformanceCaveat: { type: Boolean }
   },
-  setup(e, { expose: t }) {
-    const n = e, a = ft();
-    return t(a), (r, s) => (pe(), He(Ot, Ve(ze(n)), {
-      default: Ge(() => [
-        Ne(r.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
+  setup(e) {
+    const a = e, { logWarning: t } = k(), n = W(), r = z(new Te());
+    ee();
+    const i = ue();
+    let l;
+    const o = (u) => {
+      l = Qe(i), l.provide("useTres", u), l.provide("extend", X), l.mount(r.value);
+    }, s = _(() => a.disableRender);
+    return le(() => {
+      const u = n, c = Je({
+        scene: r.value,
+        canvas: u,
+        windowSize: a.windowSize,
+        disableRender: s,
+        rendererOptions: a
+      });
+      Ue({ scene: r.value, contextParts: c });
+      const { addCamera: f, camera: w, cameras: C, removeCamera: M } = c;
+      o(c);
+      const p = () => {
+        const d = new G(45, window.innerWidth / window.innerHeight, 0.1, 1e3);
+        d.position.set(3, 3, 3), d.lookAt(0, 0, 0), f(d);
+        const v = b(
+          () => {
+            C.value.length >= 2 && (d.removeFromParent(), M(d), v == null || v());
+          }
+        );
+      };
+      J(() => a.camera, (d, v) => {
+        d ? f(d) : v && (v.removeFromParent(), M(v));
+      }, {
+        immediate: !0
+      }), w.value || (t(
+        "No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."
+      ), p());
+    }), (u, c) => (ce(), fe("canvas", {
+      ref_key: "canvas",
+      ref: n,
+      "data-scene": r.value.uuid,
+      style: me({
+        display: "block",
+        width: "100%",
+        height: "100%",
+        position: u.windowSize ? "fixed" : "relative",
+        top: 0,
+        left: 0,
+        pointerEvents: "auto",
+        touchAction: "none",
+        zIndex: 1
+      })
+    }, null, 12, Ze));
   }
-}), Bt = [
+}), tt = [
   "TresCanvas",
   "TresLeches",
   "TresScene"
-], jt = {
+], rt = {
   template: {
     compilerOptions: {
-      isCustomElement: (e) => e.startsWith("Tres") && !Bt.includes(e) || e === "primitive"
+      isCustomElement: (e) => e.startsWith("Tres") && !tt.includes(e) || e === "primitive"
     }
   }
-}, Wt = jt, $t = {
+}, mt = rt, pt = {
   install(e) {
-    e.component("TresCanvas", kt);
+    e.component("TresCanvas", et);
   }
 };
 export {
-  lt as CameraType,
-  q as TRES_CONTEXT_KEY,
-  kt as TresCanvas,
-  me as catalogue,
-  $t as default,
-  ve as extend,
-  zt as isProd,
-  yt as normalizeColor,
-  Vt as normalizeVectorFlexibleParam,
-  Wt as templateCompilerOptions,
-  Pt as trasverseObjects,
-  dt as useCamera,
-  Gt as useLoader,
-  O as useLogger,
-  Mt as usePointerEventHandler,
-  Ct as useRaycaster,
-  he as useRenderLoop,
-  _t as useRenderer,
-  Ft as useSeek,
-  Nt as useTexture,
-  A as useTres,
-  ft as useTresProvider
+  et as TresCanvas,
+  K as catalogue,
+  pt as default,
+  X as extend,
+  st as isProd,
+  $e as normalizeColor,
+  it as normalizeVectorFlexibleParam,
+  mt as templateCompilerOptions,
+  Ne as trasverseObjects,
+  Oe as useCamera,
+  ut as useLoader,
+  k as useLogger,
+  Ue as usePointerEventHandler,
+  qe as useRaycaster,
+  ee as useRenderLoop,
+  Ie as useRenderer,
+  ct as useSeek,
+  lt as useTexture,
+  ft as useTres,
+  Ke as useTresContext,
+  Je as useTresContextProvider
 };