@tresjs/core 4.0.0-next.0 → 4.0.0-next.1

package/dist/tres.js

@@ -1,490 +1,640 @@
 /**
  * name: @tresjs/core
- * version: v4.0.0-next.0
- * (c) 2023
+ * version: v4.0.0-next.1
+ * (c) 2024
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-var Me = Object.defineProperty;
-var Pe = (e, r, t) => r in e ? Me(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
-var G = (e, r, t) => (Pe(e, typeof r != "symbol" ? r + "" : r, t), t);
-import { ref as B, computed as k, watchEffect as A, onUnmounted as U, shallowRef as D, watch as ie, reactive as le, readonly as Se, provide as Q, inject as ke, createRenderer as Te, defineComponent as Z, useSlots as Oe, getCurrentInstance as ee, onMounted as Ae, openBlock as xe, createElementBlock as De, normalizeClass as Le, normalizeStyle as Be, h as te, Fragment as je } from "vue";
-import * as ue from "three";
-import { PerspectiveCamera as Y, OrthographicCamera as Ie, Camera as Re, Clock as He, Vector3 as Ne, Color as N, MeshBasicMaterial as Ve, DoubleSide as $e, REVISION as Ue, SRGBColorSpace as Fe, ACESFilmicToneMapping as Ge, PCFSoftShadowMap as ze, WebGLRenderer as z, LoadingManager as We, TextureLoader as Qe, Vector2 as Ye, Raycaster as Je, BufferAttribute as Ke, Scene as qe } from "three";
-import { createEventHook as L, useRafFn as ce, toValue as E, unrefElement as Xe, useDevicePixelRatio as Ze, usePointer as et, useElementBounding as tt, useWindowSize as rt, useElementSize as nt, useFps as ot, useMemory as at } from "@vueuse/core";
-const st = ({ sizes: e, scene: r }) => {
-  const t = B([]), n = k(
-    () => t.value[0]
-  ), a = (i, l = !1) => {
-    t.value.some(({ uuid: c }) => c === i.uuid) || (l ? o(i) : t.value.push(i));
-  }, s = (i) => {
-    t.value = t.value.filter(({ uuid: l }) => l !== i.uuid);
-  }, o = (i) => {
-    const l = i instanceof Re ? i : t.value.find((m) => m.uuid === i);
+var He = Object.defineProperty;
+var Ne = (t, e, r) => e in t ? He(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var Y = (t, e, r) => (Ne(t, typeof e != "symbol" ? e + "" : e, r), r);
+import { ref as T, computed as x, watchEffect as se, onUnmounted as J, shallowRef as $, watch as I, reactive as be, readonly as Z, provide as ee, inject as Fe, defineComponent as le, useSlots as We, getCurrentInstance as ue, onMounted as Ue, openBlock as Ge, createElementBlock as ze, normalizeClass as Ve, unref as Je, normalizeStyle as Qe, createRenderer as Ye, h as ce, Fragment as qe } from "vue";
+import * as Me from "three";
+import { PerspectiveCamera as te, Camera as Ke, Clock as Xe, Vector3 as _e, Color as G, MeshBasicMaterial as Ee, DoubleSide as Ze, REVISION as et, SRGBColorSpace as tt, ACESFilmicToneMapping as Ce, PCFSoftShadowMap as rt, NoToneMapping as nt, WebGLRenderer as q, LoadingManager as ot, TextureLoader as st, Vector2 as it, Raycaster as at, BufferAttribute as lt, Scene as ut, Line as ct, BufferGeometry as de, Float32BufferAttribute as fe, LineBasicMaterial as dt, Mesh as ft, BackSide as pt, DirectionalLightHelper as mt, PointLightHelper as vt, SpotLightHelper as gt, HemisphereLightHelper as ht, ArrowHelper as yt } from "three";
+import { createEventHook as H, useRafFn as Se, toValue as M, unrefElement as wt, useDevicePixelRatio as bt, usePointer as Mt, useElementBounding as _t, useWindowSize as Et, useElementSize as Ct, refDebounced as pe, useFps as St, useMemory as xt } from "@vueuse/core";
+const kt = "@tresjs/core", Tt = "module", Pt = "4.0.0-next.1", At = "pnpm@8.10.2", Lt = "Declarative ThreeJS using Vue Components", Ot = "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)", Bt = "MIT", jt = [
+  "vue",
+  "3d",
+  "threejs",
+  "three",
+  "threejs-vue"
+], Dt = !1, It = {
+  ".": {
+    types: "./dist/index.d.ts",
+    require: "./dist/tres.umd.cjs",
+    import: "./dist/tres.js"
+  },
+  "./components": {
+    types: "./dist/components/index.d.ts"
+  },
+  "./composables": {
+    types: "./dist/composables/index.d.ts"
+  },
+  "./types": {
+    types: "./dist/types/index.d.ts"
+  },
+  "./utils": {
+    types: "./dist/utils/index.d.ts"
+  },
+  "./*": "./*"
+}, Rt = "./dist/tres.js", $t = "./dist/tres.js", Ht = "./dist/index.d.ts", Nt = [
+  "dist",
+  "*.d.ts"
+], Ft = {
+  access: "public"
+}, Wt = {
+  dev: "cd playground && npm run dev",
+  build: "vite build",
+  playground: "cd playground && npm run dev",
+  test: "vitest",
+  "test:ci": "vitest run",
+  "test:ui": "vitest --ui",
+  release: "release-it",
+  coverage: "vitest run --coverage",
+  lint: "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
+  "docs:dev": "vitepress dev docs",
+  "docs:build": "vitepress build docs",
+  "docs:serve": "vitepress serve docs",
+  "docs:preview": "vitepress preview docs",
+  "docs:contributors": "esno scripts/update-contributors.ts"
+}, Ut = {
+  three: ">=0.133",
+  vue: ">=3.4"
+}, Gt = {
+  "@alvarosabu/utils": "^3.1.1",
+  "@vueuse/core": "^10.7.1"
+}, zt = {
+  "@release-it/conventional-changelog": "^8.0.1",
+  "@stackblitz/sdk": "^1.9.0",
+  "@tresjs/cientos": "3.7.0",
+  "@tresjs/eslint-config-vue": "^0.2.1",
+  "@types/three": "^0.160.0",
+  "@typescript-eslint/eslint-plugin": "^6.17.0",
+  "@typescript-eslint/parser": "^6.17.0",
+  "@vitejs/plugin-vue": "^5.0.2",
+  "@vitest/coverage-c8": "^0.33.0",
+  "@vitest/ui": "^1.1.1",
+  "@vue/test-utils": "^2.4.3",
+  eslint: "^8.56.0",
+  "eslint-plugin-vue": "^9.19.2",
+  esno: "^4.0.0",
+  gsap: "^3.12.4",
+  jsdom: "^23.0.1",
+  kolorist: "^1.8.0",
+  ohmyfetch: "^0.4.21",
+  pathe: "^1.1.1",
+  "release-it": "^17.0.1",
+  "rollup-plugin-analyzer": "^4.0.0",
+  "rollup-plugin-copy": "^3.5.0",
+  "rollup-plugin-visualizer": "^5.12.0",
+  three: "^0.160.0",
+  unocss: "^0.58.3",
+  unplugin: "^1.6.0",
+  "unplugin-vue-components": "^0.26.0",
+  vite: "^5.0.10",
+  "vite-plugin-banner": "^0.7.1",
+  "vite-plugin-dts": "3.7.0",
+  "vite-plugin-inspect": "^0.8.1",
+  "vite-plugin-require-transform": "^1.0.21",
+  "vite-svg-loader": "^5.1.0",
+  vitepress: "1.0.0-rc.34",
+  vitest: "^1.1.1",
+  vue: "^3.4.3",
+  "vue-demi": "^0.14.6"
+}, Vt = {
+  name: kt,
+  type: Tt,
+  version: Pt,
+  packageManager: At,
+  description: Lt,
+  author: Ot,
+  license: Bt,
+  keywords: jt,
+  sideEffects: Dt,
+  exports: It,
+  main: Rt,
+  module: $t,
+  types: Ht,
+  files: Nt,
+  publishConfig: Ft,
+  scripts: Wt,
+  peerDependencies: Ut,
+  dependencies: Gt,
+  devDependencies: zt
+}, Jt = ({ sizes: t, scene: e }) => {
+  const r = T([]), s = x(
+    () => r.value[0]
+  ), o = (a, l = !1) => {
+    r.value.some(({ uuid: f }) => f === a.uuid) || (l ? n(a) : r.value.push(a));
+  }, i = (a) => {
+    r.value = r.value.filter(({ uuid: l }) => l !== a.uuid);
+  }, n = (a) => {
+    const l = a instanceof Ke ? a : r.value.find((c) => c.uuid === a);
     if (!l)
       return;
-    const c = t.value.filter(({ uuid: m }) => m !== l.uuid);
-    t.value = [l, ...c];
+    const f = r.value.filter(({ uuid: c }) => c !== l.uuid);
+    r.value = [l, ...f];
   };
-  return A(() => {
-    e.aspectRatio.value && t.value.forEach((i) => {
-      i instanceof Y && (i.aspect = e.aspectRatio.value), (i instanceof Y || i instanceof Ie) && i.updateProjectionMatrix();
+  return se(() => {
+    t.aspectRatio.value && r.value.forEach((a) => {
+      !a.manual && (a instanceof te || Qt(a)) && (a instanceof te ? a.aspect = t.aspectRatio.value : (a.left = t.width.value * -0.5, a.right = t.width.value * 0.5, a.top = t.height.value * 0.5, a.bottom = t.height.value * -0.5), a.updateProjectionMatrix());
     });
-  }), r.userData.tres__registerCamera = a, r.userData.tres__deregisterCamera = s, U(() => {
-    t.value = [];
+  }), J(() => {
+    r.value = [];
   }), {
-    camera: n,
-    cameras: t,
-    registerCamera: a,
-    deregisterCamera: s,
-    setCameraActive: o
+    camera: s,
+    cameras: r,
+    registerCamera: o,
+    deregisterCamera: i,
+    setCameraActive: n
   };
-}, fe = L(), de = L(), q = L(), x = new He();
-let V = 0, $ = 0;
-const { pause: it, resume: lt, isActive: ut } = ce(
+};
+function Qt(t) {
+  return t.hasOwnProperty("isOrthographicCamera") && t.isOrthographicCamera;
+}
+const xe = H(), ke = H(), ie = H(), R = new Xe();
+let z = 0, V = 0;
+const { pause: Yt, resume: qt, isActive: Kt } = Se(
   () => {
-    fe.trigger({ delta: V, elapsed: $, clock: x }), de.trigger({ delta: V, elapsed: $, clock: x }), q.trigger({ delta: V, elapsed: $, clock: x });
+    xe.trigger({ delta: z, elapsed: V, clock: R }), ke.trigger({ delta: z, elapsed: V, clock: R }), ie.trigger({ delta: z, elapsed: V, clock: R });
   },
   { immediate: !1 }
 );
-q.on(() => {
-  V = x.getDelta(), $ = x.getElapsedTime();
+ie.on(() => {
+  z = R.getDelta(), V = R.getElapsedTime();
 });
-const me = () => ({
-  onBeforeLoop: fe.on,
-  onLoop: de.on,
-  onAfterLoop: q.on,
-  pause: it,
-  resume: lt,
-  isActive: ut
-}), Zt = !0, re = "[TresJS ▲ ■ ●] ";
-function j() {
-  function e(n, a) {
-    console.error(`${re} ${n}`, a || "");
+const ae = () => ({
+  onBeforeLoop: xe.on,
+  onLoop: ke.on,
+  onAfterLoop: ie.on,
+  pause: Yt,
+  resume: qt,
+  isActive: Kt
+}), Wr = !0, me = "[TresJS ▲ ■ ●] ";
+function P() {
+  function t(s, o) {
+    console.error(`${me} ${s}`, o || "");
   }
-  function r(n) {
-    console.warn(`${re} ${n}`);
+  function e(s) {
+    console.warn(`${me} ${s}`);
   }
-  function t(n, a) {
+  function r(s, o) {
   }
   return {
-    logError: e,
-    logWarning: r,
-    logMessage: t
+    logError: t,
+    logWarning: e,
+    logMessage: r
   };
 }
-function er(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof Ne ? [e.x, e.y, e.z] : e;
+function Ur(t) {
+  return typeof t == "number" ? [t, t, t] : t instanceof _e ? [t.x, t.y, t.z] : t;
 }
-function ct(e) {
-  return e instanceof N ? e : Array.isArray(e) ? new N(...e) : new N(e);
+function Xt(t) {
+  return t instanceof G ? t : Array.isArray(t) ? new G(...t) : new G(t);
 }
-class ft extends ue.Mesh {
-  constructor(...t) {
-    super(...t);
-    G(this, "type", "HightlightMesh");
-    G(this, "createTime");
+class Zt extends Me.Mesh {
+  constructor(...r) {
+    super(...r);
+    Y(this, "type", "HightlightMesh");
+    Y(this, "createTime");
     this.createTime = Date.now();
   }
   onBeforeRender() {
-    const n = (Date.now() - this.createTime) / 1e3, o = 1 + 0.07 * Math.sin(2.5 * n);
-    this.scale.set(o, o, o);
+    const s = (Date.now() - this.createTime) / 1e3, n = 1 + 0.07 * Math.sin(2.5 * s);
+    this.scale.set(n, n, n);
   }
 }
-const pe = (e, r) => {
-  for (const t of Object.keys(r))
-    r[t] instanceof Object && Object.assign(r[t], pe(e[t], r[t]));
-  return Object.assign(e || {}, r), e;
-}, dt = "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", mt = /* @__PURE__ */ pt(dt);
-function ne(e) {
-  return e && e.nodeType === 1;
+const Te = (t, e) => {
+  for (const r of Object.keys(e))
+    e[r] instanceof Object && Object.assign(e[r], Te(t[r], e[r]));
+  return Object.assign(t || {}, e), t;
+}, er = "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", tr = /* @__PURE__ */ rr(er);
+function ve(t) {
+  return t && t.nodeType === 1;
 }
-function R(e) {
-  return e.replace(/-([a-z])/g, (r, t) => t.toUpperCase());
+function F(t) {
+  return t.replace(/-([a-z])/g, (e, r) => r.toUpperCase());
 }
-function pt(e, r) {
-  const t = /* @__PURE__ */ Object.create(null), n = e.split(",");
-  for (let a = 0; a < n.length; a++)
-    t[n[a]] = !0;
-  return r ? (a) => !!t[a.toLowerCase()] : (a) => !!t[a];
+function rr(t, e) {
+  const r = /* @__PURE__ */ Object.create(null), s = t.split(",");
+  for (let o = 0; o < s.length; o++)
+    r[s[o]] = !0;
+  return e ? (o) => !!r[o.toLowerCase()] : (o) => !!r[o];
 }
-const gt = (e, r) => {
-  const t = /* @__PURE__ */ new Set(), n = [];
-  for (const a of e) {
-    const s = r(a);
-    t.has(s) || (t.add(s), n.push(a));
+const nr = (t, e) => {
+  const r = /* @__PURE__ */ new Set(), s = [];
+  for (const o of t) {
+    const i = e(o);
+    r.has(i) || (r.add(i), s.push(o));
   }
-  return n;
-}, oe = (e, r) => {
-  if (!r)
+  return s;
+}, ge = (t, e) => {
+  if (!e)
     return;
-  const t = Array.isArray(r) ? r : r.match(/([^[.\]])+/g);
-  return t == null ? void 0 : t.reduce((n, a) => n && n[a], e);
-}, vt = (e, r, t) => {
-  const n = Array.isArray(r) ? r : r.match(/([^[.\]])+/g);
-  n && n.reduce((a, s, o) => (a[s] === void 0 && (a[s] = {}), o === n.length - 1 && (a[s] = t), a[s]), e);
+  const r = Array.isArray(e) ? e : e.match(/([^[.\]])+/g);
+  return r == null ? void 0 : r.reduce((s, o) => s && s[o], t);
+}, or = (t, e, r) => {
+  const s = Array.isArray(e) ? e : e.match(/([^[.\]])+/g);
+  s && s.reduce((o, i, n) => (o[i] === void 0 && (o[i] = {}), n === s.length - 1 && (o[i] = r), o[i]), t);
 };
-function ge(e, r) {
-  if (ne(e) && ne(r)) {
-    const a = e.attributes, s = r.attributes;
-    return a.length !== s.length ? !1 : Array.from(a).every(({ name: o, value: i }) => r.getAttribute(o) === i);
+function Pe(t, e) {
+  if (ve(t) && ve(e)) {
+    const o = t.attributes, i = e.attributes;
+    return o.length !== i.length ? !1 : Array.from(o).every(({ name: n, value: a }) => e.getAttribute(n) === a);
   }
-  if (e === r)
+  if (t === e)
     return !0;
-  if (e === null || typeof e != "object" || r === null || typeof r != "object")
+  if (t === null || typeof t != "object" || e === null || typeof e != "object")
     return !1;
-  const t = Object.keys(e), n = Object.keys(r);
-  if (t.length !== n.length)
+  const r = Object.keys(t), s = Object.keys(e);
+  if (r.length !== s.length)
     return !1;
-  for (const a of t)
-    if (!n.includes(a) || !ge(e[a], r[a]))
+  for (const o of r)
+    if (!s.includes(o) || !Pe(t[o], e[o]))
       return !1;
   return !0;
 }
-function ht(e, r) {
-  if (!Array.isArray(e) || !Array.isArray(r) || e.length !== r.length)
+function sr(t, e) {
+  if (!Array.isArray(t) || !Array.isArray(e) || t.length !== e.length)
     return !1;
-  for (let t = 0; t < e.length; t++)
-    if (!ge(e[t], r[t]))
+  for (let r = 0; r < t.length; r++)
+    if (!Pe(t[r], e[r]))
       return !1;
   return !0;
 }
-const yt = Array.isArray;
-function _t(e, r, t, n) {
-  const a = (l) => {
-    if (l.uuid === r)
+const ir = Array.isArray;
+function ar(t, e, r, s) {
+  const o = (l) => {
+    if (l.uuid === e)
       return l;
-    for (const c of l.children) {
-      const m = a(c);
-      if (m)
-        return m;
+    for (const f of l.children) {
+      const c = o(f);
+      if (c)
+        return c;
     }
-  }, s = a(e);
-  if (!s) {
+  }, i = o(t);
+  if (!i) {
     console.warn("Object with UUID not found in the scene.");
     return;
   }
-  let o = s;
-  for (let l = 0; l < t.length - 1; l++)
-    if (o[t[l]] !== void 0)
-      o = o[t[l]];
+  let n = i;
+  for (let l = 0; l < r.length - 1; l++)
+    if (n[r[l]] !== void 0)
+      n = n[r[l]];
     else {
-      console.warn(`Property path is not valid: ${t.join(".")}`);
+      console.warn(`Property path is not valid: ${r.join(".")}`);
       return;
     }
-  const i = t[t.length - 1];
-  o[i] !== void 0 ? o[i] = n : console.warn(`Property path is not valid: ${t.join(".")}`);
+  const a = r[r.length - 1];
+  n[a] !== void 0 ? n[a] = s : console.warn(`Property path is not valid: ${r.join(".")}`);
 }
-function wt(e) {
-  const r = new Ve({
+function lr(t) {
+  const e = new Ee({
     color: 11003607,
     // Highlight color, e.g., yellow
     transparent: !0,
     opacity: 0.2,
     depthTest: !1,
     // So the highlight is always visible
-    side: $e
+    side: Ze
     // To e
   });
-  return new ft(e.geometry.clone(), r);
+  return new Zt(t.geometry.clone(), e);
+}
+function Ae(t) {
+  var r;
+  let e = t.value;
+  return t.value && ((r = t.value) != null && r.isMesh) && (e = t.value.position), Array.isArray(t.value) && (e = new _e(...e)), e;
 }
-const bt = Number.parseInt(Ue.replace("dev", "")), H = {
+const ur = Number.parseInt(et.replace("dev", "")), W = {
   realistic: {
     shadows: !0,
     physicallyCorrectLights: !0,
-    outputColorSpace: Fe,
-    toneMapping: Ge,
+    outputColorSpace: tt,
+    toneMapping: Ce,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: ze
+      type: rt
     }
+  },
+  flat: {
+    toneMapping: nt,
+    toneMappingExposure: 1
   }
 };
-function Et({
-  scene: e,
-  canvas: r,
-  options: t,
-  disableRender: n,
-  contextParts: { sizes: a, camera: s }
+function cr({
+  scene: t,
+  canvas: e,
+  options: r,
+  disableRender: s,
+  emit: o,
+  contextParts: { sizes: i, camera: n, render: a, invalidate: l, advance: f }
 }) {
-  const o = k(() => ({
-    alpha: E(t.alpha),
-    depth: E(t.depth),
-    canvas: Xe(r),
-    context: E(t.context),
-    stencil: E(t.stencil),
-    antialias: E(t.antialias) === void 0 ? !0 : E(t.antialias),
-    precision: E(t.precision),
-    powerPreference: E(t.powerPreference),
-    premultipliedAlpha: E(t.premultipliedAlpha),
-    preserveDrawingBuffer: E(t.preserveDrawingBuffer),
-    logarithmicDepthBuffer: E(t.logarithmicDepthBuffer),
-    failIfMajorPerformanceCaveat: E(t.failIfMajorPerformanceCaveat)
-  })), i = D(new z(o.value));
-  ie(o, () => {
-    i.value.dispose(), i.value = new z(o.value);
-  }), A(() => {
-    i.value.setSize(a.width.value, a.height.value);
-  });
-  const { pixelRatio: l } = Ze();
-  A(() => {
-    i.value.setPixelRatio(l.value);
+  const c = x(() => ({
+    alpha: M(r.alpha) ?? !0,
+    depth: M(r.depth),
+    canvas: wt(e),
+    context: M(r.context),
+    stencil: M(r.stencil),
+    antialias: M(r.antialias) ?? !0,
+    precision: M(r.precision),
+    powerPreference: M(r.powerPreference),
+    premultipliedAlpha: M(r.premultipliedAlpha),
+    preserveDrawingBuffer: M(r.preserveDrawingBuffer),
+    logarithmicDepthBuffer: M(r.logarithmicDepthBuffer),
+    failIfMajorPerformanceCaveat: M(r.failIfMajorPerformanceCaveat)
+  })), u = $(new q(c.value));
+  function d() {
+    r.renderMode === "on-demand" && l();
+  }
+  I(c, () => {
+    u.value.dispose(), u.value = new q(c.value), d();
+  }), I([i.width, i.height], () => {
+    u.value.setSize(i.width.value, i.height.value), d();
+  }, {
+    immediate: !0
+  }), I(() => r.clearColor, d);
+  const { pixelRatio: p } = bt();
+  I(p, () => {
+    u.value.setPixelRatio(p.value);
   });
-  const { logError: c } = j(), f = (() => {
-    const d = new z(), y = {
+  const { logError: h } = P(), { resume: _, onLoop: y } = ae();
+  y(() => {
+    n.value && !M(s) && a.frames.value > 0 && (u.value.render(t, n.value), o("render", u.value)), a.priority.value = 0, M(r.renderMode) === "always" ? a.frames.value = 1 : a.frames.value = Math.max(0, a.frames.value - 1);
+  }), _();
+  const g = (() => {
+    const w = new q(), m = {
       shadowMap: {
-        enabled: d.shadowMap.enabled,
-        type: d.shadowMap.type
+        enabled: w.shadowMap.enabled,
+        type: w.shadowMap.type
       },
-      toneMapping: d.toneMapping,
-      toneMappingExposure: d.toneMappingExposure,
-      outputColorSpace: d.outputColorSpace
+      toneMapping: w.toneMapping,
+      toneMappingExposure: w.toneMappingExposure,
+      outputColorSpace: w.outputColorSpace
     };
-    return d.dispose(), y;
-  })();
-  A(() => {
-    const d = E(t.preset);
-    d && (d in H || c(`Renderer Preset must be one of these: ${Object.keys(H).join(", ")}`), pe(i.value, H[d]));
-    const y = (M, P) => {
-      const w = E(M), S = () => {
-        if (d)
-          return oe(H[d], P);
+    return w.dispose(), m;
+  })(), E = M(r.renderMode);
+  return E === "on-demand" && l(), E === "manual" && setTimeout(() => {
+    f();
+  }, 1), se(() => {
+    const w = M(r.preset);
+    w && (w in W || h(`Renderer Preset must be one of these: ${Object.keys(W).join(", ")}`), Te(u.value, W[w])), E === "always" && (a.frames.value = Math.max(1, a.frames.value));
+    const m = (L, A) => {
+      const O = M(L), Q = () => {
+        if (w)
+          return ge(W[w], A);
       };
-      if (w !== void 0)
-        return w;
-      const v = S();
-      return v !== void 0 ? v : oe(f, P);
-    }, p = (M, P) => vt(i.value, P, y(M, P));
-    p(t.shadows, "shadowMap.enabled"), p(t.toneMapping, "toneMapping"), p(t.shadowMapType, "shadowMap.type"), bt < 150 && p(!t.useLegacyLights, "physicallyCorrectLights"), p(t.outputColorSpace, "outputColorSpace"), p(t.toneMappingExposure, "toneMappingExposure");
-    const C = y(t.clearColor, "clearColor");
-    C && i.value.setClearColor(
-      C ? ct(C) : new N(0)
+      if (O !== void 0)
+        return O;
+      const N = Q();
+      return N !== void 0 ? N : ge(g, A);
+    }, v = (L, A) => or(u.value, A, m(L, A));
+    v(r.shadows, "shadowMap.enabled"), v(r.toneMapping ?? Ce, "toneMapping"), v(r.shadowMapType, "shadowMap.type"), ur < 150 && v(!r.useLegacyLights, "physicallyCorrectLights"), v(r.outputColorSpace, "outputColorSpace"), v(r.toneMappingExposure, "toneMappingExposure");
+    const C = m(r.clearColor, "clearColor");
+    C && u.value.setClearColor(
+      C ? Xt(C) : new G(0)
       // default clear color is not easily/efficiently retrievable from three
     );
-  });
-  const { pause: u, resume: g, onLoop: _ } = me();
-  return _(() => {
-    s.value && !E(n) && i.value.render(e, s.value);
-  }), g(), U(() => {
-    u(), i.value.dispose(), i.value.forceContextLoss();
+  }), J(() => {
+    u.value.dispose(), u.value.forceContextLoss();
   }), {
-    renderer: i
+    renderer: u
   };
 }
-const ae = (e) => typeof e == "function", Ct = (e) => !!e && e.constructor === Array;
-function Mt(e) {
-  const r = { nodes: {}, materials: {} };
-  return e && e.traverse((t) => {
-    t.name && (r.nodes[t.name] = t), t.material && !r.materials[t.material.name] && (r.materials[t.material.name] = t.material);
-  }), r;
+const K = (t) => typeof t == "function", dr = (t) => !!t && t.constructor === Array;
+function fr(t) {
+  const e = { nodes: {}, materials: {} };
+  return t && t.traverse((r) => {
+    r.name && (e.nodes[r.name] = r), r.material && !e.materials[r.material.name] && (e.materials[r.material.name] = r.material);
+  }), e;
 }
-async function tr(e, r, t, n, a) {
-  const { logError: s } = j(), o = new e();
-  a && a(o), t && t(o);
-  const l = (Array.isArray(r) ? r : [r]).map(
-    (c) => new Promise((m, f) => {
-      o.load(
-        c,
-        (u) => {
-          u.scene && Object.assign(u, Mt(u.scene)), m(u);
+async function Gr(t, e, r, s, o) {
+  const { logError: i } = P(), n = new t();
+  o && o(n), r && r(n);
+  const l = (Array.isArray(e) ? e : [e]).map(
+    (f) => new Promise((c, u) => {
+      n.load(
+        f,
+        (d) => {
+          d.scene && Object.assign(d, fr(d.scene)), c(d);
         },
-        n,
-        (u) => f(s("[useLoader] - Failed to load resource", u))
+        s,
+        (d) => u(i("[useLoader] - Failed to load resource", d))
       );
     })
   );
-  return Ct(r) ? await Promise.all(l) : await l[0];
+  return dr(e) ? await Promise.all(l) : await l[0];
 }
-async function rr(e) {
-  const r = new We(), t = new Qe(r), n = (a) => new Promise((s, o) => {
-    t.load(
-      a,
-      (i) => s(i),
+async function zr(t) {
+  const e = new ot(), r = new st(e), s = (o) => new Promise((i, n) => {
+    r.load(
+      o,
+      (a) => i(a),
       () => null,
       () => {
-        o(new Error("[useTextures] - Failed to load texture"));
+        n(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (yt(e)) {
-    const a = await Promise.all(e.map((s) => n(s)));
-    return e.length > 1 ? a : a[0];
+  if (ir(t)) {
+    const o = await Promise.all(t.map((i) => s(i)));
+    return t.length > 1 ? o : o[0];
   } else {
     const {
-      map: a,
-      displacementMap: s,
-      normalMap: o,
-      roughnessMap: i,
+      map: o,
+      displacementMap: i,
+      normalMap: n,
+      roughnessMap: a,
       metalnessMap: l,
-      aoMap: c,
-      alphaMap: m,
-      matcap: f
-    } = e;
+      aoMap: f,
+      alphaMap: c,
+      matcap: u
+    } = t;
     return {
-      map: a ? await n(a) : null,
-      displacementMap: s ? await n(s) : null,
-      normalMap: o ? await n(o) : null,
-      roughnessMap: i ? await n(i) : null,
-      metalnessMap: l ? await n(l) : null,
-      aoMap: c ? await n(c) : null,
-      alphaMap: m ? await n(m) : null,
-      matcap: f ? await n(f) : null
+      map: o ? await s(o) : null,
+      displacementMap: i ? await s(i) : null,
+      normalMap: n ? await s(n) : null,
+      roughnessMap: a ? await s(a) : null,
+      metalnessMap: l ? await s(l) : null,
+      aoMap: f ? await s(f) : null,
+      alphaMap: c ? await s(c) : null,
+      matcap: u ? await s(u) : null
     };
   }
 }
-const Pt = (e, { renderer: r, camera: t, raycaster: n }) => {
-  const a = k(() => r.value.domElement), { x: s, y: o } = et({ target: a }), { width: i, height: l, top: c, left: m } = tt(a), f = ({ x: v, y: b }) => {
-    if (a.value)
+const pr = (t, e) => {
+  const r = x(() => e.renderer.value.domElement), { x: s, y: o } = Mt({ target: r }), { width: i, height: n, top: a, left: l } = _t(r), f = ({ x: m, y: v }) => {
+    if (r.value)
       return {
-        x: (v - m.value) / i.value * 2 - 1,
-        y: -((b - c.value) / l.value) * 2 + 1
+        x: (m - l.value) / i.value * 2 - 1,
+        y: -((v - a.value) / n.value) * 2 + 1
       };
-  }, u = ({ x: v, y: b }) => {
-    if (t.value)
-      return n.value.setFromCamera(new Ye(v, b), t.value), n.value.intersectObjects(e.value, !1);
-  }, g = (v) => {
-    const b = f({
-      x: (v == null ? void 0 : v.clientX) ?? s.value,
-      y: (v == null ? void 0 : v.clientY) ?? o.value
+  }, c = ({ x: m, y: v }) => {
+    if (e.camera.value)
+      return e.raycaster.value.setFromCamera(new it(m, v), e.camera.value), e.raycaster.value.intersectObjects(t.value, !1);
+  }, u = (m) => {
+    const v = f({
+      x: (m == null ? void 0 : m.clientX) ?? s.value,
+      y: (m == null ? void 0 : m.clientY) ?? o.value
     });
-    return b ? u(b) || [] : [];
-  }, _ = k(() => g()), d = L(), y = L(), p = (v, b) => {
-    v.trigger({ event: b, intersects: g(b) });
-  }, C = (v) => {
-    p(y, v);
+    return v ? c(v) || [] : [];
+  }, d = x(() => u()), p = H(), h = H(), _ = (m, v) => {
+    m.trigger({ event: v, intersects: u(v) });
+  }, y = (m) => {
+    _(h, m);
   };
-  let M;
-  const P = (v) => {
-    var b;
-    M = (b = g(v)[0]) == null ? void 0 : b.object;
-  }, w = (v) => {
-    var b;
-    v instanceof PointerEvent && M === ((b = g(v)[0]) == null ? void 0 : b.object) && p(d, v);
-  }, S = (v) => y.trigger({ event: v, intersects: [] });
-  return a.value.addEventListener("pointerup", w), a.value.addEventListener("pointerdown", P), a.value.addEventListener("pointermove", C), a.value.addEventListener("pointerleave", S), U(() => {
-    a != null && a.value && (a.value.removeEventListener("pointerup", w), a.value.removeEventListener("pointerdown", P), a.value.removeEventListener("pointermove", C), a.value.removeEventListener("pointerleave", S));
+  let b;
+  const g = (m) => {
+    var v;
+    b = (v = u(m)[0]) == null ? void 0 : v.object;
+  }, E = (m) => {
+    var v;
+    m instanceof PointerEvent && b === ((v = u(m)[0]) == null ? void 0 : v.object) && _(p, m);
+  }, w = (m) => h.trigger({ event: m, intersects: [] });
+  return r.value.addEventListener("pointerup", E), r.value.addEventListener("pointerdown", g), r.value.addEventListener("pointermove", y), r.value.addEventListener("pointerleave", w), J(() => {
+    r != null && r.value && (r.value.removeEventListener("pointerup", E), r.value.removeEventListener("pointerdown", g), r.value.removeEventListener("pointermove", y), r.value.removeEventListener("pointerleave", w));
   }), {
-    intersects: _,
-    onClick: (v) => d.on(v).off,
-    onPointerMove: (v) => y.on(v).off
+    intersects: d,
+    onClick: (m) => p.on(m).off,
+    onPointerMove: (m) => h.on(m).off
   };
 };
-function nr() {
-  const { logWarning: e } = j();
-  function r(s, o, i) {
+function Vr() {
+  const { logWarning: t } = P();
+  function e(i, n, a) {
     let l = null;
-    return s.traverse((c) => {
-      c[o] === i && (l = c);
-    }), l || e(`Child with ${o} '${i}' not found.`), l;
+    return i.traverse((f) => {
+      f[n] === a && (l = f);
+    }), l || t(`Child with ${n} '${a}' not found.`), l;
   }
-  function t(s, o, i) {
+  function r(i, n, a) {
     const l = [];
-    return s.traverse((c) => {
-      c[o].includes(i) && l.push(c);
-    }), l.length || e(`Children with ${o} '${i}' not found.`), l;
+    return i.traverse((f) => {
+      f[n].includes(a) && l.push(f);
+    }), l.length || t(`Children with ${n} '${a}' not found.`), l;
   }
-  function n(s, o) {
-    return r(s, "name", o);
+  function s(i, n) {
+    return e(i, "name", n);
   }
-  function a(s, o) {
-    return t(s, "name", o);
+  function o(i, n) {
+    return r(i, "name", n);
   }
   return {
-    seek: r,
-    seekByName: n,
-    seekAll: t,
-    seekAllByName: a
+    seek: e,
+    seekByName: s,
+    seekAll: r,
+    seekAllByName: o
   };
 }
-const St = ({ scene: e, contextParts: r }) => {
-  const t = le({
+const mr = (t) => {
+  const e = be({
     click: /* @__PURE__ */ new Map(),
     pointerMove: /* @__PURE__ */ new Map(),
     pointerEnter: /* @__PURE__ */ new Map(),
     pointerLeave: /* @__PURE__ */ new Map()
-  }), n = B(/* @__PURE__ */ new Set()), a = (u) => {
-    n.value.add(u);
-  }, s = (u) => {
-    n.value.delete(u);
+  }), r = T(/* @__PURE__ */ new Set()), s = (u) => {
+    r.value.add(u);
   }, o = (u) => {
-    Object.values(t).forEach((g) => g.delete(u)), s(u);
+    r.value.delete(u);
   }, i = (u) => {
-    const { onClick: g, onPointerMove: _, onPointerEnter: d, onPointerLeave: y } = u;
-    g && t.click.set(u, g), _ && t.pointerMove.set(u, _), d && t.pointerEnter.set(u, d), y && t.pointerLeave.set(u, y);
-  };
-  e.userData.tres__registerAtPointerEventHandler = i, e.userData.tres__deregisterAtPointerEventHandler = o, e.userData.tres__registerBlockingObjectAtPointerEventHandler = a, e.userData.tres__deregisterBlockingObjectAtPointerEventHandler = s;
-  const l = k(
-    () => gt(
+    Object.values(e).forEach((d) => d.delete(u)), o(u);
+  }, n = (u) => {
+    const { onClick: d, onPointerMove: p, onPointerEnter: h, onPointerLeave: _ } = u;
+    d && e.click.set(u, d), p && e.pointerMove.set(u, p), h && e.pointerEnter.set(u, h), _ && e.pointerLeave.set(u, _);
+  }, a = x(
+    () => nr(
       [
-        ...Array.from(n.value),
-        ...Object.values(t).map((u) => Array.from(u.keys())).flat()
+        ...Array.from(r.value),
+        ...Object.values(e).map((u) => Array.from(u.keys())).flat()
       ],
       ({ uuid: u }) => u
     )
-  ), { onClick: c, onPointerMove: m } = Pt(l, r);
-  c(({ intersects: u, event: g }) => {
-    var _;
-    u.length && ((_ = t.click.get(u[0].object)) == null || _(u[0], g));
+  );
+  t.registerObjectAtPointerEventHandler = n, t.deregisterObjectAtPointerEventHandler = i, t.registerBlockingObjectAtPointerEventHandler = s, t.deregisterBlockingObjectAtPointerEventHandler = o;
+  const { onClick: l, onPointerMove: f } = pr(a, t);
+  l(({ intersects: u, event: d }) => {
+    var p;
+    u.length && ((p = e.click.get(u[0].object)) == null || p(u[0], d));
   });
-  let f;
-  return m(({ intersects: u, event: g }) => {
-    var C, M, P, w;
-    const _ = (C = u == null ? void 0 : u[0]) == null ? void 0 : C.object, { pointerLeave: d, pointerEnter: y, pointerMove: p } = t;
-    f && f !== _ && ((M = d.get(f)) == null || M(f, g)), _ && (f !== _ && ((P = y.get(_)) == null || P(u[0], g)), (w = p.get(_)) == null || w(u[0], g)), f = _ || null;
+  let c;
+  return f(({ intersects: u, event: d }) => {
+    var b, g, E, w;
+    const p = (b = u == null ? void 0 : u[0]) == null ? void 0 : b.object, { pointerLeave: h, pointerEnter: _, pointerMove: y } = e;
+    c && c !== p && ((g = h.get(c)) == null || g(c, d)), p && (c !== p && ((E = _.get(p)) == null || E(u[0], d)), (w = y.get(p)) == null || w(u[0], d)), c = p || null;
   }), {
-    registerObject: i,
-    deregisterObject: o
+    registerObject: n,
+    deregisterObject: i,
+    registerBlockingObject: s,
+    deregisterBlockingObject: o
   };
 };
-function ve(e) {
-  let r = 0;
-  return e.traverse((t) => {
-    if (t.isMesh && t.geometry) {
-      const n = t.geometry, a = n.attributes.position.count * 3 * Float32Array.BYTES_PER_ELEMENT, s = n.index ? n.index.count * Uint32Array.BYTES_PER_ELEMENT : 0, o = n.attributes.normal ? n.attributes.normal.count * 3 * Float32Array.BYTES_PER_ELEMENT : 0, i = n.attributes.uv ? n.attributes.uv.count * 2 * Float32Array.BYTES_PER_ELEMENT : 0, l = a + s + o + i;
-      r += l;
+function Le(t) {
+  let e = 0;
+  return t.traverse((r) => {
+    if (r.isMesh && r.geometry) {
+      const s = r.geometry, o = s.attributes.position.count * 3 * Float32Array.BYTES_PER_ELEMENT, i = s.index ? s.index.count * Uint32Array.BYTES_PER_ELEMENT : 0, n = s.attributes.normal ? s.attributes.normal.count * 3 * Float32Array.BYTES_PER_ELEMENT : 0, a = s.attributes.uv ? s.attributes.uv.count * 2 * Float32Array.BYTES_PER_ELEMENT : 0, l = o + i + n + a;
+      e += l;
     }
-  }), r;
+  }), e;
 }
-function kt(e) {
-  return (e / 1024).toFixed(2);
+function vr(t) {
+  return (t / 1024).toFixed(2);
 }
-const J = B({}), X = (e) => Object.assign(J.value, e);
-function Tt({
-  scene: e,
-  canvas: r,
-  windowSize: t,
-  disableRender: n,
-  rendererOptions: a
-}) {
-  const s = k(
-    () => E(t) ? rt() : nt(E(r).parentElement)
-  ), o = k(() => s.value.width.value), i = k(() => s.value.height.value), l = k(() => o.value / i.value), c = {
+const re = T({}), ne = (t) => Object.assign(re.value, t);
+function gr(t, e, r = 10) {
+  const s = M(t) ? Et() : Ct(x(() => M(e).parentElement)), o = Z(pe(s.width, r)), i = Z(pe(s.height, r)), n = x(() => o.value / i.value);
+  return {
     height: i,
     width: o,
-    aspectRatio: l
-  }, m = D(e), {
+    aspectRatio: n
+  };
+}
+function hr({
+  scene: t,
+  canvas: e,
+  windowSize: r,
+  disableRender: s,
+  rendererOptions: o,
+  emit: i
+}) {
+  const { logWarning: n } = P(), a = $(t), l = gr(r, e), {
     camera: f,
-    cameras: u,
-    registerCamera: g,
-    deregisterCamera: _,
-    setCameraActive: d
-  } = st({ sizes: c, scene: e }), { renderer: y } = Et(
+    cameras: c,
+    registerCamera: u,
+    deregisterCamera: d,
+    setCameraActive: p
+  } = Jt({ sizes: l, scene: t }), h = {
+    mode: T(o.renderMode || "always"),
+    priority: T(0),
+    frames: T(0),
+    maxFrames: 60,
+    canBeInvalidated: x(() => h.mode.value === "on-demand" && h.frames.value === 0)
+  };
+  function _(B = 1) {
+    o.renderMode === "on-demand" ? h.frames.value = Math.min(h.maxFrames, h.frames.value + B) : n("`invalidate` can only be used when `renderMode` is set to `on-demand`");
+  }
+  function y() {
+    o.renderMode === "manual" ? h.frames.value = 1 : n("`advance` can only be used when `renderMode` is set to `manual`");
+  }
+  const { renderer: b } = cr(
     {
-      scene: e,
-      canvas: r,
-      options: a,
-      contextParts: { sizes: c, camera: f },
-      disableRender: n
+      scene: t,
+      canvas: e,
+      options: o,
+      emit: i,
+      // TODO: replace contextParts with full ctx at https://github.com/Tresjs/tres/issues/516
+      contextParts: { sizes: l, camera: f, render: h, invalidate: _, advance: y },
+      disableRender: s
     }
-  ), p = {
-    sizes: c,
-    scene: m,
+  ), g = {
+    sizes: l,
+    scene: a,
     camera: f,
-    cameras: Se(u),
-    renderer: y,
-    raycaster: D(new Je()),
-    controls: B(null),
+    cameras: Z(c),
+    renderer: b,
+    raycaster: $(new at()),
+    controls: T(null),
     perf: {
       maxFrames: 160,
       fps: {
@@ -497,432 +647,454 @@ function Tt({
         accumulator: []
       }
     },
-    extend: X,
-    registerCamera: g,
-    setCameraActive: d,
-    deregisterCamera: _
+    render: h,
+    advance: y,
+    extend: ne,
+    invalidate: _,
+    registerCamera: u,
+    setCameraActive: p,
+    deregisterCamera: d
   };
-  Q("useTres", p);
-  const C = 100, M = ot({ every: C }), { isSupported: P, memory: w } = at({ interval: C }), S = 160;
-  let v = performance.now();
-  const b = ({ timestamp: I }) => {
-    p.scene.value && (p.perf.memory.allocatedMem = ve(p.scene.value)), I - v >= C && (v = I, p.perf.fps.accumulator.push(M.value), p.perf.fps.accumulator.length > S && p.perf.fps.accumulator.shift(), p.perf.fps.value = M.value, P.value && w.value && (p.perf.memory.accumulator.push(w.value.usedJSHeapSize / 1024 / 1024), p.perf.memory.accumulator.length > S && p.perf.memory.accumulator.shift(), p.perf.memory.currentMem = p.perf.memory.accumulator.reduce((Ee, Ce) => Ee + Ce, 0) / p.perf.memory.accumulator.length));
+  ee("useTres", g), g.scene.value.__tres = {
+    root: g
   };
-  let F = 0;
-  const we = 1, { pause: be, resume: Yt } = ce(({ delta: I }) => {
-    window.__TRES__DEVTOOLS__ && (b({ timestamp: performance.now() }), F += I, F >= we && (window.__TRES__DEVTOOLS__.cb(p), F = 0));
+  const E = 100, w = St({ every: E }), { isSupported: m, memory: v } = xt({ interval: E }), C = 160;
+  let L = performance.now();
+  const A = ({ timestamp: B }) => {
+    g.scene.value && (g.perf.memory.allocatedMem = Le(g.scene.value)), B - L >= E && (L = B, g.perf.fps.accumulator.push(w.value), g.perf.fps.accumulator.length > C && g.perf.fps.accumulator.shift(), g.perf.fps.value = w.value, m.value && v.value && (g.perf.memory.accumulator.push(v.value.usedJSHeapSize / 1024 / 1024), g.perf.memory.accumulator.length > C && g.perf.memory.accumulator.shift(), g.perf.memory.currentMem = g.perf.memory.accumulator.reduce((Re, $e) => Re + $e, 0) / g.perf.memory.accumulator.length));
+  };
+  let O = 0;
+  const Q = 1, { pause: N } = Se(({ delta: B }) => {
+    window.__TRES__DEVTOOLS__ && (A({ timestamp: performance.now() }), O += B, O >= Q && (window.__TRES__DEVTOOLS__.cb(g), O = 0));
   }, { immediate: !0 });
-  return U(() => {
-    be();
-  }), p;
+  return J(() => {
+    N();
+  }), g;
 }
-function Ot() {
-  const e = ke("useTres");
-  if (!e)
+function yr() {
+  const t = Fe("useTres");
+  if (!t)
     throw new Error("useTresContext must be used together with useTresContextProvider");
-  return e;
+  return t;
 }
-const or = Ot;
-let h = null;
-const { logError: se } = j(), W = [
+const Jr = yr;
+const { logError: he } = P(), X = [
   "onClick",
   "onPointerMove",
   "onPointerEnter",
   "onPointerLeave"
-], At = {
-  createElement(e, r, t, n) {
-    var o, i;
-    if (n || (n = {}), n.args || (n.args = []), e === "template" || mt(e))
-      return null;
-    let a = e.replace("Tres", ""), s;
-    if (e === "primitive") {
-      (n == null ? void 0 : n.object) === void 0 && se("Tres primitives need a prop 'object'");
-      const l = n.object;
-      a = l.type, s = Object.assign(l, { type: a, attach: n.attach, primitive: !0 });
-    } else {
-      const l = J.value[a];
-      l || se(`${a} is not defined on the THREE namespace. Use extend to add it to the catalog.`), s = new l(...n.args);
-    }
-    return s.isCamera && (n != null && n.position || s.position.set(3, 3, 3), n != null && n.lookAt || s.lookAt(0, 0, 0)), (n == null ? void 0 : n.attach) === void 0 && (s.isMaterial ? s.attach = "material" : s.isBufferGeometry && (s.attach = "geometry")), s.isObject3D && ((o = n == null ? void 0 : n.material) != null && o.isMaterial && (s.userData.tres__materialViaProp = !0), (i = n == null ? void 0 : n.geometry) != null && i.isBufferGeometry && (s.userData.tres__geometryViaProp = !0)), s.userData = {
-      ...s.userData,
-      tres__name: a
-    }, s;
-  },
-  insert(e, r) {
-    var n, a, s, o;
-    r && r.isScene && (h = r);
-    const t = r || h;
-    if (e != null && e.isObject3D) {
-      if (e != null && e.isCamera) {
-        if (!(h != null && h.userData.tres__registerCamera))
-          throw "could not find tres__registerCamera on scene's userData";
-        (a = h == null ? void 0 : (n = h.userData).tres__registerCamera) == null || a.call(n, e);
+];
+function ye(t) {
+  const e = t.__tres.root;
+  e && e.render && e.render.canBeInvalidated.value && e.invalidate();
+}
+const Oe = () => {
+  let t = null;
+  return {
+    createElement(e, r, s, o) {
+      if (o || (o = {}), o.args || (o.args = []), e === "template" || tr(e))
+        return null;
+      let i = e.replace("Tres", ""), n;
+      if (e === "primitive") {
+        (o == null ? void 0 : o.object) === void 0 && he("Tres primitives need a prop 'object'");
+        const a = o.object;
+        i = a.type, n = Object.assign(a.clone(), { type: i });
+      } else {
+        const a = re.value[i];
+        a || he(`${i} is not defined on the THREE namespace. Use extend to add it to the catalog.`), n = new a(...o.args);
       }
-      if (e && W.some((i) => e[i])) {
-        if (!(h != null && h.userData.tres__registerAtPointerEventHandler))
-          throw "could not find tres__registerAtPointerEventHandler on scene's userData";
-        (o = h == null ? void 0 : (s = h.userData).tres__registerAtPointerEventHandler) == null || o.call(s, e);
+      return n ? (n.isCamera && (o != null && o.position || n.position.set(3, 3, 3), o != null && o.lookAt || n.lookAt(0, 0, 0)), (o == null ? void 0 : o.attach) === void 0 && (n.isMaterial ? n.attach = "material" : n.isBufferGeometry && (n.attach = "geometry")), n.__tres = {
+        ...n.__tres,
+        type: i,
+        memoizedProps: o,
+        eventCount: 0,
+        disposable: !0,
+        primitive: e === "primitive"
+      }, n.isObject3D && (o != null && o.material || o != null && o.geometry) && (n.__tres.disposable = !1), n) : null;
+    },
+    insert(e, r) {
+      if (!e)
+        return;
+      r && r.isScene && (t = r), t && (e.__tres.root = t.__tres.root);
+      const s = r || t;
+      if (e != null && e.isObject3D) {
+        const { registerCamera: o, registerObjectAtPointerEventHandler: i } = e.__tres.root;
+        e != null && e.isCamera && o(e), e && X.some((n) => e[n]) && i(e);
       }
-    }
-    e != null && e.isObject3D && (t != null && t.isObject3D) ? (t.add(e), e.dispatchEvent({ type: "added" })) : 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));
-  },
-  remove(e) {
-    var r, t;
-    if (e) {
+      e != null && e.isObject3D && (s != null && s.isObject3D) ? (s.add(e), e.dispatchEvent({ type: "added" })) : e != null && e.isFog ? s.fog = e : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[s == null ? void 0 : s.attach], s && (s[e.attach] = e));
+    },
+    remove(e) {
+      var i, n;
+      if (!e)
+        return;
+      const r = e.__tres;
+      e.parent = e.parent || t;
+      const {
+        deregisterObjectAtPointerEventHandler: s,
+        deregisterBlockingObjectAtPointerEventHandler: o
+      } = r.root;
       if (e.isObject3D) {
-        const n = e, a = (c) => {
-          var f, u;
-          const m = c;
-          c.userData.tres__materialViaProp || ((f = m.material) == null || f.dispose(), m.material = void 0), c.userData.tres__geometryViaProp || ((u = m.geometry) == null || u.dispose(), m.geometry = void 0);
-        }, s = h == null ? void 0 : h.userData.tres__deregisterAtPointerEventHandler, o = h == null ? void 0 : h.userData.tres__deregisterBlockingObjectAtPointerEventHandler, i = (c) => {
-          var m, f;
-          if (!o)
-            throw "could not find tres__deregisterBlockingObjectAtPointerEventHandler on scene's userData";
-          if ((f = h == null ? void 0 : (m = h.userData).tres__deregisterBlockingObjectAtPointerEventHandler) == null || f.call(m, c), !s)
-            throw "could not find tres__deregisterAtPointerEventHandler on scene's userData";
-          c && W.some((u) => c[u]) && (s == null || s(c));
+        const a = (c) => {
+          var d, p;
+          const u = c;
+          r.disposable && ((d = u.material) == null || d.dispose(), u.material = void 0, (p = u.geometry) == null || p.dispose(), u.geometry = void 0);
         }, l = (c) => {
-          const m = h == null ? void 0 : h.userData.tres__deregisterCamera;
-          if (!m)
-            throw "could not find tres__deregisterCamera on scene's userData";
-          c.isCamera && (m == null || m(c));
+          o(c), c && X.some((u) => c[u]) && (s == null || s(c));
+        }, f = (c) => {
+          const u = e.__tres.root.deregisterCamera;
+          c.isCamera && (u == null || u(c));
         };
-        (r = e.removeFromParent) == null || r.call(e), n.traverse((c) => {
-          a(c), l(c), i == null || i(c);
-        }), a(n), l(n), i == null || i(n);
+        (i = e.removeFromParent) == null || i.call(e), e.traverse((c) => {
+          a(c), f(c), l == null || l(c);
+        }), a(e), f(e), l == null || l(e), ye(e), (n = e.dispose) == null || n.call(e);
       }
-      (t = e.dispose) == null || t.call(e);
-    }
-  },
-  patchProp(e, r, t, n) {
-    var a, s, o, i;
-    if (e) {
-      let l = e, c = r;
-      if (e.isObject3D && c === "blocks-pointer-events") {
-        n || n === "" ? (s = h == null ? void 0 : (a = h.userData).tres__registerBlockingObjectAtPointerEventHandler) == null || s.call(a, e) : (i = h == null ? void 0 : (o = h.userData).tres__deregisterBlockingObjectAtPointerEventHandler) == null || i.call(o, e);
-        return;
-      }
-      let m = R(c), f = l == null ? void 0 : l[m];
-      if (c === "args") {
-        const g = e, _ = t ?? [], d = n ?? [], y = e.userData.tres__name || e.type;
-        y && _.length && !ht(_, d) && (l = Object.assign(g, new J.value[y](...n)));
-        return;
-      }
-      if (l.type === "BufferGeometry") {
-        if (c === "args")
+    },
+    patchProp(e, r, s, o) {
+      if (e) {
+        let i = e, n = r;
+        if (e.__tres.primitive && n === "object" && s !== null) {
+          const c = Oe.createElement("primitive", void 0, void 0, {
+            object: o
+          });
+          for (const u in c) {
+            if (u === "uuid")
+              continue;
+            const d = e[u], p = c[u];
+            !(d != null && d.set) && !K(d) ? e[u] = p : d.constructor === p.constructor && (d != null && d.copy) ? d == null || d.copy(p) : Array.isArray(p) ? d.set(...p) : !d.isColor && d.setScalar ? d.setScalar(p) : d.set(p);
+          }
+          c.__tres.root = t == null ? void 0 : t.__tres.root, c.isGroup ? (e.geometry = void 0, e.material = void 0) : delete e.isGroup;
+        }
+        if (e.__tres.root) {
+          const {
+            registerBlockingObjectAtPointerEventHandler: c,
+            deregisterBlockingObjectAtPointerEventHandler: u
+          } = e.__tres.root;
+          if (e.isObject3D && n === "blocks-pointer-events") {
+            o || o === "" ? c(e) : u(e);
+            return;
+          }
+        }
+        let a = F(n), l = i == null ? void 0 : i[a];
+        if (n === "args") {
+          const c = e, u = s ?? [], d = o ?? [], p = e.__tres.type || e.type;
+          p && u.length && !sr(u, d) && (i = Object.assign(c, new re.value[p](...o)));
           return;
-        l.setAttribute(
-          R(c),
-          new Ke(...n)
-        );
-        return;
-      }
-      if (c.includes("-") && f === void 0) {
-        const g = c.split("-");
-        f = g.reduce((_, d) => _[R(d)], l), c = g.pop(), m = c.toLowerCase(), f != null && f.set || (l = g.reduce((_, d) => _[R(d)], l));
-      }
-      let u = n;
-      if (u === "" && (u = !0), ae(f)) {
-        W.includes(r) || (Array.isArray(u) ? e[m](...u) : e[m](u));
-        return;
+        }
+        if (i.type === "BufferGeometry") {
+          if (n === "args")
+            return;
+          i.setAttribute(
+            F(n),
+            new lt(...o)
+          );
+          return;
+        }
+        if (n.includes("-") && l === void 0) {
+          const c = n.split("-");
+          l = c.reduce((u, d) => u[F(d)], i), n = c.pop(), a = n.toLowerCase(), l != null && l.set || (i = c.reduce((u, d) => u[F(d)], i));
+        }
+        let f = o;
+        if (f === "" && (f = !0), K(l)) {
+          X.includes(r) || (Array.isArray(f) ? e[a](...f) : e[a](f));
+          return;
+        }
+        !(l != null && l.set) && !K(l) ? i[a] = f : l.constructor === f.constructor && (l != null && l.copy) ? l == null || l.copy(f) : Array.isArray(f) ? l.set(...f) : !l.isColor && l.setScalar ? l.setScalar(f) : l.set(f), ye(e);
       }
-      !(f != null && f.set) && !ae(f) ? l[m] = u : f.constructor === u.constructor && (f != null && f.copy) ? f == null || f.copy(u) : Array.isArray(u) ? f.set(...u) : !f.isColor && f.setScalar ? f.setScalar(u) : f.set(u);
-    }
-  },
-  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
-}, { render: xt } = Te(At);
-X(ue);
-function Dt() {
-  return he().__VUE_DEVTOOLS_GLOBAL_HOOK__;
+    },
+    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
+  };
+};
+function wr() {
+  return Be().__VUE_DEVTOOLS_GLOBAL_HOOK__;
 }
-function he() {
+function Be() {
   return typeof navigator < "u" && typeof window < "u" ? window : typeof global < "u" ? global : {};
 }
-const Lt = typeof Proxy == "function", Bt = "devtools-plugin:setup", jt = "plugin:settings:set";
-let T, K;
-function It() {
-  var e;
-  return T !== void 0 || (typeof window < "u" && window.performance ? (T = !0, K = window.performance) : typeof global < "u" && (!((e = global.perf_hooks) === null || e === void 0) && e.performance) ? (T = !0, K = global.perf_hooks.performance) : T = !1), T;
+const br = typeof Proxy == "function", Mr = "devtools-plugin:setup", _r = "plugin:settings:set";
+let j, oe;
+function Er() {
+  var t;
+  return j !== void 0 || (typeof window < "u" && window.performance ? (j = !0, oe = window.performance) : typeof global < "u" && (!((t = global.perf_hooks) === null || t === void 0) && t.performance) ? (j = !0, oe = global.perf_hooks.performance) : j = !1), j;
 }
-function Rt() {
-  return It() ? K.now() : Date.now();
+function Cr() {
+  return Er() ? oe.now() : Date.now();
 }
-class Ht {
-  constructor(r, t) {
-    this.target = null, this.targetQueue = [], this.onQueue = [], this.plugin = r, this.hook = t;
-    const n = {};
-    if (r.settings)
-      for (const o in r.settings) {
-        const i = r.settings[o];
-        n[o] = i.defaultValue;
+class Sr {
+  constructor(e, r) {
+    this.target = null, this.targetQueue = [], this.onQueue = [], this.plugin = e, this.hook = r;
+    const s = {};
+    if (e.settings)
+      for (const n in e.settings) {
+        const a = e.settings[n];
+        s[n] = a.defaultValue;
       }
-    const a = `__vue-devtools-plugin-settings__${r.id}`;
-    let s = Object.assign({}, n);
+    const o = `__vue-devtools-plugin-settings__${e.id}`;
+    let i = Object.assign({}, s);
     try {
-      const o = localStorage.getItem(a), i = JSON.parse(o);
-      Object.assign(s, i);
+      const n = localStorage.getItem(o), a = JSON.parse(n);
+      Object.assign(i, a);
     } catch {
     }
     this.fallbacks = {
       getSettings() {
-        return s;
+        return i;
       },
-      setSettings(o) {
+      setSettings(n) {
         try {
-          localStorage.setItem(a, JSON.stringify(o));
+          localStorage.setItem(o, JSON.stringify(n));
         } catch {
         }
-        s = o;
+        i = n;
       },
       now() {
-        return Rt();
+        return Cr();
       }
-    }, t && t.on(jt, (o, i) => {
-      o === this.plugin.id && this.fallbacks.setSettings(i);
+    }, r && r.on(_r, (n, a) => {
+      n === this.plugin.id && this.fallbacks.setSettings(a);
     }), this.proxiedOn = new Proxy({}, {
-      get: (o, i) => this.target ? this.target.on[i] : (...l) => {
+      get: (n, a) => this.target ? this.target.on[a] : (...l) => {
         this.onQueue.push({
-          method: i,
+          method: a,
           args: l
         });
       }
     }), this.proxiedTarget = new Proxy({}, {
-      get: (o, i) => this.target ? this.target[i] : i === "on" ? this.proxiedOn : Object.keys(this.fallbacks).includes(i) ? (...l) => (this.targetQueue.push({
-        method: i,
+      get: (n, a) => this.target ? this.target[a] : a === "on" ? this.proxiedOn : Object.keys(this.fallbacks).includes(a) ? (...l) => (this.targetQueue.push({
+        method: a,
         args: l,
         resolve: () => {
         }
-      }), this.fallbacks[i](...l)) : (...l) => new Promise((c) => {
+      }), this.fallbacks[a](...l)) : (...l) => new Promise((f) => {
         this.targetQueue.push({
-          method: i,
+          method: a,
           args: l,
-          resolve: c
+          resolve: f
         });
       })
     });
   }
-  async setRealTarget(r) {
-    this.target = r;
-    for (const t of this.onQueue)
-      this.target.on[t.method](...t.args);
-    for (const t of this.targetQueue)
-      t.resolve(await this.target[t.method](...t.args));
+  async setRealTarget(e) {
+    this.target = e;
+    for (const r of this.onQueue)
+      this.target.on[r.method](...r.args);
+    for (const r of this.targetQueue)
+      r.resolve(await this.target[r.method](...r.args));
   }
 }
-function Nt(e, r) {
-  const t = e, n = he(), a = Dt(), s = Lt && t.enableEarlyProxy;
-  if (a && (n.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !s))
-    a.emit(Bt, e, r);
+function xr(t, e) {
+  const r = t, s = Be(), o = wr(), i = br && r.enableEarlyProxy;
+  if (o && (s.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !i))
+    o.emit(Mr, t, e);
   else {
-    const o = s ? new Ht(t, a) : null;
-    (n.__VUE_DEVTOOLS_PLUGINS__ = n.__VUE_DEVTOOLS_PLUGINS__ || []).push({
-      pluginDescriptor: t,
-      setupFn: r,
-      proxy: o
-    }), o && r(o.proxiedTarget);
+    const n = i ? new Sr(r, o) : null;
+    (s.__VUE_DEVTOOLS_PLUGINS__ = s.__VUE_DEVTOOLS_PLUGINS__ || []).push({
+      pluginDescriptor: r,
+      setupFn: e,
+      proxy: n
+    }), n && e(n.proxiedTarget);
   }
 }
-function Vt(e, r) {
-  const t = `▲ ■ ●${e}`;
-  typeof __VUE_DEVTOOLS_TOAST__ == "function" ? __VUE_DEVTOOLS_TOAST__(t, r) : r === "error" ? console.error(t) : r === "warn" ? console.warn(t) : console.log(t);
+function kr(t, e) {
+  const r = `▲ ■ ●${t}`;
+  typeof __VUE_DEVTOOLS_TOAST__ == "function" ? __VUE_DEVTOOLS_TOAST__(r, e) : e === "error" ? console.error(r) : e === "warn" ? console.warn(r) : console.log(r);
 }
-const ye = (e) => {
-  const r = {
-    id: e.uuid,
-    label: e.type,
+const je = (t) => {
+  const e = {
+    id: t.uuid,
+    label: t.type,
     children: [],
     tags: []
   };
-  e.name !== "" && r.tags.push({
-    label: e.name,
+  t.name !== "" && e.tags.push({
+    label: t.name,
     textColor: 5750629,
     backgroundColor: 15793395
   });
-  const t = ve(e);
-  return t > 0 && r.tags.push({
-    label: `${kt(t)} KB`,
+  const r = Le(t);
+  return r > 0 && e.tags.push({
+    label: `${vr(r)} KB`,
     textColor: 15707189,
     backgroundColor: 16775644,
     tooltip: "Memory usage"
-  }), e.type.includes("Light") && (r.tags.push({
-    label: `${e.intensity}`,
+  }), t.type.includes("Light") && (e.tags.push({
+    label: `${t.intensity}`,
     textColor: 9738662,
     backgroundColor: 16316922,
     tooltip: "Intensity"
-  }), r.tags.push({
-    label: `#${e.color.getHexString()}`,
+  }), e.tags.push({
+    label: `#${t.color.getHexString()}`,
     textColor: 9738662,
     backgroundColor: 16316922,
     tooltip: "Color"
-  })), e.type.includes("Camera") && (r.tags.push({
-    label: `${e.fov}°`,
+  })), t.type.includes("Camera") && (e.tags.push({
+    label: `${t.fov}°`,
     textColor: 9738662,
     backgroundColor: 16316922,
     tooltip: "Field of view"
-  }), r.tags.push({
+  }), e.tags.push({
     // eslint-disable-next-line max-len
-    label: `x: ${Math.round(e.position.x)} y: ${Math.round(e.position.y)} z: ${Math.round(e.position.z)}`,
+    label: `x: ${Math.round(t.position.x)} y: ${Math.round(t.position.y)} z: ${Math.round(t.position.z)}`,
     textColor: 9738662,
     backgroundColor: 16316922,
     tooltip: "Position"
-  })), r;
+  })), e;
 };
-function _e(e, r) {
-  e.children.forEach((t) => {
-    if (t.type === "HightlightMesh")
+function De(t, e) {
+  t.children.forEach((r) => {
+    if (r.type === "HightlightMesh")
       return;
-    const n = ye(t);
-    r.children.push(n), _e(t, n);
+    const s = je(r);
+    e.children.push(s), De(r, s);
   });
 }
-const $t = [], O = "tres:inspector", Ut = le({
+const Tr = [], D = "tres:inspector", Pr = be({
   sceneGraph: null
 });
-function Ft(e, r) {
-  Nt(
+function Ar(t, e) {
+  xr(
     {
       id: "dev.esm.tres",
       label: "TresJS 🪐",
       logo: "https://raw.githubusercontent.com/Tresjs/tres/main/public/favicon.svg",
       packageName: "tresjs",
       homepage: "https://tresjs.org",
-      componentStateTypes: $t,
-      app: e
+      componentStateTypes: Tr,
+      app: t
     },
-    (t) => {
-      typeof t.now != "function" && Vt(
+    (r) => {
+      typeof r.now != "function" && kr(
         // eslint-disable-next-line max-len
         "You seem to be using an outdated version of Vue Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://devtools.vuejs.org/guide/installation.html."
-      ), t.addInspector({
-        id: O,
+      ), r.addInspector({
+        id: D,
         label: "TresJS 🪐",
         icon: "account_tree",
         treeFilterPlaceholder: "Search instances"
       }), setInterval(() => {
-        t.sendInspectorTree(O);
+        r.sendInspectorTree(D);
       }, 1e3), setInterval(() => {
-        t.notifyComponentUpdate();
-      }, 5e3), t.on.getInspectorTree((s) => {
-        if (s.inspectorId === O) {
-          const o = ye(r.scene.value);
-          _e(r.scene.value, o), Ut.sceneGraph = o, s.rootNodes = [o];
+        r.notifyComponentUpdate();
+      }, 5e3), r.on.getInspectorTree((i) => {
+        if (i.inspectorId === D) {
+          const n = je(e.scene.value);
+          De(e.scene.value, n), Pr.sceneGraph = n, i.rootNodes = [n];
         }
       });
-      let n = null, a = null;
-      t.on.getInspectorState((s) => {
-        if (s.inspectorId === O) {
-          const [o] = r.scene.value.getObjectsByProperty("uuid", s.nodeId);
-          if (!o)
+      let s = null, o = null;
+      r.on.getInspectorState((i) => {
+        if (i.inspectorId === D) {
+          const [n] = e.scene.value.getObjectsByProperty("uuid", i.nodeId);
+          if (!n)
             return;
-          if (a && n && n.parent && a.remove(n), o.isMesh) {
-            const i = wt(o);
-            o.add(i), n = i, a = o;
+          if (o && s && s.parent && o.remove(s), n.isMesh) {
+            const a = lr(n);
+            n.add(a), s = a, o = n;
           }
-          s.state = {
+          i.state = {
             object: [
               {
                 key: "uuid",
                 editable: !0,
-                value: o.uuid
+                value: n.uuid
               },
               {
                 key: "name",
                 editable: !0,
-                value: o.name
+                value: n.name
               },
               {
                 key: "type",
                 editable: !0,
-                value: o.type
+                value: n.type
               },
               {
                 key: "position",
                 editable: !0,
-                value: o.position
+                value: n.position
               },
               {
                 key: "rotation",
                 editable: !0,
-                value: o.rotation
+                value: n.rotation
               },
               {
                 key: "scale",
                 editable: !0,
-                value: o.scale
+                value: n.scale
               },
               {
                 key: "geometry",
-                value: o.geometry
+                value: n.geometry
               },
               {
                 key: "material",
-                value: o.material
+                value: n.material
               },
               {
                 key: "color",
                 editable: !0,
-                value: o.color
+                value: n.color
               },
               {
                 key: "intensity",
                 editable: !0,
-                value: o.intensity
+                value: n.intensity
               },
               {
                 key: "castShadow",
                 editable: !0,
-                value: o.castShadow
+                value: n.castShadow
               },
               {
                 key: "receiveShadow",
                 editable: !0,
-                value: o.receiveShadow
+                value: n.receiveShadow
               },
               {
                 key: "frustumCulled",
                 editable: !0,
-                value: o.frustumCulled
+                value: n.frustumCulled
               },
               {
                 key: "matrixAutoUpdate",
                 editable: !0,
-                value: o.matrixAutoUpdate
+                value: n.matrixAutoUpdate
               },
               {
                 key: "matrixWorldNeedsUpdate",
                 editable: !0,
-                value: o.matrixWorldNeedsUpdate
+                value: n.matrixWorldNeedsUpdate
               },
               {
                 key: "matrixWorld",
-                value: o.matrixWorld
+                value: n.matrixWorld
               },
               {
                 key: "visible",
                 editable: !0,
-                value: o.visible
+                value: n.visible
               }
             ]
           };
         }
-      }), t.on.editInspectorState((s) => {
-        s.inspectorId === O && _t(r.scene.value, s.nodeId, s.path, s.state.value);
+      }), r.on.editInspectorState((i) => {
+        i.inspectorId === D && ar(e.scene.value, i.nodeId, i.path, i.state.value);
       });
     }
   );
 }
-const Gt = ["data-scene"], zt = /* @__PURE__ */ Z({
+const Lr = ["data-scene", "data-tres"], Or = /* @__PURE__ */ le({
   __name: "TresCanvas",
   props: {
     shadows: { type: Boolean, default: void 0 },
@@ -932,6 +1104,7 @@ const Gt = ["data-scene"], zt = /* @__PURE__ */ Z({
     useLegacyLights: { type: Boolean, default: void 0 },
     outputColorSpace: {},
     toneMappingExposure: {},
+    renderMode: { default: "always" },
     camera: {},
     preset: {},
     windowSize: { type: Boolean, default: void 0 },
@@ -948,107 +1121,207 @@ const Gt = ["data-scene"], zt = /* @__PURE__ */ Z({
     logarithmicDepthBuffer: { type: Boolean, default: void 0 },
     failIfMajorPerformanceCaveat: { type: Boolean, default: void 0 }
   },
-  setup(e, { expose: r }) {
+  emits: ["render"],
+  setup(t, { expose: e, emit: r }) {
     var _;
-    const t = e, { logWarning: n } = j(), a = B(), s = D(new qe()), { resume: o } = me(), i = Oe(), l = (_ = ee()) == null ? void 0 : _.appContext.app, c = (d) => Z({
+    const s = t, o = r, i = T(), n = $(new ut()), { resume: a } = ae(), l = We(), f = (_ = ue()) == null ? void 0 : _.appContext.app;
+    ne(Me);
+    const c = (y) => le({
       setup() {
-        var p;
-        const y = (p = ee()) == null ? void 0 : p.appContext;
-        return y && (y.app = l), Q("useTres", d), Q("extend", X), typeof window < "u" && Ft(y.app, d), () => te(je, null, i != null && i.default ? i.default() : []);
+        var g;
+        const b = (g = ue()) == null ? void 0 : g.appContext;
+        return b && (b.app = f), ee("useTres", y), ee("extend", ne), typeof window < "u" && Ar(b == null ? void 0 : b.app, y), () => ce(qe, null, l != null && l.default ? l.default() : []);
       }
-    }), m = (d) => {
-      const y = c(d);
-      xt(te(y), s.value);
-    }, f = (d, y = !1) => {
-      s.value.children = [], y && (d.renderer.value.dispose(), d.renderer.value.renderLists.dispose(), d.renderer.value.forceContextLoss()), m(d), o();
-    }, u = k(() => t.disableRender), g = D(null);
-    return r({ context: g, dispose: () => f(g.value, !0) }), Ae(() => {
-      const d = a;
-      g.value = Tt({
-        scene: s.value,
-        canvas: d,
-        windowSize: t.windowSize,
-        disableRender: u,
-        rendererOptions: t
-      }), St({ scene: s.value, contextParts: g.value });
-      const { registerCamera: y, camera: p, cameras: C, deregisterCamera: M } = g.value;
-      m(g.value);
-      const P = () => {
-        const w = new Y(
+    }), u = (y) => {
+      const b = c(y), { render: g } = Ye(Oe());
+      g(ce(b), n.value);
+    }, d = (y, b = !1) => {
+      n.value.children = [], b && (y.renderer.value.dispose(), y.renderer.value.renderLists.dispose(), y.renderer.value.forceContextLoss()), u(y), a();
+    }, p = x(() => s.disableRender), h = $(null);
+    return e({ context: h, dispose: () => d(h.value, !0) }), Ue(() => {
+      const y = i;
+      h.value = hr({
+        scene: n.value,
+        canvas: y,
+        windowSize: s.windowSize ?? !1,
+        disableRender: p.value ?? !1,
+        rendererOptions: s,
+        emit: o
+      }), mr(h.value);
+      const { registerCamera: b, camera: g, cameras: E, deregisterCamera: w } = h.value;
+      u(h.value);
+      const m = () => {
+        const v = new te(
           45,
           window.innerWidth / window.innerHeight,
           0.1,
           1e3
         );
-        w.position.set(3, 3, 3), w.lookAt(0, 0, 0), y(w);
-        const S = A(() => {
-          C.value.length >= 2 && (w.removeFromParent(), M(w), S == null || S());
+        v.position.set(3, 3, 3), v.lookAt(0, 0, 0), b(v);
+        const C = se(() => {
+          E.value.length >= 2 && (v.removeFromParent(), w(v), C == null || C());
         });
       };
-      ie(
-        () => t.camera,
-        (w, S) => {
-          w && y(w), S && (S.removeFromParent(), M(S));
+      I(
+        () => s.camera,
+        (v, C) => {
+          v && b(v), C && (C.removeFromParent(), w(C));
         },
         {
           immediate: !0
         }
-      ), p.value || (n(
-        "No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."
-      ), P());
-    }), (d, y) => (xe(), De("canvas", {
+      ), g.value || m();
+    }), (y, b) => (Ge(), ze("canvas", {
       ref_key: "canvas",
-      ref: a,
-      "data-scene": s.value.uuid,
-      class: Le(d.$attrs.class),
-      style: Be({
+      ref: i,
+      "data-scene": n.value.uuid,
+      class: Ve(y.$attrs.class),
+      "data-tres": `tresjs ${Je(Vt).version}`,
+      style: Qe({
         display: "block",
         width: "100%",
         height: "100%",
-        position: d.windowSize ? "fixed" : "relative",
+        position: y.windowSize ? "fixed" : "relative",
         top: 0,
         left: 0,
         pointerEvents: "auto",
         touchAction: "none",
-        ...d.$attrs.style
+        ...y.$attrs.style
       })
-    }, null, 14, Gt));
+    }, null, 14, Lr));
   }
-}), Wt = [
+}), Br = [
   "TresCanvas",
   "TresLeches",
   "TresScene"
-], Qt = {
+], jr = {
   template: {
     compilerOptions: {
-      isCustomElement: (e) => e.startsWith("Tres") && !Wt.includes(e) || e === "primitive"
+      isCustomElement: (t) => t.startsWith("Tres") && !Br.includes(t) || t === "primitive"
+    }
+  }
+}, Qr = jr, Yr = {
+  mounted: (t, e) => {
+    if (e.arg) {
+      console.log(`v-log:${e.arg}`, t[e.arg]);
+      return;
     }
+    console.log("v-log", t);
+  }
+};
+class Ie extends ct {
+  constructor(e, r) {
+    const s = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0], o = new de();
+    o.setAttribute("position", new fe(s, 3)), o.computeBoundingSphere();
+    const i = new dt({ fog: !1 });
+    super(o, i), this.light = e, this.color = r, this.type = "RectAreaLightHelper";
+    const n = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0], a = new de();
+    a.setAttribute("position", new fe(n, 3)), a.computeBoundingSphere(), this.add(new ft(a, new Ee({ side: pt, fog: !1 })));
   }
-}, ar = Qt, sr = {
-  install(e) {
-    e.component("TresCanvas", zt);
+  updateMatrixWorld() {
+    if (this.scale.set(0.5 * this.light.width, 0.5 * this.light.height, 1), this.color !== void 0)
+      this.material.color.set(this.color), this.children[0].material.color.set(this.color);
+    else {
+      this.material.color.copy(this.light.color).multiplyScalar(this.light.intensity);
+      const e = this.material.color, r = Math.max(e.r, e.g, e.b);
+      r > 1 && e.multiplyScalar(1 / r), this.children[0].material.color.copy(this.material.color);
+    }
+    this.matrixWorld.extractRotation(this.light.matrixWorld).scale(this.scale).copyPosition(this.light.matrixWorld), this.children[0].matrixWorld.copy(this.matrixWorld);
+  }
+  dispose() {
+    this.geometry.dispose(), this.material.dispose(), this.children[0].geometry.dispose(), this.children[0].material.dispose();
+  }
+}
+const { logWarning: we } = P();
+let U, k;
+const Dr = {
+  DirectionalLight: mt,
+  PointLight: vt,
+  SpotLight: gt,
+  HemisphereLight: ht,
+  RectAreaLight: Ie
+}, qr = {
+  mounted: (t) => {
+    if (!t.isLight) {
+      we(`${t.type} is not a light`);
+      return;
+    }
+    U = Dr[t.type], t.parent.add(new U(t, 1, t.color.getHex()));
+  },
+  updated: (t) => {
+    k = t.parent.children.find((e) => e instanceof U), !(k instanceof Ie) && k.update();
+  },
+  unmounted: (t) => {
+    if (!t.isLight) {
+      we(`${t.type} is not a light`);
+      return;
+    }
+    k = t.parent.children.find((e) => e instanceof U), k && k.dispose && k.dispose(), t.parent.remove(k);
+  }
+}, { logWarning: Ir } = P(), Kr = {
+  updated: (t, e) => {
+    const r = Ae(e);
+    if (!r) {
+      Ir(`v-always-look-at: problem with binding value: ${e.value}`);
+      return;
+    }
+    const { onLoop: s } = ae();
+    s(() => {
+      t.lookAt(r);
+    });
+  }
+}, { logWarning: Rr } = P(), Xr = {
+  updated: (t, e) => {
+    var o;
+    const r = Ae(e);
+    if (!r) {
+      Rr(`v-distance-to: problem with binding value: ${e.value}`);
+      return;
+    }
+    S && (S.dispose(), t.parent.remove(S));
+    const s = r.clone().sub(t.position);
+    s.normalize(), S = new yt(s, t.position, t.position.distanceTo(r), 16776960), t.parent.add(S), console.table(
+      [
+        ["Distance:", t.position.distanceTo(r)],
+        [`origin: ${t.name || t.type}`, `x:${t.position.x}, y:${t.position.y}, z:${(o = t.position) == null ? void 0 : o.z}`],
+        [`Destiny: ${t.name || t.type}`, `x:${r.x}, y:${r.y}, z:${r == null ? void 0 : r.z}`]
+      ]
+    );
+  },
+  unmounted: (t) => {
+    S == null || S.dispose(), t.parent.remove(S);
+  }
+};
+let S = null;
+const Zr = {
+  install(t) {
+    t.component("TresCanvas", Or);
   }
 };
 export {
-  zt as TresCanvas,
-  J as catalogue,
-  sr as default,
-  X as extend,
-  Zt as isProd,
-  ct as normalizeColor,
-  er as normalizeVectorFlexibleParam,
-  ar as templateCompilerOptions,
-  Mt as trasverseObjects,
-  st as useCamera,
-  tr as useLoader,
-  j as useLogger,
-  St as usePointerEventHandler,
-  Pt as useRaycaster,
-  me as useRenderLoop,
-  Et as useRenderer,
-  nr as useSeek,
-  rr as useTexture,
-  or as useTres,
-  Ot as useTresContext,
-  Tt as useTresContextProvider
+  Or as TresCanvas,
+  re as catalogue,
+  Zr as default,
+  ne as extend,
+  Wr as isProd,
+  Xt as normalizeColor,
+  Ur as normalizeVectorFlexibleParam,
+  Qr as templateCompilerOptions,
+  fr as trasverseObjects,
+  Jt as useCamera,
+  Gr as useLoader,
+  P as useLogger,
+  mr as usePointerEventHandler,
+  pr as useRaycaster,
+  ae as useRenderLoop,
+  cr as useRenderer,
+  Vr as useSeek,
+  zr as useTexture,
+  Jr as useTres,
+  yr as useTresContext,
+  hr as useTresContextProvider,
+  Kr as vAlwaysLookAt,
+  Xr as vDistanceTo,
+  qr as vLightHelper,
+  Yr as vLog
 };