@tresjs/core 2.0.0-alpha.4 → 2.0.0-alpha.6

package/README.md

@@ -9,32 +9,59 @@
 
 Tres (Spanish word for "three", pronounced `/tres/` ) is a way of creating ThreeJS scenes with Vue components in a declarative fashion. Think of it as a [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) or [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) but without the need of a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html).
 
-## Setup
+## Docs
+
+Checkout the [docs](https://tresjs.org)
+
+## Demos
+
+- [Stackblitz Collection](https://stackblitz.com/@alvarosabu/collections/tresjs)
+
+## Contribution
+
+We are open to contributions, please read the [contributing guide](/CONTRIBUTING.md) to get started.
+
+
+### Setup
 
 ```
 pnpm install --shamefully-hoist
 ```
 
-## Dev
+### Playground
 
-To run the small playground without Histoire use
+To run the small playground
 
 ```
-pnpm run dev
+pnpm run playground
 ```
 
-## Histoire
+### Build lib
 
-All local demos will be inside [Histoire](https://histoire.dev/) stories.
+To build the core as library mode just use
 
 ```
-pnpm run story:dev
+pnpm run build
 ```
 
-## Build lib
+### Docs
 
-To build the core as library mode just use
+To run de docs in dev mode
 
+```bash
+pnpm run docs:dev
 ```
-pnpm run build
+
+To build them
+
+```bash
+pnpm run docs:build
 ```
+
+## License
+
+[MIT](/LICENSE)
+
+## Sponsors
+
+Be the first to support this project [here](https://github.com/sponsors/alvarosabu) ☺️

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/useRenderer/const.d.ts

@@ -1,11 +1,11 @@
 export declare const rendererPresets: {
     realistic: {
-        outputEncoding: import("three").TextureEncoding;
-        toneMapping: import("three").ToneMapping;
+        outputEncoding: 3001;
+        toneMapping: 4;
         toneMappingExposure: number;
         shadowMap: {
             enabled: boolean;
-            type: import("three").ShadowMapType;
+            type: 2;
         };
     };
 };

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.4
+ * version: v2.0.0-alpha.6
  * (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 Te, defineComponent as Re, onUnmounted as Se, h as P } from "vue";
-import * as oe from "three";
-import { MathUtils as Ae, PerspectiveCamera as F, OrthographicCamera as Oe, Clock as ie, Color as I, sRGBEncoding as ke, ACESFilmicToneMapping as je, PCFSoftShadowMap as _e, PCFShadowMap as Be, 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 Ge } from "three";
-import { createEventHook as U, useRafFn as Ue, resolveUnref as u, useWindowSize as Ne, useElementSize as $e, useDevicePixelRatio as Ve, unrefElement as W, useEventListener as qe, isFunction as Z } from "@vueuse/core";
-const G = M({ uuid: Ae.generateUUID() }), se = (e) => void Object.assign(G.value, e);
-var Je = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Je || {});
-const Ke = 45;
+import { ref as M, watchEffect as xe, toRef as Pe, shallowRef as re, toRefs as oe, computed as ie, watch as O, shallowReactive as Te, createRenderer as Re, defineComponent as ke, onUnmounted as Ae, h as P } from "vue";
+import * as se from "three";
+import { MathUtils as Oe, PerspectiveCamera as z, OrthographicCamera as je, Clock as ue, Color as D, sRGBEncoding as Be, ACESFilmicToneMapping as We, PCFSoftShadowMap as _e, PCFShadowMap as ze, LinearEncoding as Z, NoToneMapping as ee, WebGLRenderer as De, LoadingManager as Fe, TextureLoader as Ie, Raycaster as He, Vector2 as $e, Mesh as Ge, BufferAttribute as Ne } from "three";
+import { createEventHook as G, useRafFn as Ue, resolveUnref as c, useWindowSize as Ve, useElementSize as qe, useDevicePixelRatio as Ye, unrefElement as F, useEventListener as Je, isFunction as te } from "@vueuse/core";
+const $ = M({ uuid: Oe.generateUUID() }), ce = (e) => void Object.assign($.value, e);
+var Ke = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Ke || {});
+const Xe = 45;
 let y;
-function ce() {
-  const { state: e, setState: t, aspectRatio: r } = L();
-  function o(a = "Perspective", s) {
-    var l, p, d;
+function le() {
+  const { state: e, setState: t, aspectRatio: o } = L();
+  function r(a = "Perspective", s) {
+    var f, l, p;
     if (a === "Perspective") {
       const { near: m, far: w, fov: v } = s || {
         near: 0.1,
         far: 1e3,
-        fov: Ke
+        fov: Xe
       };
-      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);
+      y = new z(v, ((f = e.aspectRatio) == null ? void 0 : f.value) || window.innerWidth / window.innerHeight, m, w), (l = e.cameras) == null || l.push(y);
     } else {
-      const { left: m, right: w, top: v, bottom: g, near: E, far: x } = s || {
+      const { left: m, right: w, top: v, bottom: g, near: S, far: x } = s || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,287 +33,318 @@ function ce() {
         near: 0.1,
         far: 1e3
       };
-      y = new Oe(m, w, v, g, E, x), (d = e.cameras) == null || d.push(y);
+      y = new je(m, w, v, g, S, x), (p = e.cameras) == null || p.push(y);
     }
     return e.camera = y, t("camera", e.camera), y;
   }
   function n() {
     var a;
-    e.camera instanceof F && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (a = e.camera) == null || a.updateProjectionMatrix();
+    e.camera instanceof z && 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 F && e.aspectRatio && (a.aspect = e.aspectRatio.value), a.updateProjectionMatrix(), t("camera", a);
+    (s = e.cameras) == null || s.push(a), a instanceof z && 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();
+  return xe(() => {
+    o != null && o.value && n();
   }), {
-    activeCamera: xe(e, "camera"),
-    createCamera: o,
+    activeCamera: Pe(e, "camera"),
+    createCamera: r,
     updateCamera: n,
     pushCamera: i,
-    clearCameras: c
+    clearCameras: u
   };
 }
-const ue = U(), le = U(), N = U(), C = new ie();
-let k = 0, j = 0;
-const { pause: Xe, resume: Ye, isActive: Qe } = Ue(
+const fe = G(), pe = G(), N = G(), b = new ue();
+let j = 0, B = 0;
+const { pause: Qe, resume: Ze, isActive: et } = Ue(
   () => {
-    ue.trigger({ delta: k, elapsed: j, clock: C }), le.trigger({ delta: k, elapsed: j, clock: C }), N.trigger({ delta: k, elapsed: j, clock: C });
+    fe.trigger({ delta: j, elapsed: B, clock: b }), pe.trigger({ delta: j, elapsed: B, clock: b }), N.trigger({ delta: j, elapsed: B, clock: b });
   },
   { immediate: !1 }
 );
 N.on(() => {
-  k = C.getDelta(), j = C.getElapsedTime();
+  j = b.getDelta(), B = b.getElapsedTime();
 });
-function $() {
+function U() {
   return {
-    onBeforeLoop: ue.on,
-    onLoop: le.on,
+    onBeforeLoop: fe.on,
+    onLoop: pe.on,
     onAfterLoop: N.on,
-    pause: Xe,
-    resume: Ye,
-    isActive: Qe
+    pause: Qe,
+    resume: Ze,
+    isActive: et
   };
 }
-function Ze(e) {
-  return e instanceof I ? e : Array.isArray(e) ? new I(...e) : new I(e);
+function tt(e) {
+  return e instanceof D ? e : Array.isArray(e) ? new D(...e) : new D(e);
 }
-const z = {
+const I = {
   realistic: {
-    outputEncoding: ke,
-    toneMapping: je,
+    outputEncoding: Be,
+    toneMapping: We,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
       type: _e
     }
   }
-}, fe = (e, t) => {
-  for (const r of Object.keys(t))
-    t[r] instanceof Object && Object.assign(t[r], fe(e[r], t[r]));
+}, de = (e, t) => {
+  for (const o of Object.keys(t))
+    t[o] instanceof Object && Object.assign(t[o], de(e[o], t[o]));
   return Object.assign(e || {}, t), e;
-}, 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);
+}, nt = "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", at = /* @__PURE__ */ rt(nt);
 function T(e) {
-  return e.replace(/-([a-z])/g, (t, r) => r.toUpperCase());
+  return e.replace(/-([a-z])/g, (t, o) => o.toUpperCase());
 }
-function nt(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 rt(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 at(e, t, r) {
+const d = re(), H = M(!1);
+function ot(e, t, o) {
+  var Q;
   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: d = !1,
-    shadowMapType: m = Be,
+    premultipliedAlpha: f,
+    stencil: l,
+    shadows: p = !1,
+    shadowMapType: m = ze,
     physicallyCorrectLights: w = !1,
     useLegacyLights: v = !1,
-    outputEncoding: g = Y,
-    toneMapping: E = Q,
+    outputEncoding: g = Z,
+    toneMapping: S = ee,
     toneMappingExposure: x = 1,
-    context: me = void 0,
-    powerPreference: ve = "default",
-    preserveDrawingBuffer: ge = !1,
-    clearColor: b,
-    windowSize: we = !1,
-    preset: he = void 0
-  } = ae(r), { setState: B } = L(), { width: V, height: q } = u(we) ? Ne() : $e(t), { logError: ye } = _(), { pixelRatio: J } = Ve(), { pause: Me, resume: be } = $(), D = re(() => V.value / q.value), K = () => {
-    f.value && (f.value.setSize(V.value, q.value), f.value.setPixelRatio(Math.min(J.value, 2)));
+    context: ge = void 0,
+    powerPreference: we = "default",
+    preserveDrawingBuffer: he = !1,
+    clearColor: C,
+    windowSize: V = !1,
+    preset: ye = void 0
+  } = oe(o), { setState: W } = L(), { width: q, height: Y } = c(V) ? Ve() : qe(t), { logError: Me, logWarning: Ce } = E(), { pixelRatio: J } = Ye(), { pause: be, resume: Le } = U(), _ = ie(() => q.value / Y.value);
+  !c(V) && ((Q = t == null ? void 0 : t.value) == null ? void 0 : Q.offsetHeight) === 0 && Ce(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
+You could set windowSize=true to force the canvas to be the size of the window.`);
+  const K = () => {
+    d.value && (d.value.setSize(q.value, Y.value), d.value.setPixelRatio(Math.min(J.value, 2)));
   }, X = () => {
-    if (!f.value)
+    if (!d.value)
       return;
-    const h = u(he);
+    const h = c(ye);
     if (h) {
-      h in z || ye("Renderer Preset must be one of these: " + Object.keys(z).join(", ")), fe(f.value, z[h]);
+      h in I || Me("Renderer Preset must be one of these: " + Object.keys(I).join(", ")), de(d.value, I[h]);
       return;
     }
-    f.value.shadowMap.enabled = u(d), f.value.shadowMap.type = u(m), f.value.toneMapping = u(E) || Q, f.value.toneMappingExposure = u(x), f.value.outputEncoding = u(g) || Y, b != null && b.value && f.value.setClearColor(Ze(u(b))), f.value.useLegacyLights = u(v);
-  }, Ce = () => {
-    const h = W(e);
-    h && (f.value = new De({
+    d.value.shadowMap.enabled = c(p), d.value.shadowMap.type = c(m), d.value.toneMapping = c(S) || ee, d.value.toneMappingExposure = c(x), d.value.outputEncoding = c(g) || Z, C != null && C.value && d.value.setClearColor(tt(c(C))), d.value.useLegacyLights = c(v);
+  }, Ee = () => {
+    const h = F(e);
+    h && (d.value = new De({
       canvas: h,
-      alpha: u(o),
-      antialias: u(n),
-      context: u(me),
-      depth: u(i),
-      failIfMajorPerformanceCaveat: u(a),
-      logarithmicDepthBuffer: u(c),
-      powerPreference: u(ve),
-      precision: u(s),
-      stencil: u(p),
-      preserveDrawingBuffer: u(ge),
-      premultipliedAlpha: u(l)
-    }), B("renderer", f.value), B("clock", new ie()), B("aspectRatio", D), X(), K(), be(), H.value = !0);
-  }, Le = () => {
-    f.value && (f.value.dispose(), f.value = void 0, H.value = !1, Me());
+      alpha: c(r),
+      antialias: c(n),
+      context: c(ge),
+      depth: c(i),
+      failIfMajorPerformanceCaveat: c(a),
+      logarithmicDepthBuffer: c(u),
+      powerPreference: c(we),
+      precision: c(s),
+      stencil: c(l),
+      preserveDrawingBuffer: c(he),
+      premultipliedAlpha: c(f)
+    }), W("renderer", d.value), W("clock", new ue()), W("aspectRatio", _), X(), K(), Le(), H.value = !0);
+  }, Se = () => {
+    d.value && (d.value.dispose(), d.value = void 0, H.value = !1, be());
   };
-  return O([D, J], K), O(
-    [d, m, g, v, E, x, b],
+  return O([_, J], K), O(
+    [p, m, g, v, S, x, C],
     X
   ), O(
     () => [e, t],
     () => {
-      W(e) && W(t) && Ce();
+      F(e) && F(t) && Ee();
     },
     { immediate: !0, deep: !0 }
   ), {
-    renderer: f,
+    renderer: d,
     isReady: H,
-    dispose: Le,
-    aspectRatio: D
+    dispose: Se,
+    aspectRatio: _
   };
 }
-const pe = (e) => !!e && e.constructor === Array;
-function rt(e) {
+const me = (e) => !!e && e.constructor === Array;
+function it(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 wt(e, t, r, o, n) {
-  const { logError: i } = _(), c = new e();
-  n && n(c), r && r(c);
+async function yt(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, d) => {
-      c.load(
-        l,
+    (f) => new Promise((l, p) => {
+      u.load(
+        f,
         (m) => {
-          m.scene && Object.assign(m, rt(m.scene)), p(m);
+          m.scene && Object.assign(m, it(m.scene)), l(m);
         },
-        o,
-        (m) => d(i("[useLoader] - Failed to load resource", m))
+        r,
+        (m) => p(i("[useLoader] - Failed to load resource", m))
       );
     })
   );
-  return pe(t) ? await Promise.all(s) : await s[0];
+  return me(t) ? await Promise.all(s) : await s[0];
 }
-async function ht(e) {
-  const t = new Fe(), r = new Ie(t), o = (n) => new Promise((i, c) => {
-    r.load(
+async function Mt(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)));
+  if (me(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: a, metalnessMap: s, aoMap: l } = e;
+    const {
+      map: n,
+      displacementMap: i,
+      normalMap: u,
+      roughnessMap: a,
+      metalnessMap: s,
+      aoMap: f,
+      alphaMap: l,
+      matcap: p
+    } = 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: f ? await r(f) : null,
+      alphaMap: l ? await r(l) : null,
+      matcap: p ? await r(p) : null
     };
   }
 }
-const ot = {
+const st = {
   camera: void 0,
   cameras: [],
   scene: void 0,
   renderer: void 0,
-  aspectRatio: re(() => window.innerWidth / window.innerHeight)
-}, R = Pe(ot);
+  aspectRatio: ie(() => window.innerWidth / window.innerHeight)
+}, R = Te(st);
 function L() {
-  function e(r) {
-    return R[r];
+  function e(o) {
+    return R[o];
   }
-  function t(r, o) {
-    R[r] = o;
+  function t(o, r) {
+    R[o] = r;
   }
   return {
     state: R,
-    ...ae(R),
+    ...oe(R),
     getState: e,
     setState: t
   };
 }
-const ee = ne(new We()), S = M(new ze()), it = M(null);
-function de() {
+const ne = re(new He()), k = M(new $e()), ut = M(null);
+function ve() {
   const { setState: e } = L();
-  e("raycaster", ee.value), e("pointer", S), e("currentInstance", it);
-  function t(r) {
-    S.value.x = r.clientX / window.innerWidth * 2 - 1, S.value.y = -(r.clientY / window.innerHeight) * 2 + 1;
+  e("raycaster", ne.value), e("pointer", k), e("currentInstance", ut);
+  function t(o) {
+    k.value.x = o.clientX / window.innerWidth * 2 - 1, k.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
   }
   return window.addEventListener("pointermove", t), {
-    raycaster: ee,
-    pointer: S
+    raycaster: ne,
+    pointer: k
   };
 }
-const yt = !0, te = "[TresJS ▲ ■ ●] ";
-function _() {
-  function e(o, n) {
-    console.error(`${te} ${o}`, n || "");
+const Ct = !0, ae = "[TresJS ▲ ■ ●] ";
+function E() {
+  function e(r, n) {
+    console.error(`${ae} ${r}`, n || "");
   }
-  function t(o) {
-    console.warn(`${te} ${o}`);
+  function t(r) {
+    console.warn(`${ae} ${r}`);
   }
-  function r(o, n) {
+  function o(r, n) {
   }
   return {
     logError: e,
     logWarning: t,
-    logMessage: r
+    logMessage: o
   };
 }
-const { logWarning: st } = _();
-function ct(e) {
+function bt() {
+  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: ct } = E();
+function lt(e) {
   for (const t in e)
     if (t.indexOf("on") === 0)
       return !0;
   return !1;
 }
 let A = null;
-const ut = {
-  createElement(e, t, r, o) {
-    if (e === "template" || tt(e))
+const ft = {
+  createElement(e, t, o, r) {
+    if (e === "template" || at(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)) && st(
+    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)) && ct(
         // 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 } = le();
       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) {
+  insert(e, t, o) {
     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;
+      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 } = $();
+    const { onLoop: r } = U();
     let n = null, i = null;
-    const { raycaster: c } = de();
-    e && e instanceof He && ct(e) && (o(() => {
-      var a, s, l;
-      if (t != null && t.children && e && c) {
-        const p = c.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;
+    const { raycaster: u } = ve();
+    e && e instanceof Ge && lt(e) && (r(() => {
+      var a, s, f;
+      if (t != null && t.children && e && u) {
+        const l = u.value.intersectObjects(t.children);
+        l.length > 0 && l[0].object.uuid === e.uuid ? (i = l[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 && ((f = e.onPointerLeave) == null || f.call(e, n))), n = i;
       }
-    }), qe(window, "click", () => {
+    }), Je(window, "click", () => {
       var a;
       i !== null && ((a = e.onClick) == null || a.call(e, i));
     }));
@@ -324,24 +355,28 @@ const ut = {
     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 = T(i);
-      let a = n == null ? void 0 : n[c];
-      if (e.parent || (e.parent = A), n.type === "BufferGeometry" && (i = i.split("-").pop(), n.setAttribute(
-        T(i),
-        new Ge(...o)
-      )), i.includes("-") && a === void 0) {
-        const l = i.split("-");
-        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));
+      const u = T(i);
+      let a = n == null ? void 0 : n[u];
+      if (e.parent || (e.parent = A), n.type === "BufferGeometry") {
+        n.setAttribute(
+          T(i),
+          new Ne(...r)
+        );
+        return;
+      }
+      if (i.includes("-") && a === void 0) {
+        const f = i.split("-");
+        a = f.reduce((l, p) => l[T(p)], n), i = f.pop(), a != null && a.set || (n = f.reduce((l, p) => l[T(p)], n));
       }
-      let s = o;
-      if (s === "" && (s = !0), Z(a)) {
-        Array.isArray(s) ? e[c](...s) : e[c](s);
+      let s = r;
+      if (s === "" && (s = !0), te(a)) {
+        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) && !te(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) {
@@ -356,15 +391,15 @@ const ut = {
   setScopeId: () => void 0,
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
-}, { createApp: lt } = Te(ut), ft = (e) => {
-  const t = lt(r);
-  function r() {
+}, { createApp: pt } = Re(ft), dt = (e) => {
+  const t = pt(o);
+  function o() {
     return e && e.default ? e.default() : [];
   }
   return t;
 };
-se(oe);
-const { logWarning: pt } = _(), dt = Re({
+ce(se);
+const { logWarning: mt } = E(), vt = ke({
   name: "TresCanvas",
   props: [
     "shadows",
@@ -381,31 +416,31 @@ const { logWarning: pt } = _(), dt = Re({
     "windowSize",
     "preset"
   ],
-  setup(e, { slots: t, expose: r }) {
-    e.physicallyCorrectLights === !0 && pt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const o = M(), n = M(), i = new oe.Scene(), { setState: c } = L();
-    c("scene", i), Se(() => {
-      c("renderer", null);
+  setup(e, { slots: t, expose: o }) {
+    e.physicallyCorrectLights === !0 && mt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
+    const r = M(), n = M(), i = new se.Scene(), { setState: u } = L();
+    u("scene", i), Ae(() => {
+      u("renderer", null);
     });
     function a() {
-      const { renderer: p } = at(n, o, e), { activeCamera: d } = ce(), { onLoop: m } = $(), { raycaster: w, pointer: v } = de();
+      const { renderer: l } = ot(n, r, e), { activeCamera: p } = le(), { onLoop: m } = U(), { raycaster: w, pointer: v } = ve();
       m(() => {
         var g;
-        d.value && (w.value.setFromCamera(v.value, d.value), (g = p.value) == null || g.render(i, d.value));
+        p.value && (w.value.setFromCamera(v.value, p.value), (g = l.value) == null || g.render(i, p.value));
       });
     }
     O(n, a);
     let s;
-    function l() {
-      s = ft(t), s.provide("useTres", L()), s.provide("extend", se), s.mount(i);
+    function f() {
+      s = dt(t), s.provide("useTres", L()), s.provide("extend", ce), s.mount(i);
     }
-    return l(), r({
+    return f(), o({
       scene: i
     }), () => P(
       P(
         "div",
         {
-          ref: o,
+          ref: r,
           "data-scene": i.uuid,
           key: i.uuid,
           style: {
@@ -444,25 +479,26 @@ const { logWarning: pt } = _(), dt = Re({
       )
     );
   }
-}), Mt = {
+}), Lt = {
   install(e) {
-    e.component("TresCanvas", dt);
+    e.component("TresCanvas", vt);
   }
 };
 export {
-  Je as CameraType,
-  dt as TresCanvas,
-  G as catalogue,
-  Mt as default,
-  se as extend,
-  yt as isProd,
-  rt as trasverseObjects,
-  ce as useCamera,
-  wt as useLoader,
-  _ as useLogger,
-  de as useRaycaster,
-  $ as useRenderLoop,
-  at as useRenderer,
-  ht as useTexture,
+  Ke as CameraType,
+  vt as TresCanvas,
+  $ as catalogue,
+  Lt as default,
+  ce as extend,
+  Ct as isProd,
+  it as trasverseObjects,
+  le as useCamera,
+  yt as useLoader,
+  E as useLogger,
+  ve as useRaycaster,
+  U as useRenderLoop,
+  ot as useRenderer,
+  bt as useSeek,
+  Mt as useTexture,
   L as useTres
 };

package/dist/tres.umd.cjs

@@ -1,8 +1,9 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-alpha.4
+ * version: v2.0.0-alpha.6
  * (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()}),I=e=>void Object.assign(U.value,e);var J=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(J||{});const ue=45;let C;function z(){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(),W=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}),W.trigger({delta:A,elapsed:k,clock:P})},{immediate:!1});W.on(()=>{A=P.getDelta(),k=P.getElapsedTime()});function j(){return{onBeforeLoop:K.on,onLoop:X.on,onAfterLoop:W.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:Ue=void 0,powerPreference:Ae="default",preserveDrawingBuffer:ke=!1,clearColor:O,windowSize:je=!1,preset:xe=void 0}=l.toRefs(a),{setState:q}=M(),{width:ne,height:ae}=u.resolveUnref(je)?u.useWindowSize():u.useElementSize(t),{logError:_e}=S(),{pixelRatio:re}=u.useDevicePixelRatio(),{pause:Te,resume:De}=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(xe);if(L){L in R||_e("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)},Fe=()=>{const L=u.unrefElement(e);L&&(m.value=new c.WebGLRenderer({canvas:L,alpha:u.resolveUnref(o),antialias:u.resolveUnref(n),context:u.resolveUnref(Ue),depth:u.resolveUnref(i),failIfMajorPerformanceCaveat:u.resolveUnref(r),logarithmicDepthBuffer:u.resolveUnref(f),powerPreference:u.resolveUnref(Ae),precision:u.resolveUnref(s),stencil:u.resolveUnref(v),preserveDrawingBuffer:u.resolveUnref(ke),premultipliedAlpha:u.resolveUnref(d)}),q("renderer",m.value),q("clock",new c.Clock),q("aspectRatio",V),ie(),oe(),De(),G.value=!0)},Be=()=>{m.value&&(m.value.dispose(),m.value=void 0,G.value=!1,Te())};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)&&Fe()},{immediate:!0,deep:!0}),{renderer:m,isReady:G,dispose:Be,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 we={camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:l.computed(()=>window.innerWidth/window.innerHeight)},_=l.shallowReactive(we);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),he=l.ref(null);function N(){const{setState:e}=M();e("raycaster",H.value),e("pointer",T),e("currentInstance",he);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 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:Ce}=S();function Me(e){for(const t in e)if(t.indexOf("on")===0)return!0;return!1}function ze(e){}let D=null;const be={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))&&Ce("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}=z();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}=N();e&&e instanceof c.Mesh&&Me(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:Le}=l.createRenderer(be),Pe=e=>{const t=Le(a);function a(){return e&&e.default?e.default():[]}return t};I($);const{logWarning:Se}=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&&Se("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),l.onUnmounted(()=>{f("renderer",null)});function r(){const{renderer:v}=Q(n,o,e),{activeCamera:g}=z(),{onLoop:w}=j(),{raycaster:b,pointer:h}=N();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=Pe(t),s.provide("useTres",M()),s.provide("extend",I),s.mount(i)}return d(),a({scene:i}),()=>l.h(l.h("div",{ref:o,"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=U,p.default=Oe,p.extend=I,p.isProd=ye,p.trasverseObjects=E,p.useCamera=z,p.useLoader=ve,p.useLogger=S,p.useRaycaster=N,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,s){"use strict";function le(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const V=le(f),O=l.ref({uuid:f.MathUtils.generateUUID()}),F=e=>void Object.assign(O.value,e);var Y=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(Y||{});const ce=45;let C;function W(){const{state:e,setState:t,aspectRatio:r}=M();function a(o="Perspective",u){var v,d,g;if(o==="Perspective"){const{near:h,far:L,fov:w}=u||{near:.1,far:1e3,fov:ce};C=new f.PerspectiveCamera(w,((v=e.aspectRatio)==null?void 0:v.value)||window.innerWidth/window.innerHeight,h,L),(d=e.cameras)==null||d.push(C)}else{const{left:h,right:L,top:w,bottom:y,near:z,far:B}=u||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};C=new f.OrthographicCamera(h,L,w,y,z,B),(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 u;(u=e.cameras)==null||u.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(()=>{r!=null&&r.value&&n()}),{activeCamera:l.toRef(e,"camera"),createCamera:a,updateCamera:n,pushCamera:i,clearCameras:c}}const J=s.createEventHook(),K=s.createEventHook(),I=s.createEventHook(),P=new f.Clock;let U=0,A=0;const{pause:fe,resume:pe,isActive:de}=s.useRafFn(()=>{J.trigger({delta:U,elapsed:A,clock:P}),K.trigger({delta:U,elapsed:A,clock:P}),I.trigger({delta:U,elapsed:A,clock:P})},{immediate:!1});I.on(()=>{U=P.getDelta(),A=P.getElapsedTime()});function j(){return{onBeforeLoop:J.on,onLoop:K.on,onAfterLoop:I.on,pause:fe,resume:pe,isActive:de}}function me(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}}},X=(e,t)=>{for(const r of Object.keys(t))t[r]instanceof Object&&Object.assign(t[r],X(e[r],t[r]));return Object.assign(e||{},t),e},ve=ge("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,r)=>r.toUpperCase())}function ge(e,t){const r=Object.create(null),a=e.split(",");for(let n=0;n<a.length;n++)r[a[n]]=!0;return t?n=>!!r[n.toLowerCase()]:n=>!!r[n]}const m=l.shallowRef(),N=l.ref(!1);function Q(e,t,r){var ue;const{alpha:a=!0,antialias:n=!0,depth:i,logarithmicDepthBuffer:c,failIfMajorPerformanceCaveat:o,precision:u,premultipliedAlpha:v,stencil:d,shadows:g=!1,shadowMapType:h=f.PCFShadowMap,physicallyCorrectLights:L=!1,useLegacyLights:w=!1,outputEncoding:y=f.LinearEncoding,toneMapping:z=f.NoToneMapping,toneMappingExposure:B=1,context:je=void 0,powerPreference:xe="default",preserveDrawingBuffer:_e=!1,clearColor:k,windowSize:ne=!1,preset:Te=void 0}=l.toRefs(r),{setState:$}=M(),{width:ae,height:re}=s.resolveUnref(ne)?s.useWindowSize():s.useElementSize(t),{logError:De,logWarning:ze}=b(),{pixelRatio:oe}=s.useDevicePixelRatio(),{pause:Be,resume:Fe}=j(),q=l.computed(()=>ae.value/re.value);!s.resolveUnref(ne)&&((ue=t==null?void 0:t.value)==null?void 0:ue.offsetHeight)===0&&ze(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
+You could set windowSize=true to force the canvas to be the size of the window.`);const ie=()=>{m.value&&(m.value.setSize(ae.value,re.value),m.value.setPixelRatio(Math.min(oe.value,2)))},se=()=>{if(!m.value)return;const S=s.resolveUnref(Te);if(S){S in R||De("Renderer Preset must be one of these: "+Object.keys(R).join(", ")),X(m.value,R[S]);return}m.value.shadowMap.enabled=s.resolveUnref(g),m.value.shadowMap.type=s.resolveUnref(h),m.value.toneMapping=s.resolveUnref(z)||f.NoToneMapping,m.value.toneMappingExposure=s.resolveUnref(B),m.value.outputEncoding=s.resolveUnref(y)||f.LinearEncoding,k!=null&&k.value&&m.value.setClearColor(me(s.resolveUnref(k))),m.value.useLegacyLights=s.resolveUnref(w)},We=()=>{const S=s.unrefElement(e);S&&(m.value=new f.WebGLRenderer({canvas:S,alpha:s.resolveUnref(a),antialias:s.resolveUnref(n),context:s.resolveUnref(je),depth:s.resolveUnref(i),failIfMajorPerformanceCaveat:s.resolveUnref(o),logarithmicDepthBuffer:s.resolveUnref(c),powerPreference:s.resolveUnref(xe),precision:s.resolveUnref(u),stencil:s.resolveUnref(d),preserveDrawingBuffer:s.resolveUnref(_e),premultipliedAlpha:s.resolveUnref(v)}),$("renderer",m.value),$("clock",new f.Clock),$("aspectRatio",q),se(),ie(),Fe(),N.value=!0)},Ie=()=>{m.value&&(m.value.dispose(),m.value=void 0,N.value=!1,Be())};return l.watch([q,oe],ie),l.watch([g,h,y,w,z,B,k],se),l.watch(()=>[e,t],()=>{s.unrefElement(e)&&s.unrefElement(t)&&We()},{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(r=>{r.name&&(t.nodes[r.name]=r),r.material&&!t.materials[r.material.name]&&(t.materials[r.material.name]=r.material)}),t}async function he(e,t,r,a,n){const{logError:i}=b(),c=new e;n&&n(c),r&&r(c);const u=(Array.isArray(t)?t:[t]).map(v=>new Promise((d,g)=>{c.load(v,h=>{h.scene&&Object.assign(h,E(h.scene)),d(h)},a,h=>g(i("[useLoader] - Failed to load resource",h)))}));return Z(t)?await Promise.all(u):await u[0]}async function we(e){const t=new f.LoadingManager,r=new f.TextureLoader(t),a=n=>new Promise((i,c)=>{r.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=>a(i)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:i,normalMap:c,roughnessMap:o,metalnessMap:u,aoMap:v,alphaMap:d,matcap:g}=e;return{map:n?await a(n):null,displacementMap:i?await a(i):null,normalMap:c?await a(c):null,roughnessMap:o?await a(o):null,metalnessMap:u?await a(u):null,aoMap:v?await a(v):null,alphaMap:d?await a(d):null,matcap:g?await a(g):null}}}const ye={camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:l.computed(()=>window.innerWidth/window.innerHeight)},_=l.shallowReactive(ye);function M(){function e(r){return _[r]}function t(r,a){_[r]=a}return{state:_,...l.toRefs(_),getState:e,setState:t}}const H=l.shallowRef(new f.Raycaster),T=l.ref(new f.Vector2),Ce=l.ref(null);function G(){const{setState:e}=M();e("raycaster",H.value),e("pointer",T),e("currentInstance",Ce);function t(r){T.value.x=r.clientX/window.innerWidth*2-1,T.value.y=-(r.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),{raycaster:H,pointer:T}}const Me=!0,ee="[TresJS ▲ ■ ●] ";function b(){function e(a,n){console.error(`${ee} ${a}`,n||"")}function t(a){console.warn(`${ee} ${a}`)}function r(a,n){}return{logError:e,logWarning:t,logMessage:r}}function be(){const{logWarning:e}=b();function t(a,n,i){let c=null;return a.traverse(o=>{o[n]===i&&(c=o)}),c||e(`Child with ${n} '${i}' not found.`),c}function r(a,n){return t(a,"name",n)}return{seek:t,seekByName:r}}const{logWarning:Le}=b();function Se(e){for(const t in e)if(t.indexOf("on")===0)return!0;return!1}function Ne(e){}let D=null;const Pe={createElement(e,t,r,a){if(e==="template"||ve(e))return null;let n;if(a===null&&(a={}),a!=null&&a.args?n=new O.value[e.replace("Tres","")](...a.args):n=new O.value[e.replace("Tres","")],n.isCamera){(!(a!=null&&a.position)||a!=null&&a.position.every(c=>c==0))&&Le("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(a==null?void 0:a.attach)===void 0&&(n.isMaterial?n.attach="material":n.isBufferGeometry&&(n.attach="geometry")),n},insert(e,t,r){if(D===null&&t.isScene&&(D=t),t===null&&(t=D),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const o=r?t.children.indexOf(r):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:a}=j();let n=null,i=null;const{raycaster:c}=G();e&&e instanceof f.Mesh&&Se(e)&&(a(()=>{var o,u,v;if(t!=null&&t.children&&e&&c){const d=c.value.intersectObjects(t.children);d.length>0&&d[0].object.uuid===e.uuid?(i=d[0],(n===null||n.object.uuid!==(i==null?void 0:i.object.uuid))&&((o=e.onPointerEnter)==null||o.call(e,i)),(u=e.onPointerMove)==null||u.call(e,i)):(i=null,n!==null&&((v=e.onPointerLeave)==null||v.call(e,n))),n=i}}),s.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,r,a){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"){n.setAttribute(x(i),new f.BufferAttribute(...a));return}if(i.includes("-")&&o===void 0){const v=i.split("-");o=v.reduce((d,g)=>d[x(g)],n),i=v.pop(),o!=null&&o.set||(n=v.reduce((d,g)=>d[x(g)],n))}let u=a;if(u===""&&(u=!0),s.isFunction(o)){Array.isArray(u)?e[c](...u):e[c](u);return}!(o!=null&&o.set)&&!s.isFunction(o)?n[c]=u:o.constructor===u.constructor&&(o!=null&&o.copy)?o==null||o.copy(u):Array.isArray(u)?o.set(...u):!o.isColor&&o.setScalar?o.setScalar(u):o.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},{createApp:ke}=l.createRenderer(Pe),Oe=e=>{const t=ke(r);function r(){return e&&e.default?e.default():[]}return t};F(V);const{logWarning:Ue}=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:r}){e.physicallyCorrectLights===!0&&Ue("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=l.ref(),n=l.ref(),i=new V.Scene,{setState:c}=M();c("scene",i),l.onUnmounted(()=>{c("renderer",null)});function o(){const{renderer:d}=Q(n,a,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=d.value)==null||y.render(i,g.value))})}l.watch(n,o);let u;function v(){u=Oe(t),u.provide("useTres",M()),u.provide("extend",F),u.mount(i)}return v(),r({scene:i}),()=>l.h(l.h("div",{ref:a,"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}})])]))}}),Ae={install(e){e.component("TresCanvas",te)}};p.CameraType=Y,p.TresCanvas=te,p.catalogue=O,p.default=Ae,p.extend=F,p.isProd=Me,p.trasverseObjects=E,p.useCamera=W,p.useLoader=he,p.useLogger=b,p.useRaycaster=G,p.useRenderLoop=j,p.useRenderer=Q,p.useSeek=be,p.useTexture=we,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.4",
+  "version": "2.0.0-alpha.6",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -90,7 +90,6 @@
     "vite": "^4.1.4",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.1.0",
-    "vite-plugin-glsl": "^1.1.2",
     "vite-plugin-inspect": "^0.7.16",
     "vite-plugin-require-transform": "^1.0.9",
     "vite-svg-loader": "^4.0.0",