@tresjs/core 2.0.0-alpha.5 → 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/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/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-alpha.5
+ * 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 Se, defineComponent as Te, onUnmounted as Re, h as S } from "vue";
-import * as oe from "three";
-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;
+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 ue() {
+function le() {
   const { state: e, setState: t, aspectRatio: o } = L();
   function r(a = "Perspective", s) {
-    var l, p, d;
+    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: x, far: P } = s || {
+      const { left: m, right: w, top: v, bottom: g, near: S, far: x } = s || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,36 +33,36 @@ function ue() {
         near: 0.1,
         far: 1e3
       };
-      y = new ke(m, w, v, g, x, P), (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 u() {
     e.cameras = [];
   }
-  return Ee(() => {
+  return xe(() => {
     o != null && o.value && n();
   }), {
-    activeCamera: xe(e, "camera"),
+    activeCamera: Pe(e, "camera"),
     createCamera: r,
     updateCamera: n,
     pushCamera: i,
     clearCameras: u
   };
 }
-const ce = G(), le = G(), N = G(), b = new ie();
+const fe = G(), pe = G(), N = G(), b = new ue();
 let j = 0, B = 0;
-const { pause: Xe, resume: Ye, isActive: Qe } = Ge(
+const { pause: Qe, resume: Ze, isActive: et } = Ue(
   () => {
-    ce.trigger({ delta: j, elapsed: B, clock: b }), le.trigger({ delta: j, elapsed: B, clock: b }), N.trigger({ delta: j, elapsed: B, clock: b });
+    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 }
 );
@@ -71,43 +71,44 @@ N.on(() => {
 });
 function U() {
   return {
-    onBeforeLoop: ce.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: Oe,
-    toneMapping: je,
+    outputEncoding: Be,
+    toneMapping: We,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: Be
+      type: _e
     }
   }
-}, fe = (e, t) => {
+}, de = (e, t) => {
   for (const o of Object.keys(t))
-    t[o] instanceof Object && Object.assign(t[o], fe(e[o], t[o]));
+    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, o) => o.toUpperCase());
 }
-function nt(e, t) {
+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, o) {
+const d = re(), H = M(!1);
+function ot(e, t, o) {
+  var Q;
   const {
     alpha: r = !0,
     antialias: n = !0,
@@ -115,92 +116,95 @@ function at(e, t, o) {
     logarithmicDepthBuffer: u,
     failIfMajorPerformanceCaveat: a,
     precision: s,
-    premultipliedAlpha: l,
-    stencil: p,
-    shadows: d = !1,
-    shadowMapType: m = _e,
+    premultipliedAlpha: f,
+    stencil: l,
+    shadows: p = !1,
+    shadowMapType: m = ze,
     physicallyCorrectLights: w = !1,
     useLegacyLights: v = !1,
-    outputEncoding: g = Y,
-    toneMapping: x = Q,
-    toneMappingExposure: P = 1,
-    context: me = void 0,
-    powerPreference: ve = "default",
-    preserveDrawingBuffer: ge = !1,
+    outputEncoding: g = Z,
+    toneMapping: S = ee,
+    toneMappingExposure: x = 1,
+    context: ge = void 0,
+    powerPreference: we = "default",
+    preserveDrawingBuffer: he = !1,
     clearColor: C,
-    windowSize: we = !1,
-    preset: he = void 0
-  } = 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)));
+    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 = c(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 = 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({
+    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: c(r),
       antialias: c(n),
-      context: c(me),
+      context: c(ge),
       depth: c(i),
       failIfMajorPerformanceCaveat: c(a),
       logarithmicDepthBuffer: c(u),
-      powerPreference: c(ve),
+      powerPreference: c(we),
       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());
+      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, x, P, C],
+  return O([_, J], K), O(
+    [p, m, g, v, S, x, C],
     X
   ), O(
     () => [e, t],
     () => {
-      W(e) && W(t) && be();
+      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((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, o, r, n) {
+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) => {
+    (f) => new Promise((l, p) => {
       u.load(
-        l,
+        f,
         (m) => {
-          m.scene && Object.assign(m, rt(m.scene)), p(m);
+          m.scene && Object.assign(m, it(m.scene)), l(m);
         },
         r,
-        (m) => d(i("[useLoader] - Failed to load resource", m))
+        (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) {
+async function Mt(e) {
   const t = new Fe(), o = new Ie(t), r = (n) => new Promise((i, u) => {
     o.load(
       n,
@@ -211,28 +215,39 @@ async function ht(e) {
       }
     );
   });
-  if (pe(e)) {
+  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: u, 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 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
+      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(o) {
     return R[o];
@@ -242,30 +257,30 @@ function L() {
   }
   return {
     state: R,
-    ...ae(R),
+    ...oe(R),
     getState: e,
     setState: t
   };
 }
-const ee = ne(new We()), A = 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", A), e("currentInstance", it);
+  e("raycaster", ne.value), e("pointer", k), e("currentInstance", ut);
   function t(o) {
-    A.value.x = o.clientX / window.innerWidth * 2 - 1, A.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
+    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: A
+    raycaster: ne,
+    pointer: k
   };
 }
-const yt = !0, te = "[TresJS ▲ ■ ●] ";
+const Ct = !0, ae = "[TresJS ▲ ■ ●] ";
 function E() {
   function e(r, n) {
-    console.error(`${te} ${r}`, n || "");
+    console.error(`${ae} ${r}`, n || "");
   }
   function t(r) {
-    console.warn(`${te} ${r}`);
+    console.warn(`${ae} ${r}`);
   }
   function o(r, n) {
   }
@@ -275,7 +290,7 @@ function E() {
     logMessage: o
   };
 }
-function Mt() {
+function bt() {
   const { logWarning: e } = E();
   function t(r, n, i) {
     let u = null;
@@ -291,45 +306,45 @@ function Mt() {
     seekByName: o
   };
 }
-const { logWarning: st } = E();
-function ut(e) {
+const { logWarning: ct } = E();
+function lt(e) {
   for (const t in e)
     if (t.indexOf("on") === 0)
       return !0;
   return !1;
 }
-let k = null;
-const ct = {
+let A = null;
+const ft = {
   createElement(e, t, o, r) {
-    if (e === "template" || tt(e))
+    if (e === "template" || at(e))
       return null;
     let n;
     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(
+      (!(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 } = ue();
+      const { pushCamera: i } = le();
       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, o) {
-    if (k === null && t.isScene && (k = t), t === null && (t = k), t != null && t.isObject3D && (e != null && e.isObject3D)) {
+    if (A === null && t.isScene && (A = t), t === null && (t = A), 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: r } = U();
     let n = null, i = null;
-    const { raycaster: u } = de();
-    e && e instanceof He && ut(e) && (r(() => {
-      var a, s, l;
+    const { raycaster: u } = ve();
+    e && e instanceof Ge && lt(e) && (r(() => {
+      var a, s, f;
       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;
+        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));
     }));
@@ -345,19 +360,23 @@ const ct = {
       let n = e, i = t;
       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, d) => p[T(d)], n), i = l.pop(), a != null && a.set || (n = l.reduce((p, d) => p[T(d)], n));
+      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 = r;
-      if (s === "" && (s = !0), Z(a)) {
+      if (s === "" && (s = !0), te(a)) {
         Array.isArray(s) ? e[u](...s) : e[u](s);
         return;
       }
-      !(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);
+      !(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) {
@@ -372,15 +391,15 @@ const ct = {
   setScopeId: () => void 0,
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
-}, { createApp: lt } = Se(ct), ft = (e) => {
-  const t = lt(o);
+}, { 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 } = E(), dt = Te({
+ce(se);
+const { logWarning: mt } = E(), vt = ke({
   name: "TresCanvas",
   props: [
     "shadows",
@@ -398,27 +417,27 @@ const { logWarning: pt } = E(), dt = Te({
     "preset"
   ],
   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(() => {
+    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, r, e), { activeCamera: d } = ue(), { onLoop: m } = U(), { 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(), o({
+    return f(), o({
       scene: i
-    }), () => S(
-      S(
+    }), () => P(
+      P(
         "div",
         {
           ref: r,
@@ -433,7 +452,7 @@ const { logWarning: pt } = E(), dt = Te({
           }
         },
         [
-          S(
+          P(
             "div",
             {
               style: {
@@ -442,7 +461,7 @@ const { logWarning: pt } = E(), dt = Te({
               }
             },
             [
-              S("canvas", {
+              P("canvas", {
                 ref: n,
                 "data-scene": i.uuid,
                 style: {
@@ -460,26 +479,26 @@ const { logWarning: pt } = E(), dt = Te({
       )
     );
   }
-}), Ct = {
+}), Lt = {
   install(e) {
-    e.component("TresCanvas", dt);
+    e.component("TresCanvas", vt);
   }
 };
 export {
-  Je as CameraType,
-  dt as TresCanvas,
+  Ke as CameraType,
+  vt as TresCanvas,
   $ as catalogue,
-  Ct as default,
-  se as extend,
-  yt as isProd,
-  rt as trasverseObjects,
-  ue as useCamera,
-  wt as useLoader,
+  Lt as default,
+  ce as extend,
+  Ct as isProd,
+  it as trasverseObjects,
+  le as useCamera,
+  yt as useLoader,
   E as useLogger,
-  de as useRaycaster,
+  ve as useRaycaster,
   U as useRenderLoop,
-  at as useRenderer,
-  Mt as useSeek,
-  ht as useTexture,
+  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.5
+ * 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,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"}})});
+(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.5",
+  "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",