@tresjs/core 2.0.0-alpha.3 → 2.0.0-alpha.5

package/dist/composables/index.d.ts

@@ -6,3 +6,4 @@ export * from './useTexture';
 export * from './useTres';
 export * from './useRaycaster';
 export * from './useLogger';
+export * from './useSeek';

package/dist/composables/useSeek/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Seek composable return type
+ *
+ * @export
+ * @interface UseSeekReturn
+ */
+export interface UseSeekReturn {
+    seek: (parent: THREE.Scene | THREE.Object3D, property: string, value: string) => THREE.Object3D | null;
+    seekByName: (parent: THREE.Scene | THREE.Object3D, value: string) => THREE.Object3D | null;
+}
+/**
+ * Composable that provides utilities to easily traverse and navigate through complex scenes and object children graphs
+ *
+ * @export
+ * @return {*}  {UseSeekReturn}
+ */
+export declare function useSeek(): UseSeekReturn;

package/dist/tres.js

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

package/dist/tres.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-alpha.3
+ * version: v2.0.0-alpha.5
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(p,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],l):(p=typeof globalThis<"u"?globalThis:p||self,l(p.tres={},p.Vue,p.Three,p.VueUseCore))})(this,function(p,l,c,u){"use strict";function se(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const $=se(c),U=l.ref({uuid:c.MathUtils.generateUUID()}),z=e=>void Object.assign(U.value,e);var J=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(J||{});const ue=45;let C;function W(){const{state:e,setState:t,aspectRatio:a}=M();function o(r="Perspective",s){var d,v,g;if(r==="Perspective"){const{near:w,far:b,fov:h}=s||{near:.1,far:1e3,fov:ue};C=new c.PerspectiveCamera(h,((d=e.aspectRatio)==null?void 0:d.value)||window.innerWidth/window.innerHeight,w,b),(v=e.cameras)==null||v.push(C)}else{const{left:w,right:b,top:h,bottom:y,near:F,far:B}=s||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};C=new c.OrthographicCamera(w,b,h,y,F,B),(g=e.cameras)==null||g.push(C)}return e.camera=C,t("camera",e.camera),C}function n(){var r;e.camera instanceof c.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(r=e.camera)==null||r.updateProjectionMatrix()}function i(r){var s;(s=e.cameras)==null||s.push(r),r instanceof c.PerspectiveCamera&&e.aspectRatio&&(r.aspect=e.aspectRatio.value),r.updateProjectionMatrix(),t("camera",r)}function f(){e.cameras=[]}return l.watchEffect(()=>{a!=null&&a.value&&n()}),{activeCamera:l.toRef(e,"camera"),createCamera:o,updateCamera:n,pushCamera:i,clearCameras:f}}const K=u.createEventHook(),X=u.createEventHook(),I=u.createEventHook(),P=new c.Clock;let A=0,k=0;const{pause:le,resume:ce,isActive:fe}=u.useRafFn(()=>{K.trigger({delta:A,elapsed:k,clock:P}),X.trigger({delta:A,elapsed:k,clock:P}),I.trigger({delta:A,elapsed:k,clock:P})},{immediate:!1});I.on(()=>{A=P.getDelta(),k=P.getElapsedTime()});function j(){return{onBeforeLoop:K.on,onLoop:X.on,onAfterLoop:I.on,pause:le,resume:ce,isActive:fe}}function pe(e){return e instanceof c.Color?e:Array.isArray(e)?new c.Color(...e):new c.Color(e)}const R={realistic:{outputEncoding:c.sRGBEncoding,toneMapping:c.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:c.PCFSoftShadowMap}}},Y=(e,t)=>{for(const a of Object.keys(t))t[a]instanceof Object&&Object.assign(t[a],Y(e[a],t[a]));return Object.assign(e||{},t),e},de=me("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");function x(e){return e.replace(/-([a-z])/g,(t,a)=>a.toUpperCase())}function me(e,t){const a=Object.create(null),o=e.split(",");for(let n=0;n<o.length;n++)a[o[n]]=!0;return t?n=>!!a[n.toLowerCase()]:n=>!!a[n]}const m=l.shallowRef(),G=l.ref(!1);function Q(e,t,a){const{alpha:o=!0,antialias:n=!0,depth:i,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:r,precision:s,premultipliedAlpha:d,stencil:v,shadows:g=!1,shadowMapType:w=c.PCFShadowMap,physicallyCorrectLights:b=!1,useLegacyLights:h=!1,outputEncoding:y=c.LinearEncoding,toneMapping:F=c.NoToneMapping,toneMappingExposure:B=1,context:Oe=void 0,powerPreference:Ue="default",preserveDrawingBuffer:Ae=!1,clearColor:O,windowSize:ke=!1,preset:je=void 0}=l.toRefs(a),{setState:N}=M(),{width:ne,height:ae}=u.resolveUnref(ke)?u.useWindowSize():u.useElementSize(t),{logError:xe}=S(),{pixelRatio:re}=u.useDevicePixelRatio(),{pause:_e,resume:Te}=j(),V=l.computed(()=>ne.value/ae.value),oe=()=>{m.value&&(m.value.setSize(ne.value,ae.value),m.value.setPixelRatio(Math.min(re.value,2)))},ie=()=>{if(!m.value)return;const L=u.resolveUnref(je);if(L){L in R||xe("Renderer Preset must be one of these: "+Object.keys(R).join(", ")),Y(m.value,R[L]);return}m.value.shadowMap.enabled=u.resolveUnref(g),m.value.shadowMap.type=u.resolveUnref(w),m.value.toneMapping=u.resolveUnref(F)||c.NoToneMapping,m.value.toneMappingExposure=u.resolveUnref(B),m.value.outputEncoding=u.resolveUnref(y)||c.LinearEncoding,O!=null&&O.value&&m.value.setClearColor(pe(u.resolveUnref(O))),m.value.useLegacyLights=u.resolveUnref(h)},De=()=>{const L=u.unrefElement(e);L&&(m.value=new c.WebGLRenderer({canvas:L,alpha:u.resolveUnref(o),antialias:u.resolveUnref(n),context:u.resolveUnref(Oe),depth:u.resolveUnref(i),failIfMajorPerformanceCaveat:u.resolveUnref(r),logarithmicDepthBuffer:u.resolveUnref(f),powerPreference:u.resolveUnref(Ue),precision:u.resolveUnref(s),stencil:u.resolveUnref(v),preserveDrawingBuffer:u.resolveUnref(Ae),premultipliedAlpha:u.resolveUnref(d)}),N("renderer",m.value),N("clock",new c.Clock),N("aspectRatio",V),ie(),oe(),Te(),G.value=!0)},Fe=()=>{m.value&&(m.value.dispose(),m.value=void 0,G.value=!1,_e())};return l.watch([V,re],oe),l.watch([g,w,y,h,F,B,O],ie),l.watch(()=>[e,t],()=>{u.unrefElement(e)&&u.unrefElement(t)&&De()},{immediate:!0,deep:!0}),{renderer:m,isReady:G,dispose:Fe,aspectRatio:V}}const Z=e=>!!e&&e.constructor===Array;function E(e){const t={nodes:{},materials:{}};return e&&e.traverse(a=>{a.name&&(t.nodes[a.name]=a),a.material&&!t.materials[a.material.name]&&(t.materials[a.material.name]=a.material)}),t}async function ve(e,t,a,o,n){const{logError:i}=S(),f=new e;n&&n(f),a&&a(f);const s=(Array.isArray(t)?t:[t]).map(d=>new Promise((v,g)=>{f.load(d,w=>{w.scene&&Object.assign(w,E(w.scene)),v(w)},o,w=>g(i("[useLoader] - Failed to load resource",w)))}));return Z(t)?await Promise.all(s):await s[0]}async function ge(e){const t=new c.LoadingManager,a=new c.TextureLoader(t),o=n=>new Promise((i,f)=>{a.load(n,r=>i(r),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(Z(e)){const n=await Promise.all(e.map(i=>o(i)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:i,normalMap:f,roughnessMap:r,metalnessMap:s,aoMap:d}=e;return{map:n?await o(n):null,displacementMap:i?await o(i):null,normalMap:f?await o(f):null,roughnessMap:r?await o(r):null,metalnessMap:s?await o(s):null,aoMap:d?await o(d):null}}}const _=l.shallowReactive({camera:void 0,cameras:[],aspectRatio:l.computed(()=>window.innerWidth/window.innerHeight)});function M(){function e(a){return _[a]}function t(a,o){_[a]=o}return{state:_,...l.toRefs(_),getState:e,setState:t}}const H=l.shallowRef(new c.Raycaster),T=l.ref(new c.Vector2),we=l.ref(null);function q(){const{setState:e}=M();e("raycaster",H.value),e("pointer",T),e("currentInstance",we);function t(a){T.value.x=a.clientX/window.innerWidth*2-1,T.value.y=-(a.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),{raycaster:H,pointer:T}}const he=!0,ee="[TresJS ▲ ■ ●] ";function S(){function e(o,n){console.error(`${ee} ${o}`,n||"")}function t(o){console.warn(`${ee} ${o}`)}function a(o,n){}return{logError:e,logWarning:t,logMessage:a}}const{logWarning:ye}=S();function Ce(e){for(const t in e)if(t.indexOf("on")===0)return!0;return!1}function ze(e){}let D=null;const Me={createElement(e,t,a,o){if(e==="template"||de(e))return null;let n;if(o===null&&(o={}),o!=null&&o.args?n=new U.value[e.replace("Tres","")](...o.args):n=new U.value[e.replace("Tres","")],n.isCamera){(!(o!=null&&o.position)||o!=null&&o.position.every(f=>f==0))&&ye("Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗");const{pushCamera:i}=W();i(n)}return(o==null?void 0:o.attach)===void 0&&(n.isMaterial?n.attach="material":n.isBufferGeometry&&(n.attach="geometry")),n},insert(e,t,a){if(D===null&&t.isScene&&(D=t),t===null&&(t=D),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const r=a?t.children.indexOf(a):0;e.parent=t,t.children.splice(r,0,e),e.dispatchEvent({type:"added"})}else typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e));const{onLoop:o}=j();let n=null,i=null;const{raycaster:f}=q();e&&e instanceof c.Mesh&&Ce(e)&&(o(()=>{var r,s,d;if(t!=null&&t.children&&e&&f){const v=f.value.intersectObjects(t.children);v.length>0&&v[0].object.uuid===e.uuid?(i=v[0],(n===null||n.object.uuid!==(i==null?void 0:i.object.uuid))&&((r=e.onPointerEnter)==null||r.call(e,i)),(s=e.onPointerMove)==null||s.call(e,i)):(i=null,n!==null&&((d=e.onPointerLeave)==null||d.call(e,n))),n=i}}),u.useEventListener(window,"click",()=>{var r;i!==null&&((r=e.onClick)==null||r.call(e,i))}))},remove(e){if(!e)return;const t=e.parentNode;t&&t.removeChild(e)},patchProp(e,t,a,o){if(e){let n=e,i=t;const f=x(i);let r=n==null?void 0:n[f];if(e.parent||(e.parent=D),n.type==="BufferGeometry"&&(i=i.split("-").pop(),n.setAttribute(x(i),new c.BufferAttribute(...o))),i.includes("-")&&r===void 0){const d=i.split("-");r=d.reduce((v,g)=>v[x(g)],n),i=d.pop(),r!=null&&r.set||(n=d.reduce((v,g)=>v[x(g)],n))}let s=o;if(s===""&&(s=!0),u.isFunction(r)){Array.isArray(s)?e[f](...s):e[f](s);return}!(r!=null&&r.set)&&!u.isFunction(r)?n[f]=s:r.constructor===s.constructor&&(r!=null&&r.copy)?r==null||r.copy(s):Array.isArray(s)?r.set(...s):!r.isColor&&r.setScalar?r.setScalar(s):r.set(s)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{createApp:be}=l.createRenderer(Me),Le=e=>{const t=be(a);function a(){return e&&e.default?e.default():[]}return t};z($);const{logWarning:Pe}=S(),te=l.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:a}){e.physicallyCorrectLights===!0&&Pe("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const o=l.ref(),n=l.ref(),i=new $.Scene,{setState:f}=M();f("scene",i);function r(){const{renderer:v}=Q(n,o,e),{activeCamera:g}=W(),{onLoop:w}=j(),{raycaster:b,pointer:h}=q();w(()=>{var y;g.value&&(b.value.setFromCamera(h.value,g.value),(y=v.value)==null||y.render(i,g.value))})}l.watch(n,r);let s;function d(){s=Le(t),s.provide("useTres",M()),s.provide("extend",z),s.mount(i)}return d(),a({scene:i}),()=>l.h(l.h("div",{ref:o,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[l.h("div",{style:{width:"100%",height:"100%"}},[l.h("canvas",{ref:n,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),Se={install(e){e.component("TresCanvas",te)}};p.CameraType=J,p.TresCanvas=te,p.catalogue=U,p.default=Se,p.extend=z,p.isProd=he,p.trasverseObjects=E,p.useCamera=W,p.useLoader=ve,p.useLogger=S,p.useRaycaster=q,p.useRenderLoop=j,p.useRenderer=Q,p.useTexture=ge,p.useTres=M,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(p,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],l):(p=typeof globalThis<"u"?globalThis:p||self,l(p.tres={},p.Vue,p.Three,p.VueUseCore))})(this,function(p,l,f,u){"use strict";function se(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const V=se(f),O=l.ref({uuid:f.MathUtils.generateUUID()}),I=e=>void Object.assign(O.value,e);var J=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(J||{});const ue=45;let C;function W(){const{state:e,setState:t,aspectRatio:a}=M();function r(o="Perspective",s){var d,v,g;if(o==="Perspective"){const{near:h,far:L,fov:w}=s||{near:.1,far:1e3,fov:ue};C=new f.PerspectiveCamera(w,((d=e.aspectRatio)==null?void 0:d.value)||window.innerWidth/window.innerHeight,h,L),(v=e.cameras)==null||v.push(C)}else{const{left:h,right:L,top:w,bottom:y,near:B,far:F}=s||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};C=new f.OrthographicCamera(h,L,w,y,B,F),(g=e.cameras)==null||g.push(C)}return e.camera=C,t("camera",e.camera),C}function n(){var o;e.camera instanceof f.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(o=e.camera)==null||o.updateProjectionMatrix()}function i(o){var s;(s=e.cameras)==null||s.push(o),o instanceof f.PerspectiveCamera&&e.aspectRatio&&(o.aspect=e.aspectRatio.value),o.updateProjectionMatrix(),t("camera",o)}function c(){e.cameras=[]}return l.watchEffect(()=>{a!=null&&a.value&&n()}),{activeCamera:l.toRef(e,"camera"),createCamera:r,updateCamera:n,pushCamera:i,clearCameras:c}}const K=u.createEventHook(),X=u.createEventHook(),z=u.createEventHook(),S=new f.Clock;let U=0,A=0;const{pause:le,resume:ce,isActive:fe}=u.useRafFn(()=>{K.trigger({delta:U,elapsed:A,clock:S}),X.trigger({delta:U,elapsed:A,clock:S}),z.trigger({delta:U,elapsed:A,clock:S})},{immediate:!1});z.on(()=>{U=S.getDelta(),A=S.getElapsedTime()});function j(){return{onBeforeLoop:K.on,onLoop:X.on,onAfterLoop:z.on,pause:le,resume:ce,isActive:fe}}function pe(e){return e instanceof f.Color?e:Array.isArray(e)?new f.Color(...e):new f.Color(e)}const R={realistic:{outputEncoding:f.sRGBEncoding,toneMapping:f.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:f.PCFSoftShadowMap}}},Y=(e,t)=>{for(const a of Object.keys(t))t[a]instanceof Object&&Object.assign(t[a],Y(e[a],t[a]));return Object.assign(e||{},t),e},de=me("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");function x(e){return e.replace(/-([a-z])/g,(t,a)=>a.toUpperCase())}function me(e,t){const a=Object.create(null),r=e.split(",");for(let n=0;n<r.length;n++)a[r[n]]=!0;return t?n=>!!a[n.toLowerCase()]:n=>!!a[n]}const m=l.shallowRef(),N=l.ref(!1);function Q(e,t,a){const{alpha:r=!0,antialias:n=!0,depth:i,logarithmicDepthBuffer:c,failIfMajorPerformanceCaveat:o,precision:s,premultipliedAlpha:d,stencil:v,shadows:g=!1,shadowMapType:h=f.PCFShadowMap,physicallyCorrectLights:L=!1,useLegacyLights:w=!1,outputEncoding:y=f.LinearEncoding,toneMapping:B=f.NoToneMapping,toneMappingExposure:F=1,context:Ue=void 0,powerPreference:Ae="default",preserveDrawingBuffer:je=!1,clearColor:k,windowSize:xe=!1,preset:_e=void 0}=l.toRefs(a),{setState:$}=M(),{width:ne,height:ae}=u.resolveUnref(xe)?u.useWindowSize():u.useElementSize(t),{logError:Te}=b(),{pixelRatio:re}=u.useDevicePixelRatio(),{pause:De,resume:Be}=j(),q=l.computed(()=>ne.value/ae.value),oe=()=>{m.value&&(m.value.setSize(ne.value,ae.value),m.value.setPixelRatio(Math.min(re.value,2)))},ie=()=>{if(!m.value)return;const P=u.resolveUnref(_e);if(P){P in R||Te("Renderer Preset must be one of these: "+Object.keys(R).join(", ")),Y(m.value,R[P]);return}m.value.shadowMap.enabled=u.resolveUnref(g),m.value.shadowMap.type=u.resolveUnref(h),m.value.toneMapping=u.resolveUnref(B)||f.NoToneMapping,m.value.toneMappingExposure=u.resolveUnref(F),m.value.outputEncoding=u.resolveUnref(y)||f.LinearEncoding,k!=null&&k.value&&m.value.setClearColor(pe(u.resolveUnref(k))),m.value.useLegacyLights=u.resolveUnref(w)},Fe=()=>{const P=u.unrefElement(e);P&&(m.value=new f.WebGLRenderer({canvas:P,alpha:u.resolveUnref(r),antialias:u.resolveUnref(n),context:u.resolveUnref(Ue),depth:u.resolveUnref(i),failIfMajorPerformanceCaveat:u.resolveUnref(o),logarithmicDepthBuffer:u.resolveUnref(c),powerPreference:u.resolveUnref(Ae),precision:u.resolveUnref(s),stencil:u.resolveUnref(v),preserveDrawingBuffer:u.resolveUnref(je),premultipliedAlpha:u.resolveUnref(d)}),$("renderer",m.value),$("clock",new f.Clock),$("aspectRatio",q),ie(),oe(),Be(),N.value=!0)},Ie=()=>{m.value&&(m.value.dispose(),m.value=void 0,N.value=!1,De())};return l.watch([q,re],oe),l.watch([g,h,y,w,B,F,k],ie),l.watch(()=>[e,t],()=>{u.unrefElement(e)&&u.unrefElement(t)&&Fe()},{immediate:!0,deep:!0}),{renderer:m,isReady:N,dispose:Ie,aspectRatio:q}}const Z=e=>!!e&&e.constructor===Array;function E(e){const t={nodes:{},materials:{}};return e&&e.traverse(a=>{a.name&&(t.nodes[a.name]=a),a.material&&!t.materials[a.material.name]&&(t.materials[a.material.name]=a.material)}),t}async function ve(e,t,a,r,n){const{logError:i}=b(),c=new e;n&&n(c),a&&a(c);const s=(Array.isArray(t)?t:[t]).map(d=>new Promise((v,g)=>{c.load(d,h=>{h.scene&&Object.assign(h,E(h.scene)),v(h)},r,h=>g(i("[useLoader] - Failed to load resource",h)))}));return Z(t)?await Promise.all(s):await s[0]}async function ge(e){const t=new f.LoadingManager,a=new f.TextureLoader(t),r=n=>new Promise((i,c)=>{a.load(n,o=>i(o),()=>null,()=>{c(new Error("[useTextures] - Failed to load texture"))})});if(Z(e)){const n=await Promise.all(e.map(i=>r(i)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:i,normalMap:c,roughnessMap:o,metalnessMap:s,aoMap:d}=e;return{map:n?await r(n):null,displacementMap:i?await r(i):null,normalMap:c?await r(c):null,roughnessMap:o?await r(o):null,metalnessMap:s?await r(s):null,aoMap:d?await r(d):null}}}const he={camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:l.computed(()=>window.innerWidth/window.innerHeight)},_=l.shallowReactive(he);function M(){function e(a){return _[a]}function t(a,r){_[a]=r}return{state:_,...l.toRefs(_),getState:e,setState:t}}const H=l.shallowRef(new f.Raycaster),T=l.ref(new f.Vector2),we=l.ref(null);function G(){const{setState:e}=M();e("raycaster",H.value),e("pointer",T),e("currentInstance",we);function t(a){T.value.x=a.clientX/window.innerWidth*2-1,T.value.y=-(a.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),{raycaster:H,pointer:T}}const ye=!0,ee="[TresJS ▲ ■ ●] ";function b(){function e(r,n){console.error(`${ee} ${r}`,n||"")}function t(r){console.warn(`${ee} ${r}`)}function a(r,n){}return{logError:e,logWarning:t,logMessage:a}}function Ce(){const{logWarning:e}=b();function t(r,n,i){let c=null;return r.traverse(o=>{o[n]===i&&(c=o)}),c||e(`Child with ${n} '${i}' not found.`),c}function a(r,n){return t(r,"name",n)}return{seek:t,seekByName:a}}const{logWarning:Me}=b();function be(e){for(const t in e)if(t.indexOf("on")===0)return!0;return!1}function ze(e){}let D=null;const Le={createElement(e,t,a,r){if(e==="template"||de(e))return null;let n;if(r===null&&(r={}),r!=null&&r.args?n=new O.value[e.replace("Tres","")](...r.args):n=new O.value[e.replace("Tres","")],n.isCamera){(!(r!=null&&r.position)||r!=null&&r.position.every(c=>c==0))&&Me("Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗");const{pushCamera:i}=W();i(n)}return(r==null?void 0:r.attach)===void 0&&(n.isMaterial?n.attach="material":n.isBufferGeometry&&(n.attach="geometry")),n},insert(e,t,a){if(D===null&&t.isScene&&(D=t),t===null&&(t=D),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const o=a?t.children.indexOf(a):0;e.parent=t,t.children.splice(o,0,e),e.dispatchEvent({type:"added"})}else typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e));const{onLoop:r}=j();let n=null,i=null;const{raycaster:c}=G();e&&e instanceof f.Mesh&&be(e)&&(r(()=>{var o,s,d;if(t!=null&&t.children&&e&&c){const v=c.value.intersectObjects(t.children);v.length>0&&v[0].object.uuid===e.uuid?(i=v[0],(n===null||n.object.uuid!==(i==null?void 0:i.object.uuid))&&((o=e.onPointerEnter)==null||o.call(e,i)),(s=e.onPointerMove)==null||s.call(e,i)):(i=null,n!==null&&((d=e.onPointerLeave)==null||d.call(e,n))),n=i}}),u.useEventListener(window,"click",()=>{var o;i!==null&&((o=e.onClick)==null||o.call(e,i))}))},remove(e){if(!e)return;const t=e.parentNode;t&&t.removeChild(e)},patchProp(e,t,a,r){if(e){let n=e,i=t;const c=x(i);let o=n==null?void 0:n[c];if(e.parent||(e.parent=D),n.type==="BufferGeometry"&&(i=i.split("-").pop(),n.setAttribute(x(i),new f.BufferAttribute(...r))),i.includes("-")&&o===void 0){const d=i.split("-");o=d.reduce((v,g)=>v[x(g)],n),i=d.pop(),o!=null&&o.set||(n=d.reduce((v,g)=>v[x(g)],n))}let s=r;if(s===""&&(s=!0),u.isFunction(o)){Array.isArray(s)?e[c](...s):e[c](s);return}!(o!=null&&o.set)&&!u.isFunction(o)?n[c]=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){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{createApp:Pe}=l.createRenderer(Le),Se=e=>{const t=Pe(a);function a(){return e&&e.default?e.default():[]}return t};I(V);const{logWarning:ke}=b(),te=l.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:a}){e.physicallyCorrectLights===!0&&ke("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const r=l.ref(),n=l.ref(),i=new V.Scene,{setState:c}=M();c("scene",i),l.onUnmounted(()=>{c("renderer",null)});function o(){const{renderer:v}=Q(n,r,e),{activeCamera:g}=W(),{onLoop:h}=j(),{raycaster:L,pointer:w}=G();h(()=>{var y;g.value&&(L.value.setFromCamera(w.value,g.value),(y=v.value)==null||y.render(i,g.value))})}l.watch(n,o);let s;function d(){s=Se(t),s.provide("useTres",M()),s.provide("extend",I),s.mount(i)}return d(),a({scene:i}),()=>l.h(l.h("div",{ref:r,"data-scene":i.uuid,key:i.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[l.h("div",{style:{width:"100%",height:"100%"}},[l.h("canvas",{ref:n,"data-scene":i.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),Oe={install(e){e.component("TresCanvas",te)}};p.CameraType=J,p.TresCanvas=te,p.catalogue=O,p.default=Oe,p.extend=I,p.isProd=ye,p.trasverseObjects=E,p.useCamera=W,p.useLoader=ve,p.useLogger=b,p.useRaycaster=G,p.useRenderLoop=j,p.useRenderer=Q,p.useSeek=Ce,p.useTexture=ge,p.useTres=M,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.5",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [