@tresjs/core 2.0.0-alpha.0 → 2.0.0-alpha.1

package/dist/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-alpha.0
+ * version: v2.0.0-alpha.1
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { ref as y, watchEffect as Ee, toRef as xe, shallowRef as ne, toRefs as ae, computed as re, watch as T, shallowReactive as Pe, createRenderer as Re, defineComponent as Se, h as x } from "vue";
+import { ref as M, watchEffect as Ee, toRef as xe, shallowRef as ne, toRefs as ae, computed as re, watch as O, shallowReactive as Pe, createRenderer as Re, defineComponent as Se, h as P } from "vue";
 import * as oe from "three";
 import { MathUtils as Te, PerspectiveCamera as _, OrthographicCamera as Oe, Clock as ie, Color as W, sRGBEncoding as Ae, ACESFilmicToneMapping as ke, PCFSoftShadowMap as je, PCFShadowMap as De, LinearEncoding as Y, NoToneMapping as Q, WebGLRenderer as Fe, LoadingManager as _e, TextureLoader as We, Raycaster as ze, Vector2 as Be, Mesh as Ie } from "three";
 import { createEventHook as U, useRafFn as He, resolveUnref as u, useWindowSize as Ge, useElementSize as Ue, useDevicePixelRatio as Ve, unrefElement as z, useEventListener as $e, isFunction as Z } from "@vueuse/core";
-const G = y({ uuid: Te.generateUUID() }), se = (e) => void Object.assign(G.value, e);
+const G = M({ uuid: Te.generateUUID() }), se = (e) => void Object.assign(G.value, e);
 var Ne = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Ne || {});
 const qe = 45;
-let h;
+let y;
 function ce() {
-  const { state: e, setState: t, aspectRatio: r } = k();
+  const { state: e, setState: t, aspectRatio: r } = L();
   function o(a = "Perspective", s) {
-    var l, f, d;
+    var l, p, m;
     if (a === "Perspective") {
-      const { near: m, far: g, fov: v } = s || {
+      const { near: d, far: w, fov: v } = s || {
         near: 0.1,
         far: 1e3,
         fov: qe
       };
-      h = new _(v, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, m, g), (f = e.cameras) == null || f.push(h);
+      y = new _(v, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, d, w), (p = e.cameras) == null || p.push(y);
     } else {
-      const { left: m, right: g, top: v, bottom: b, near: L, far: E } = s || {
+      const { left: d, right: w, top: v, bottom: g, near: E, far: x } = s || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,9 +33,9 @@ function ce() {
         near: 0.1,
         far: 1e3
       };
-      h = new Oe(m, g, v, b, L, E), (d = e.cameras) == null || d.push(h);
+      y = new Oe(d, w, v, g, E, x), (m = e.cameras) == null || m.push(y);
     }
-    return e.camera = h, t("camera", e.camera), h;
+    return e.camera = y, t("camera", e.camera), y;
   }
   function n() {
     var a;
@@ -58,16 +58,16 @@ function ce() {
     clearCameras: c
   };
 }
-const ue = U(), le = U(), V = U(), C = new ie();
-let O = 0, A = 0;
+const ue = U(), le = U(), V = U(), b = new ie();
+let A = 0, k = 0;
 const { pause: Je, resume: Ke, isActive: Xe } = He(
   () => {
-    ue.trigger({ delta: O, elapsed: A, clock: C }), le.trigger({ delta: O, elapsed: A, clock: C }), V.trigger({ delta: O, elapsed: A, clock: C });
+    ue.trigger({ delta: A, elapsed: k, clock: b }), le.trigger({ delta: A, elapsed: k, clock: b }), V.trigger({ delta: A, elapsed: k, clock: b });
   },
   { immediate: !1 }
 );
 V.on(() => {
-  O = C.getDelta(), A = C.getElapsedTime();
+  A = b.getDelta(), k = b.getElapsedTime();
 });
 function $() {
   return {
@@ -106,7 +106,7 @@ function et(e, t) {
     r[o[n]] = !0;
   return t ? (n) => !!r[n.toLowerCase()] : (n) => !!r[n];
 }
-const p = ne(), H = y(!1);
+const f = ne(), H = M(!1);
 function tt(e, t, r) {
   const {
     alpha: o = !0,
@@ -116,35 +116,35 @@ function tt(e, t, r) {
     failIfMajorPerformanceCaveat: a,
     precision: s,
     premultipliedAlpha: l,
-    stencil: f,
-    shadows: d = !1,
-    shadowMapType: m = De,
-    physicallyCorrectLights: g = !1,
+    stencil: p,
+    shadows: m = !1,
+    shadowMapType: d = De,
+    physicallyCorrectLights: w = !1,
     useLegacyLights: v = !1,
-    outputEncoding: b = Y,
-    toneMapping: L = Q,
-    toneMappingExposure: E = 1,
+    outputEncoding: g = Y,
+    toneMapping: E = Q,
+    toneMappingExposure: x = 1,
     context: de = void 0,
     powerPreference: ve = "default",
     preserveDrawingBuffer: ge = !1,
-    clearColor: M,
+    clearColor: C,
     windowSize: we = !1,
     preset: he = void 0
-  } = ae(r), { setState: D } = k(), { width: N, height: q } = u(we) ? Ge() : Ue(t), { logError: ye } = j(), { pixelRatio: J } = Ve(), { pause: Me, resume: Ce } = $(), F = re(() => N.value / q.value), K = () => {
-    p.value && (p.value.setSize(N.value, q.value), p.value.setPixelRatio(Math.min(J.value, 2)));
+  } = ae(r), { setState: D } = L(), { width: N, height: q } = u(we) ? Ge() : Ue(t), { logError: ye } = j(), { pixelRatio: J } = Ve(), { pause: Me, resume: Ce } = $(), F = re(() => N.value / q.value), K = () => {
+    f.value && (f.value.setSize(N.value, q.value), f.value.setPixelRatio(Math.min(J.value, 2)));
   }, X = () => {
-    if (!p.value)
+    if (!f.value)
       return;
-    const w = u(he);
-    if (w) {
-      w in B || ye("Renderer Preset must be one of these: " + Object.keys(B).join(", ")), fe(p.value, B[w]);
+    const h = u(he);
+    if (h) {
+      h in B || ye("Renderer Preset must be one of these: " + Object.keys(B).join(", ")), fe(f.value, B[h]);
       return;
     }
-    p.value.shadowMap.enabled = u(d), p.value.shadowMap.type = u(m), p.value.toneMapping = u(L) || Q, p.value.toneMappingExposure = u(E), p.value.outputEncoding = u(b) || Y, M != null && M.value && p.value.setClearColor(Ye(u(M))), p.value.useLegacyLights = u(v);
+    f.value.shadowMap.enabled = u(m), f.value.shadowMap.type = u(d), f.value.toneMapping = u(E) || Q, f.value.toneMappingExposure = u(x), f.value.outputEncoding = u(g) || Y, C != null && C.value && f.value.setClearColor(Ye(u(C))), f.value.useLegacyLights = u(v);
   }, be = () => {
-    const w = z(e);
-    w && (p.value = new Fe({
-      canvas: w,
+    const h = z(e);
+    h && (f.value = new Fe({
+      canvas: h,
       alpha: u(o),
       antialias: u(n),
       context: u(de),
@@ -153,24 +153,24 @@ function tt(e, t, r) {
       logarithmicDepthBuffer: u(c),
       powerPreference: u(ve),
       precision: u(s),
-      stencil: u(f),
+      stencil: u(p),
       preserveDrawingBuffer: u(ge),
       premultipliedAlpha: u(l)
-    }), D("renderer", p.value), D("clock", new ie()), D("aspectRatio", F), X(), K(), Ce(), H.value = !0);
+    }), D("renderer", f.value), D("clock", new ie()), D("aspectRatio", F), X(), K(), Ce(), H.value = !0);
   }, Le = () => {
-    p.value && (p.value.dispose(), p.value = void 0, H.value = !1, Me());
+    f.value && (f.value.dispose(), f.value = void 0, H.value = !1, Me());
   };
-  return T([F, J], K), T(
-    [d, m, b, v, L, E, M],
+  return O([F, J], K), O(
+    [m, d, g, v, E, x, C],
     X
-  ), T(
+  ), O(
     () => [e, t],
     () => {
       z(e) && z(t) && be();
     },
     { immediate: !0, deep: !0 }
   ), {
-    renderer: p,
+    renderer: f,
     isReady: H,
     dispose: Le,
     aspectRatio: F
@@ -187,14 +187,14 @@ async function dt(e, t, r, o, n) {
   const { logError: i } = j(), c = new e();
   n && n(c), r && r(c);
   const s = (Array.isArray(t) ? t : [t]).map(
-    (l) => new Promise((f, d) => {
+    (l) => new Promise((p, m) => {
       c.load(
         l,
-        (m) => {
-          m.scene && Object.assign(m, nt(m.scene)), f(m);
+        (d) => {
+          d.scene && Object.assign(d, nt(d.scene)), p(d);
         },
         o,
-        (m) => d(i("[useLoader] - Failed to load resource", m))
+        (d) => m(i("[useLoader] - Failed to load resource", d))
       );
     })
   );
@@ -226,35 +226,35 @@ async function vt(e) {
     };
   }
 }
-const P = Pe({
+const R = Pe({
   camera: void 0,
   cameras: [],
   aspectRatio: re(() => window.innerWidth / window.innerHeight)
 });
-function k() {
+function L() {
   function e(r) {
-    return P[r];
+    return R[r];
   }
   function t(r, o) {
-    P[r] = o;
+    R[r] = o;
   }
   return {
-    state: P,
-    ...ae(P),
+    state: R,
+    ...ae(R),
     getState: e,
     setState: t
   };
 }
-const ee = ne(new ze()), R = y(new Be()), at = y(null);
+const ee = ne(new ze()), S = M(new Be()), at = M(null);
 function me() {
-  const { setState: e } = k();
-  e("raycaster", ee.value), e("pointer", R), e("currentInstance", at);
+  const { setState: e } = L();
+  e("raycaster", ee.value), e("pointer", S), e("currentInstance", at);
   function t(r) {
-    R.value.x = r.clientX / window.innerWidth * 2 - 1, R.value.y = -(r.clientY / window.innerHeight) * 2 + 1;
+    S.value.x = r.clientX / window.innerWidth * 2 - 1, S.value.y = -(r.clientY / window.innerHeight) * 2 + 1;
   }
   return window.addEventListener("pointermove", t), {
     raycaster: ee,
-    pointer: R
+    pointer: S
   };
 }
 const gt = !0, te = "[TresJS ▲ ■ ●] ";
@@ -280,7 +280,7 @@ function ot(e) {
       return !0;
   return !1;
 }
-let S = null;
+let T = null;
 const it = {
   createElement(e, t, r, o) {
     if (e === "template" || Ze(e))
@@ -297,7 +297,7 @@ const it = {
     return (o == null ? void 0 : o.attach) === void 0 && (n.isMaterial ? n.attach = "material" : n.isBufferGeometry && (n.attach = "geometry")), n;
   },
   insert(e, t, r) {
-    if (S === null && t.isScene && (S = t), t === null && (t = S), t != null && t.isObject3D && (e != null && e.isObject3D)) {
+    if (T === null && t.isScene && (T = t), t === null && (t = T), t != null && t.isObject3D && (e != null && e.isObject3D)) {
       const a = r ? t.children.indexOf(r) : 0;
       e.parent = t, t.children.splice(a, 0, e), e.dispatchEvent({ type: "added" });
     } else
@@ -308,8 +308,8 @@ const it = {
     e && e instanceof Ie && ot(e) && (o(() => {
       var a, s, l;
       if (t != null && t.children && e && c) {
-        const f = c.value.intersectObjects(t.children);
-        f.length > 0 && f[0].object.uuid === e.uuid ? (i = f[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 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;
       }
     }), $e(window, "click", () => {
       var a;
@@ -327,9 +327,9 @@ const it = {
       let n = e, i = t;
       const c = I(i);
       let a = n == null ? void 0 : n[c];
-      if (e.parent || (e.parent = S), i.includes("-") && a === void 0) {
+      if (e.parent || (e.parent = T), i.includes("-") && a === void 0) {
         const l = i.split("-");
-        a = l.reduce((f, d) => f[I(d)], n), i = l.pop(), a != null && a.set || (n = l.reduce((f, d) => f[I(d)], n));
+        a = l.reduce((p, m) => p[I(m)], n), i = l.pop(), a != null && a.set || (n = l.reduce((p, m) => p[I(m)], n));
       }
       let s = o;
       if (s === "" && (s = !0), Z(a))
@@ -376,23 +376,24 @@ const { logWarning: ut } = j(), lt = Se({
   ],
   setup(e, { slots: t, expose: r }) {
     e.physicallyCorrectLights === !0 && ut("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const o = y(), n = y(), i = new oe.Scene();
-    function c() {
-      const { renderer: l } = tt(n, o, e), { activeCamera: f } = ce(), { onLoop: d } = $(), { raycaster: m, pointer: g } = me();
+    const o = M(), n = M(), i = new oe.Scene(), { setState: c } = L();
+    c("scene", i);
+    function a() {
+      const { renderer: p } = tt(n, o, e), { activeCamera: m } = ce(), { onLoop: d } = $(), { raycaster: w, pointer: v } = me();
       d(() => {
-        var v;
-        f.value && (m.value.setFromCamera(g.value, f.value), (v = l.value) == null || v.render(i, f.value));
+        var g;
+        m.value && (w.value.setFromCamera(v.value, m.value), (g = p.value) == null || g.render(i, m.value));
       });
     }
-    T(n, c);
-    let a;
-    function s() {
-      a = ct(t), a.provide("useTres", k()), a.provide("extend", se), a.mount(i);
+    O(n, a);
+    let s;
+    function l() {
+      s = ct(t), s.provide("useTres", L()), s.provide("extend", se), s.mount(i);
     }
-    return s(), r({
+    return l(), r({
       scene: i
-    }), () => x(
-      x(
+    }), () => P(
+      P(
         "div",
         {
           ref: o,
@@ -405,7 +406,7 @@ const { logWarning: ut } = j(), lt = Se({
           }
         },
         [
-          x(
+          P(
             "div",
             {
               style: {
@@ -414,7 +415,7 @@ const { logWarning: ut } = j(), lt = Se({
               }
             },
             [
-              x("canvas", {
+              P("canvas", {
                 ref: n,
                 style: {
                   display: "block",
@@ -451,5 +452,5 @@ export {
   $ as useRenderLoop,
   tt as useRenderer,
   vt as useTexture,
-  k as useTres
+  L as useTres
 };

package/dist/tres.umd.cjs

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