@tresjs/core 1.3.2 → 1.4.0

package/dist/core/useRenderer/index.d.ts

@@ -1,6 +1,7 @@
 import { MaybeComputedRef, MaybeElementRef } from '@vueuse/core';
 import { WebGLRendererParameters, WebGLRenderer, ShadowMapType } from 'three';
 import type { TextureEncoding, ToneMapping } from 'three';
+import { TresColor } from '../../types';
 export interface UseRendererOptions extends WebGLRendererParameters {
     /**
      * Enable shadows in the Renderer
@@ -10,6 +11,8 @@ export interface UseRendererOptions extends WebGLRendererParameters {
     shadows?: MaybeComputedRef<boolean>;
     /**
      * Set the shadow map type
+     * Can be PCFShadowMap, PCFSoftShadowMap, BasicShadowMap, VSMShadowMap
+     * [see](https://threejs.org/docs/?q=we#api/en/constants/Renderer)
      *
      * @default PCFSoftShadowMap
      */
@@ -23,12 +26,14 @@ export interface UseRendererOptions extends WebGLRendererParameters {
     physicallyCorrectLights?: MaybeComputedRef<boolean>;
     /**
      * Defines the output encoding of the renderer.
+     * Can be LinearEncoding, sRGBEncoding
      *
      * @default LinearEncoding
      */
     outputEncoding?: MaybeComputedRef<TextureEncoding>;
     /**
      * Defines the tone mapping used by the renderer.
+     * Can be NoToneMapping, LinearToneMapping, ReinhardToneMapping, Uncharted2ToneMapping, CineonToneMapping, ACESFilmicToneMapping, CustomToneMapping
      *
      * @default NoToneMapping
      */
@@ -63,7 +68,7 @@ export interface UseRendererOptions extends WebGLRendererParameters {
      *
      * @default 0x000000
      */
-    clearColor?: MaybeComputedRef<string | number>;
+    clearColor?: MaybeComputedRef<TresColor>;
     windowSize?: MaybeComputedRef<boolean>;
 }
 /**

package/dist/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v1.3.2
+ * version: v1.4.0
  * (c) 2022
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { computed as j, watch as O, inject as T, ref as P, defineComponent as N, shallowRef as k, reactive as ve, toRefs as ye, provide as b, onBeforeUnmount as Ce, h as q } from "vue";
-import { useWindowSize as ee, createEventHook as W, useRafFn as Se, useElementSize as Me, useDevicePixelRatio as xe, unrefElement as z, resolveUnref as y } from "@vueuse/core";
-import * as Q from "three";
-import { PerspectiveCamera as $, OrthographicCamera as te, Color as D, Vector3 as Ee, Clock as Te, Scene as Pe, LoadingManager as Re, TextureLoader as Le, PCFShadowMap as Oe, LinearEncoding as be, NoToneMapping as $e, WebGLRenderer as Ae } from "three";
-var Ie = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Ie || {});
-const M = {
+import { computed as N, watch as O, inject as L, ref as b, defineComponent as k, shallowRef as W, reactive as Ce, toRefs as ne, provide as B, onBeforeUnmount as Se, h as Q } from "vue";
+import { useWindowSize as re, createEventHook as G, useRafFn as Me, resolveUnref as p, useElementSize as xe, useDevicePixelRatio as Ee, unrefElement as U } from "@vueuse/core";
+import * as X from "three";
+import { PerspectiveCamera as $, OrthographicCamera as ae, Vector3 as Pe, Color as j, BufferAttribute as Te, Clock as Re, Scene as Le, LoadingManager as be, TextureLoader as Ae, PCFShadowMap as Oe, LinearEncoding as Y, NoToneMapping as Z, WebGLRenderer as Be } from "three";
+var $e = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))($e || {});
+const E = {
   cameras: []
-}, _e = 45;
-let C;
-function ne() {
-  const { width: e, height: t } = ee(), { setState: n } = le();
-  function s(r = "Perspective", u) {
-    if (r === "Perspective") {
-      const { near: a, far: c, fov: p } = u || {
+}, Ie = 45;
+let S;
+function oe() {
+  const { width: e, height: n } = re(), { setState: r } = me();
+  function c(t = "Perspective", s) {
+    if (t === "Perspective") {
+      const { near: u, far: a, fov: o } = s || {
         near: 0.1,
         far: 1e3,
-        fov: _e
+        fov: Ie
       };
-      C = new $(p, i.value, a, c), M.cameras.push(C);
+      S = new $(o, i.value, u, a), E.cameras.push(S);
     } else {
-      const { left: a, right: c, top: p, bottom: m, near: g, far: v } = u || {
+      const { left: u, right: a, top: o, bottom: h, near: m, far: w } = s || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,308 +33,306 @@ function ne() {
         near: 0.1,
         far: 1e3
       };
-      C = new te(a, c, p, m, g, v), M.cameras.push(C);
+      S = new ae(u, a, o, h, m, w), E.cameras.push(S);
     }
-    return M.cameras.push(C), C;
+    return E.cameras.push(S), S;
   }
-  const i = j(() => e.value / t.value), l = j(() => M.cameras[0]);
+  const i = N(() => e.value / n.value), l = N(() => E.cameras[0]);
   function f() {
     l.value instanceof $ && (l.value.aspect = i.value), l.value.updateProjectionMatrix();
   }
-  function o(r) {
-    const u = T("camera");
-    r && u && (u.value = r, n("camera", u.value)), M.cameras.push(r), r instanceof $ && (r.aspect = i.value), r.updateProjectionMatrix();
+  function g(t) {
+    const s = L("camera");
+    t && s && (s.value = t, r("camera", s.value)), E.cameras.push(t), t instanceof $ && (t.aspect = i.value), t.updateProjectionMatrix();
   }
   return O(i, f), {
     activeCamera: l,
-    createCamera: s,
+    createCamera: c,
     updateCamera: f,
-    pushCamera: o
+    pushCamera: g
   };
 }
-const X = "[TresJS ▲ ■ ●] ";
-function I() {
-  function e(s, i) {
-    console.error(`${X} ${s}`, i || "");
+const ee = "[TresJS ▲ ■ ●] ";
+function _() {
+  function e(c, i) {
+    console.error(`${ee} ${c}`, i || "");
   }
-  function t(s) {
-    console.warn(`${X} ${s}`);
+  function n(c) {
+    console.warn(`${ee} ${c}`);
   }
-  function n(s, i) {
+  function r(c, i) {
   }
   return {
     logError: e,
-    logWarning: t,
-    logMessage: n
+    logWarning: n,
+    logMessage: r
   };
 }
-const E = P({ ...Q, uuid: Q.MathUtils.generateUUID() });
-delete E.value.Scene;
-let x;
-function re(e, t = "Tres") {
-  const { logMessage: n, logError: s } = I();
-  !x && e && (x = e);
-  const { createComponentInstances: i } = oe(t);
+const R = b({ ...X, uuid: X.MathUtils.generateUUID() });
+delete R.value.Scene;
+let P;
+function se(e, n = "Tres") {
+  const { logMessage: r, logError: c } = _();
+  !P && e && (P = e);
+  const { createComponentInstances: i } = ie(n);
   return {
     extend: (f) => {
       if (!f) {
-        s("No objects provided to extend catalogue");
+        c("No objects provided to extend catalogue");
         return;
       }
-      E.value = Object.assign(E.value, f);
-      const o = i(P(f));
-      n("Adding objects to catalogue", { objects: f, catalogue: E.value.uuid }), x && o.forEach(([r, u]) => {
-        x._context.components[r] || x.component(r, u);
+      R.value = Object.assign(R.value, f);
+      const g = i(b(f));
+      r("Adding objects to catalogue", { objects: f, catalogue: R.value.uuid }), P && g.forEach(([t, s]) => {
+        P._context.components[t] || P.component(t, s);
       });
     },
-    catalogue: E
+    catalogue: R
   };
 }
-const U = (e) => typeof e < "u", Be = (e) => typeof e == "function", A = (e) => !!e && e.constructor === Array;
-function Fe(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof Ee ? [e.x, e.y, e.z] : e;
+const T = (e) => typeof e < "u", _e = (e) => typeof e == "function", I = (e) => !!e && e.constructor === Array;
+function De(e) {
+  return typeof e == "number" ? [e, e, e] : e instanceof Pe ? [e.x, e.y, e.z] : e;
 }
-function Y(e) {
-  return e instanceof D ? e : Array.isArray(e) ? new D(...e) : new D(e);
+function Fe(e) {
+  return e instanceof j ? e : Array.isArray(e) ? new j(...e) : new j(e);
 }
 const ze = ["rotation", "scale", "position"];
-function oe(e) {
-  const { logMessage: t, logError: n } = I();
-  function s(o, r) {
-    U(o) && U(r) && Object.entries(o).forEach(([u, a]) => {
-      const c = u.replace(/(-\w)/g, (p) => p[1].toUpperCase());
-      if (!(c === "args" || a === void 0)) {
-        ze.includes(c) && a && (a = Fe(a)), o.ref && (o.ref = r);
+function ie(e) {
+  const { logMessage: n, logError: r } = _();
+  function c(t, s) {
+    T(t) && T(s) && Object.entries(t).forEach(([u, a]) => {
+      const o = u.replace(/(-\w)/g, (h) => h[1].toUpperCase());
+      s.setAttribute(o, new Te(...a));
+    });
+  }
+  function i(t, s) {
+    T(t) && T(s) && Object.entries(t).forEach(([u, a]) => {
+      const o = u.replace(/(-\w)/g, (h) => h[1].toUpperCase());
+      if (!(o === "args" || a === void 0)) {
+        ze.includes(o) && a && (a = De(a)), t.ref && (t.ref = s);
         try {
-          if (r[c] && U(r[c].set))
-            r[c].set(...A(a) ? a : [a]);
+          if (s[o] && T(s[o].set))
+            s[o].set(...I(a) ? a : [a]);
           else {
-            if (a === "" && (a = !0), Be(r[c])) {
+            if (a === "" && (a = !0), _e(s[o])) {
               if (u === "center" && !a)
                 return;
-              r[c](...A(a) ? a : [a]);
+              s[o](...I(a) ? a : [a]);
               return;
             }
-            r[c] = a;
+            s[o] = a;
           }
-        } catch (p) {
-          n(`There was an error setting ${c} property`, p);
+        } catch (h) {
+          r(`There was an error setting ${o} property`, h);
         }
       }
     });
   }
-  function i(o) {
+  function l(t) {
     var a;
-    const r = /^Symbol\(Fragment\)$/g, u = /^Symbol\(Text\)$/g;
-    if (r.test(o.type.toString()))
-      return o.children.map((c) => i(c));
-    if (u.test(o.type.toString()))
+    const s = /^Symbol\(Fragment\)$/g, u = /^Symbol\(Text\)$/g;
+    if (s.test(t.type.toString()))
+      return t.children.map((o) => l(o));
+    if (u.test(t.type.toString()))
       return;
     {
-      const c = o.type.name.replace(e, ""), { catalogue: p } = re(), m = T("catalogue") || p;
-      let g;
-      return m && ((a = o == null ? void 0 : o.props) != null && a.args ? m != null && m.value[c] ? g = new m.value[c](...o.props.args) : n(`There is no ${c} in the catalogue`, m == null ? void 0 : m.value.uuid) : g = new m.value[c]()), o != null && o.props && s(o.props, g), g;
+      const o = t.type.name.replace(e, ""), { catalogue: h } = se(), m = L("catalogue") || h;
+      let w;
+      return m && ((a = t == null ? void 0 : t.props) != null && a.args ? m != null && m.value[o] ? w = new m.value[o](...t.props.args) : r(`There is no ${o} in the catalogue`, m == null ? void 0 : m.value.uuid) : w = new m.value[o]()), t != null && t.props && (o === "BufferGeometry" ? c(t.props, w) : i(t.props, w)), w;
     }
   }
-  function l(o, r, u) {
+  function f(t, s, u) {
     if (u.default && (u != null && u.default())) {
-      const a = u.default().map((c) => i(c));
-      return new o(...a.flat().filter(Boolean));
+      const a = u.default().map((o) => l(o));
+      return new t(...a.flat().filter(Boolean));
     } else
-      return r.args ? new o(...r.args) : new o();
+      return s.args ? new t(...s.args) : new t();
   }
-  function f(o) {
-    return Object.entries(o.value).filter(([r, u]) => {
-      var a, c;
-      return (c = (a = u == null ? void 0 : u.prototype) == null ? void 0 : a.constructor) == null ? void 0 : c.toString().includes("class");
-    }).map(([r, u]) => {
-      const a = `${e}${r}`, c = N({
+  function g(t) {
+    return Object.entries(t.value).filter(([s, u]) => {
+      var a, o;
+      return (o = (a = u == null ? void 0 : u.prototype) == null ? void 0 : a.constructor) == null ? void 0 : o.toString().includes("class");
+    }).map(([s, u]) => {
+      const a = `${e}${s}`, o = k({
         name: a,
-        setup(p, { slots: m, attrs: g, ...v }) {
-          const { scene: R } = ue(), w = T("local-scene") || R, S = T("catalogue"), { pushCamera: _ } = ne();
-          let h = l(u, g, m);
-          return s(g, h), (h instanceof $ || h instanceof te) && _(h), h.isObject3D && (w == null || w.value.add(h)), v.expose(h), t(a, {
-            sceneuuid: w == null ? void 0 : w.value.uuid,
-            catalogue: S == null ? void 0 : S.value.uuid,
-            props: p,
+        setup(h, { slots: m, attrs: w, ...M }) {
+          const { scene: D } = pe(), v = L("local-scene") || D, x = L("catalogue"), { pushCamera: C } = oe();
+          let y = f(u, w, m);
+          return i(w, y), (y instanceof $ || y instanceof ae) && C(y), y.isObject3D && (v == null || v.value.add(y)), v != null && v.value && y.isFog && (v.value.fog = y), M.expose(y), n(a, {
+            sceneuuid: v == null ? void 0 : v.value.uuid,
+            catalogue: x == null ? void 0 : x.value.uuid,
+            props: h,
             slots: m.default ? m.default() : void 0,
-            attrs: g,
-            ctx: v,
-            scene: w
+            attrs: w,
+            ctx: M,
+            scene: v
           }), () => {
           };
         }
       });
-      return [a, c];
+      return [a, o];
     });
   }
   return {
-    createComponentInstances: f,
-    processProps: s,
-    createInstanceFromVNode: i
+    createComponentInstances: g,
+    processProps: i,
+    createInstanceFromVNode: l
   };
 }
-const ae = W(), se = W(), ie = W(), Z = new Te(), { pause: De, resume: Ue, isActive: Ve } = Se(
+const ce = G(), ue = G(), le = G(), te = new Re(), { pause: Ue, resume: je, isActive: Ve } = Me(
   () => {
-    const e = Z.getElapsedTime(), t = Z.getDelta();
-    ae.trigger({ delta: t, elapsed: e }), se.trigger({ delta: t, elapsed: e }), ie.trigger({ delta: t, elapsed: e });
+    const e = te.getElapsedTime(), n = te.getDelta();
+    ce.trigger({ delta: n, elapsed: e }), ue.trigger({ delta: n, elapsed: e }), le.trigger({ delta: n, elapsed: e });
   },
   { immediate: !1 }
 );
-function ce() {
+function fe() {
   return {
-    onBeforeLoop: ae.on,
-    onLoop: se.on,
-    onAfterLoop: ie.on,
-    pause: De,
-    resume: Ue,
+    onBeforeLoop: ce.on,
+    onLoop: ue.on,
+    onAfterLoop: le.on,
+    pause: Ue,
+    resume: je,
     isActive: Ve
   };
 }
-const je = k(new Pe());
-function ue() {
+const Ne = W(new Le());
+function pe() {
   return {
-    scene: je
+    scene: Ne
   };
 }
-function Ne(e) {
-  const t = { nodes: {}, materials: {} };
-  return e && e.traverse((n) => {
-    n.name && (t.nodes[n.name] = n), n.material && !t.materials[n.material.name] && (t.materials[n.material.name] = n.material);
-  }), t;
+function ke(e) {
+  const n = { nodes: {}, materials: {} };
+  return e && e.traverse((r) => {
+    r.name && (n.nodes[r.name] = r), r.material && !n.materials[r.material.name] && (n.materials[r.material.name] = r.material);
+  }), n;
 }
-async function Qe(e, t, n, s, i) {
-  const { logError: l } = I(), f = new e();
-  i && i(f), n && n(f);
-  const r = (Array.isArray(t) ? t : [t]).map(
-    (u) => new Promise((a, c) => {
+async function Xe(e, n, r, c, i) {
+  const { logError: l } = _(), f = new e();
+  i && i(f), r && r(f);
+  const t = (Array.isArray(n) ? n : [n]).map(
+    (s) => new Promise((u, a) => {
       f.load(
-        u,
-        (p) => {
-          p.scene && Object.assign(p, Ne(p.scene)), a(p);
-        },
         s,
-        (p) => c(l("[useLoader] - Failed to load resource", p))
+        (o) => {
+          o.scene && Object.assign(o, ke(o.scene)), u(o);
+        },
+        c,
+        (o) => a(l("[useLoader] - Failed to load resource", o))
       );
     })
   );
-  return A(t) ? await Promise.all(r) : await r[0];
+  return I(n) ? await Promise.all(t) : await t[0];
 }
-async function Xe(e) {
-  const t = new Re(), n = new Le(t), s = (i) => new Promise((l, f) => {
-    n.load(
+async function Ye(e) {
+  const n = new be(), r = new Ae(n), c = (i) => new Promise((l, f) => {
+    r.load(
       i,
-      (o) => l(o),
+      (g) => l(g),
       () => null,
       () => {
         f(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (A(e)) {
-    const i = await Promise.all(e.map((l) => s(l)));
+  if (I(e)) {
+    const i = await Promise.all(e.map((l) => c(l)));
     return e.length > 1 ? i : i[0];
   } else {
-    const { map: i, displacementMap: l, normalMap: f, roughnessMap: o, metalnessMap: r, aoMap: u } = e;
+    const { map: i, displacementMap: l, normalMap: f, roughnessMap: g, metalnessMap: t, aoMap: s } = e;
     return {
-      map: i ? await s(i) : null,
-      displacementMap: l ? await s(l) : null,
-      normalMap: f ? await s(f) : null,
-      roughnessMap: o ? await s(o) : null,
-      metalnessMap: r ? await s(r) : null,
-      aoMap: u ? await s(u) : null
+      map: i ? await c(i) : null,
+      displacementMap: l ? await c(l) : null,
+      normalMap: f ? await c(f) : null,
+      roughnessMap: g ? await c(g) : null,
+      metalnessMap: t ? await c(t) : null,
+      aoMap: s ? await c(s) : null
     };
   }
 }
-const L = ve({});
-function le() {
-  function e(n) {
-    return L[n];
+const A = Ce({});
+function me() {
+  function e(r) {
+    return A[r];
   }
-  function t(n, s) {
-    L[n] = s;
+  function n(r, c) {
+    A[r] = c;
   }
   return {
-    state: L,
-    ...ye(L),
+    state: A,
+    ...ne(A),
     getState: e,
-    setState: t
+    setState: n
   };
 }
-const d = k(), V = P(!1);
-function ke(e, t, n) {
+const d = W(), V = b(!1);
+function We(e, n, r) {
   const {
-    alpha: s = !1,
-    antialias: i,
+    alpha: c = !0,
+    antialias: i = !0,
     depth: l,
     logarithmicDepthBuffer: f,
-    failIfMajorPerformanceCaveat: o,
-    precision: r,
-    premultipliedAlpha: u,
-    stencil: a,
-    shadows: c = !1,
-    shadowMapType: p = Oe,
-    physicallyCorrectLights: m = !1,
-    outputEncoding: g = be,
-    toneMapping: v = $e,
-    toneMappingExposure: R = 1,
-    context: w = void 0,
-    powerPreference: S = "default",
-    preserveDrawingBuffer: _ = !1,
-    clearColor: h = Y("#000000"),
-    windowSize: fe = !1
-  } = n, { width: B, height: F } = fe ? ee() : Me(t), { pixelRatio: H } = xe(), { pause: pe, resume: me } = ce(), de = j(() => B.value / F.value), G = () => {
-    d.value && (d.value.setSize(B.value, F.value), d.value.setPixelRatio(Math.min(H.value, 2)));
+    failIfMajorPerformanceCaveat: g,
+    precision: t,
+    premultipliedAlpha: s,
+    stencil: u,
+    shadows: a = !1,
+    shadowMapType: o = Oe,
+    physicallyCorrectLights: h = !1,
+    outputEncoding: m = Y,
+    toneMapping: w = Z,
+    toneMappingExposure: M = 1,
+    context: D = void 0,
+    powerPreference: v = "default",
+    preserveDrawingBuffer: x = !1,
+    clearColor: C,
+    windowSize: y = !1
+  } = ne(r), { width: F, height: z } = p(y) ? re() : xe(n), { pixelRatio: H } = Ee(), { pause: de, resume: ge } = fe(), he = N(() => F.value / z.value), K = () => {
+    d.value && (d.value.setSize(F.value, z.value), d.value.setPixelRatio(Math.min(H.value, 2)));
   }, J = () => {
-    d.value && (d.value.shadowMap.enabled = y(c), d.value.outputEncoding = y(g), d.value.shadowMap.type = y(p), d.value.physicallyCorrectLights = y(m), d.value.toneMapping = y(v), d.value.toneMappingExposure = y(R), d.value.setClearColor(Y(y(h))));
-  }, ge = () => {
-    const K = z(e);
-    if (d.value || !K)
+    d.value && (d.value.shadowMap.enabled = p(a), d.value.shadowMap.type = p(o), d.value.toneMapping = p(w) || Z, d.value.toneMappingExposure = p(M), d.value.outputEncoding = p(m) || Y, C != null && C.value && d.value.setClearColor(Fe(p(C))), d.value.physicallyCorrectLights = p(h));
+  }, we = () => {
+    const q = U(e);
+    if (d.value || !q)
       return;
-    d.value = new Ae({
-      canvas: K,
-      alpha: s,
-      antialias: i,
-      context: w,
-      depth: l,
-      failIfMajorPerformanceCaveat: o,
-      logarithmicDepthBuffer: f,
-      powerPreference: S,
-      precision: r,
-      stencil: a,
-      preserveDrawingBuffer: _,
-      premultipliedAlpha: u
+    d.value = new Be({
+      canvas: q,
+      alpha: p(c),
+      antialias: p(i),
+      context: p(D),
+      depth: p(l),
+      failIfMajorPerformanceCaveat: p(g),
+      logarithmicDepthBuffer: p(f),
+      powerPreference: p(v),
+      precision: p(t),
+      stencil: p(u),
+      preserveDrawingBuffer: p(x),
+      premultipliedAlpha: p(s)
     });
-    const { setState: we } = le();
-    we("renderer", d.value), J(), G(), me(), V.value = !0;
-  }, he = () => {
-    d.value && (d.value.dispose(), d.value = void 0, V.value = !1, pe());
+    const { setState: ye } = me();
+    ye("renderer", d.value), J(), K(), ge(), V.value = !0;
+  }, ve = () => {
+    d.value && (d.value.dispose(), d.value = void 0, V.value = !1, de());
   };
-  return O([B, F, H], G), O(
-    () => [
-      c,
-      p,
-      g,
-      m,
-      v,
-      R,
-      h
-    ],
+  return O([F, z, H], K), O(
+    [a, o, m, h, w, M, C],
     J
   ), O(
-    () => [e, t],
+    () => [e, n],
     () => {
-      z(e) && z(t) && ge();
+      U(e) && U(n) && we();
     },
     { immediate: !0, deep: !0 }
   ), {
     renderer: d,
     isReady: V,
-    dispose: he,
-    aspectRatio: de
+    dispose: ve,
+    aspectRatio: he
   };
 }
-const We = N({
+const Ge = k({
   name: "TresCanvas",
   props: {
     shadows: Boolean,
@@ -349,14 +347,14 @@ const We = N({
     clearColor: String,
     windowSize: Boolean
   },
-  setup(e, { slots: t, attrs: n }) {
-    const { logError: s } = I(), i = P(), l = P(), { renderer: f, dispose: o, aspectRatio: r } = ke(i, l, e), u = k();
-    return b("camera", u), b("renderer", f), b("aspect-ratio", r), t.default && !t.default().some((a) => a.type.name === "Scene") && s("TresCanvas must contain a Scene component."), t.default && !t.default().some((a) => {
-      var c;
-      return (c = a.type.name) == null ? void 0 : c.includes("Camera");
-    }) && s("Scene must contain a Camera component."), Ce(() => o()), () => {
-      if (t.default)
-        return q(
+  setup(e, { slots: n, attrs: r }) {
+    const { logError: c } = _(), i = b(), l = b(), { renderer: f, dispose: g, aspectRatio: t } = We(i, l, e), s = W();
+    return B("camera", s), B("renderer", f), B("aspect-ratio", t), n.default && !n.default().some((u) => u.type.name === "Scene") && c("TresCanvas must contain a Scene component."), n.default && !n.default().some((u) => {
+      var a;
+      return (a = u.type.name) == null ? void 0 : a.includes("Camera");
+    }) && c("Scene must contain a Camera component."), Se(() => g()), () => {
+      if (n.default)
+        return Q(
           "div",
           {
             ref: l,
@@ -364,57 +362,57 @@ const We = N({
               position: "relative",
               width: "100%",
               height: "100vh",
-              ...n.style
+              ...r.style
             }
           },
           [
-            q("canvas", {
+            Q("canvas", {
               ref: i,
               style: { width: "100%", height: "100%", position: "absolute", top: 0, left: 0 }
             }),
-            t.default()
+            n.default()
           ]
         );
     };
   }
-}), He = N({
+}), He = k({
   name: "Scene",
-  setup(e, { slots: t }) {
-    const { scene: n } = ue(), s = T("renderer"), { activeCamera: i } = ne(), { onLoop: l } = ce();
-    return b("local-scene", n), l(() => {
-      s != null && s.value && (i != null && i.value) && (n != null && n.value) && s.value.render(n == null ? void 0 : n.value, i.value);
+  setup(e, { slots: n }) {
+    const { scene: r } = pe(), c = L("renderer"), { activeCamera: i } = oe(), { onLoop: l } = fe();
+    return B("local-scene", r), l(() => {
+      c != null && c.value && (i != null && i.value) && (r != null && r.value) && c.value.render(r == null ? void 0 : r.value, i.value);
     }), () => {
-      if (t.default)
-        return t.default();
+      if (n.default)
+        return n.default();
     };
   }
-}), Ye = Symbol("UseTresState"), Ge = "1.3.2", Ze = {
-  install(e, t) {
-    const n = (t == null ? void 0 : t.prefix) || "Tres";
-    e.component(`${n}Canvas`, We), e.component(`${n}Scene`, He);
-    const { catalogue: s, extend: i } = re(e, n);
-    e.provide("catalogue", s), e.provide("extend", i);
-    const { createComponentInstances: l } = oe(n);
-    l(s).forEach(([o, r]) => {
-      e.component(o, r);
+}), Ze = Symbol("UseTresState"), Ke = "1.4.0", et = {
+  install(e, n) {
+    const r = (n == null ? void 0 : n.prefix) || "Tres";
+    e.component(`${r}Canvas`, Ge), e.component(`${r}Scene`, He);
+    const { catalogue: c, extend: i } = se(e, r);
+    e.provide("catalogue", c), e.provide("extend", i);
+    const { createComponentInstances: l } = ie(r);
+    l(c).forEach(([g, t]) => {
+      e.component(g, t);
     }), window.__TRES__ = {
       app: e,
-      version: Ge
+      version: Ke
     };
   }
 };
 export {
-  Ie as CameraType,
-  Ye as UseTresStateSymbol,
-  Ze as default,
-  Ne as trasverseObjects,
-  ne as useCamera,
-  re as useCatalogue,
-  oe as useInstanceCreator,
-  Qe as useLoader,
-  ce as useRenderLoop,
-  ke as useRenderer,
-  ue as useScene,
-  Xe as useTexture,
-  le as useTres
+  $e as CameraType,
+  Ze as UseTresStateSymbol,
+  et as default,
+  ke as trasverseObjects,
+  oe as useCamera,
+  se as useCatalogue,
+  ie as useInstanceCreator,
+  Xe as useLoader,
+  fe as useRenderLoop,
+  We as useRenderer,
+  pe as useScene,
+  Ye as useTexture,
+  me as useTres
 };

package/dist/tres.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/core
- * version: v1.3.2
+ * version: v1.4.0
  * (c) 2022
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(d,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("@vueuse/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","three"],i):(d=typeof globalThis<"u"?globalThis:d||self,i(d.tres={},d.Vue,d.VueUseCore,d.Three))})(this,function(d,i,h,g){"use strict";function re(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const W=re(g);var q=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(q||{});const O={cameras:[]},ae=45;let P;function A(){const{width:e,height:t}=h.useWindowSize(),{setState:n}=F();function r(a="Perspective",l){if(a==="Perspective"){const{near:s,far:u,fov:m}=l||{near:.1,far:1e3,fov:ae};P=new g.PerspectiveCamera(m,c.value,s,u),O.cameras.push(P)}else{const{left:s,right:u,top:m,bottom:C,near:y,far:M}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};P=new g.OrthographicCamera(s,u,m,C,y,M),O.cameras.push(P)}return O.cameras.push(P),P}const c=i.computed(()=>e.value/t.value),f=i.computed(()=>O.cameras[0]);function p(){f.value instanceof g.PerspectiveCamera&&(f.value.aspect=c.value),f.value.updateProjectionMatrix()}function o(a){const l=i.inject("camera");a&&l&&(l.value=a,n("camera",l.value)),O.cameras.push(a),a instanceof g.PerspectiveCamera&&(a.aspect=c.value),a.updateProjectionMatrix()}return i.watch(c,p),{activeCamera:f,createCamera:r,updateCamera:p,pushCamera:o}}const G="[TresJS ▲ ■ ●] ";function _(){function e(r,c){console.error(`${G} ${r}`,c||"")}function t(r){console.warn(`${G} ${r}`)}function n(r,c){}return{logError:e,logWarning:t,logMessage:n}}const L=i.ref({...W,uuid:W.MathUtils.generateUUID()});delete L.value.Scene;let b;function I(e,t="Tres"){const{logMessage:n,logError:r}=_();!b&&e&&(b=e);const{createComponentInstances:c}=z(t);return{extend:p=>{if(!p){r("No objects provided to extend catalogue");return}L.value=Object.assign(L.value,p);const o=c(i.ref(p));n("Adding objects to catalogue",{objects:p,catalogue:L.value.uuid}),b&&o.forEach(([a,l])=>{b._context.components[a]||b.component(a,l)})},catalogue:L}}const $=e=>typeof e<"u",oe=e=>typeof e=="function",j=e=>!!e&&e.constructor===Array;function se(e){return typeof e=="number"?[e,e,e]:e instanceof g.Vector3?[e.x,e.y,e.z]:e}function J(e){return e instanceof g.Color?e:Array.isArray(e)?new g.Color(...e):new g.Color(e)}const ie=["rotation","scale","position"];function z(e){const{logMessage:t,logError:n}=_();function r(o,a){$(o)&&$(a)&&Object.entries(o).forEach(([l,s])=>{const u=l.replace(/(-\w)/g,m=>m[1].toUpperCase());if(!(u==="args"||s===void 0)){ie.includes(u)&&s&&(s=se(s)),o.ref&&(o.ref=a);try{if(a[u]&&$(a[u].set))a[u].set(...j(s)?s:[s]);else{if(s===""&&(s=!0),oe(a[u])){if(l==="center"&&!s)return;a[u](...j(s)?s:[s]);return}a[u]=s}}catch(m){n(`There was an error setting ${u} property`,m)}}})}function c(o){var s;const a=/^Symbol\(Fragment\)$/g,l=/^Symbol\(Text\)$/g;if(a.test(o.type.toString()))return o.children.map(u=>c(u));if(l.test(o.type.toString()))return;{const u=o.type.name.replace(e,""),{catalogue:m}=I(),C=i.inject("catalogue")||m;let y;return C&&((s=o==null?void 0:o.props)!=null&&s.args?C!=null&&C.value[u]?y=new C.value[u](...o.props.args):n(`There is no ${u} in the catalogue`,C==null?void 0:C.value.uuid):y=new C.value[u]),o!=null&&o.props&&r(o.props,y),y}}function f(o,a,l){if(l.default&&(l!=null&&l.default())){const s=l.default().map(u=>c(u));return new o(...s.flat().filter(Boolean))}else return a.args?new o(...a.args):new o}function p(o){return Object.entries(o.value).filter(([a,l])=>{var s,u;return(u=(s=l==null?void 0:l.prototype)==null?void 0:s.constructor)==null?void 0:u.toString().includes("class")}).map(([a,l])=>{const s=`${e}${a}`,u=i.defineComponent({name:s,setup(m,{slots:C,attrs:y,...M}){const{scene:T}=D(),v=i.inject("local-scene")||T,x=i.inject("catalogue"),{pushCamera:V}=A();let S=f(l,y,C);return r(y,S),(S instanceof g.PerspectiveCamera||S instanceof g.OrthographicCamera)&&V(S),S.isObject3D&&(v==null||v.value.add(S)),M.expose(S),t(s,{sceneuuid:v==null?void 0:v.value.uuid,catalogue:x==null?void 0:x.value.uuid,props:m,slots:C.default?C.default():void 0,attrs:y,ctx:M,scene:v}),()=>{}}});return[s,u]})}return{createComponentInstances:p,processProps:r,createInstanceFromVNode:c}}const K=h.createEventHook(),Q=h.createEventHook(),X=h.createEventHook(),Y=new g.Clock,{pause:ce,resume:ue,isActive:le}=h.useRafFn(()=>{const e=Y.getElapsedTime(),t=Y.getDelta();K.trigger({delta:t,elapsed:e}),Q.trigger({delta:t,elapsed:e}),X.trigger({delta:t,elapsed:e})},{immediate:!1});function B(){return{onBeforeLoop:K.on,onLoop:Q.on,onAfterLoop:X.on,pause:ce,resume:ue,isActive:le}}const fe=i.shallowRef(new g.Scene);function D(){return{scene:fe}}function Z(e){const t={nodes:{},materials:{}};return e&&e.traverse(n=>{n.name&&(t.nodes[n.name]=n),n.material&&!t.materials[n.material.name]&&(t.materials[n.material.name]=n.material)}),t}async function pe(e,t,n,r,c){const{logError:f}=_(),p=new e;c&&c(p),n&&n(p);const a=(Array.isArray(t)?t:[t]).map(l=>new Promise((s,u)=>{p.load(l,m=>{m.scene&&Object.assign(m,Z(m.scene)),s(m)},r,m=>u(f("[useLoader] - Failed to load resource",m)))}));return j(t)?await Promise.all(a):await a[0]}async function de(e){const t=new g.LoadingManager,n=new g.TextureLoader(t),r=c=>new Promise((f,p)=>{n.load(c,o=>f(o),()=>null,()=>{p(new Error("[useTextures] - Failed to load texture"))})});if(j(e)){const c=await Promise.all(e.map(f=>r(f)));return e.length>1?c:c[0]}else{const{map:c,displacementMap:f,normalMap:p,roughnessMap:o,metalnessMap:a,aoMap:l}=e;return{map:c?await r(c):null,displacementMap:f?await r(f):null,normalMap:p?await r(p):null,roughnessMap:o?await r(o):null,metalnessMap:a?await r(a):null,aoMap:l?await r(l):null}}}const U=i.reactive({});function F(){function e(n){return U[n]}function t(n,r){U[n]=r}return{state:U,...i.toRefs(U),getState:e,setState:t}}const w=i.shallowRef(),R=i.ref(!1);function E(e,t,n){const{alpha:r=!1,antialias:c,depth:f,logarithmicDepthBuffer:p,failIfMajorPerformanceCaveat:o,precision:a,premultipliedAlpha:l,stencil:s,shadows:u=!1,shadowMapType:m=g.PCFShadowMap,physicallyCorrectLights:C=!1,outputEncoding:y=g.LinearEncoding,toneMapping:M=g.NoToneMapping,toneMappingExposure:T=1,context:v=void 0,powerPreference:x="default",preserveDrawingBuffer:V=!1,clearColor:S=J("#000000"),windowSize:ye=!1}=n,{width:k,height:N}=ye?h.useWindowSize():h.useElementSize(t),{pixelRatio:H}=h.useDevicePixelRatio(),{pause:Se,resume:ve}=B(),Me=i.computed(()=>k.value/N.value),ee=()=>{w.value&&(w.value.setSize(k.value,N.value),w.value.setPixelRatio(Math.min(H.value,2)))},te=()=>{w.value&&(w.value.shadowMap.enabled=h.resolveUnref(u),w.value.outputEncoding=h.resolveUnref(y),w.value.shadowMap.type=h.resolveUnref(m),w.value.physicallyCorrectLights=h.resolveUnref(C),w.value.toneMapping=h.resolveUnref(M),w.value.toneMappingExposure=h.resolveUnref(T),w.value.setClearColor(J(h.resolveUnref(S))))},Pe=()=>{const ne=h.unrefElement(e);if(w.value||!ne)return;w.value=new g.WebGLRenderer({canvas:ne,alpha:r,antialias:c,context:v,depth:f,failIfMajorPerformanceCaveat:o,logarithmicDepthBuffer:p,powerPreference:x,precision:a,stencil:s,preserveDrawingBuffer:V,premultipliedAlpha:l});const{setState:Le}=F();Le("renderer",w.value),te(),ee(),ve(),R.value=!0},Oe=()=>{w.value&&(w.value.dispose(),w.value=void 0,R.value=!1,Se())};return i.watch([k,N,H],ee),i.watch(()=>[u,m,y,C,M,T,S],te),i.watch(()=>[e,t],()=>{h.unrefElement(e)&&h.unrefElement(t)&&Pe()},{immediate:!0,deep:!0}),{renderer:w,isReady:R,dispose:Oe,aspectRatio:Me}}const me=i.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Object,physicallyCorrectLights:Boolean,outputEncoding:Object,toneMapping:Object,toneMappingExposure:Number,context:Object,powerPreference:Object,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:Boolean},setup(e,{slots:t,attrs:n}){const{logError:r}=_(),c=i.ref(),f=i.ref(),{renderer:p,dispose:o,aspectRatio:a}=E(c,f,e),l=i.shallowRef();return i.provide("camera",l),i.provide("renderer",p),i.provide("aspect-ratio",a),t.default&&!t.default().some(s=>s.type.name==="Scene")&&r("TresCanvas must contain a Scene component."),t.default&&!t.default().some(s=>{var u;return(u=s.type.name)==null?void 0:u.includes("Camera")})&&r("Scene must contain a Camera component."),i.onBeforeUnmount(()=>o()),()=>{if(t.default)return i.h("div",{ref:f,style:{position:"relative",width:"100%",height:"100vh",...n.style}},[i.h("canvas",{ref:c,style:{width:"100%",height:"100%",position:"absolute",top:0,left:0}}),t.default()])}}}),ge=i.defineComponent({name:"Scene",setup(e,{slots:t}){const{scene:n}=D(),r=i.inject("renderer"),{activeCamera:c}=A(),{onLoop:f}=B();return i.provide("local-scene",n),f(()=>{r!=null&&r.value&&(c!=null&&c.value)&&(n!=null&&n.value)&&r.value.render(n==null?void 0:n.value,c.value)}),()=>{if(t.default)return t.default()}}}),he=Symbol("UseTresState"),we="1.3.2",Ce={install(e,t){const n=(t==null?void 0:t.prefix)||"Tres";e.component(`${n}Canvas`,me),e.component(`${n}Scene`,ge);const{catalogue:r,extend:c}=I(e,n);e.provide("catalogue",r),e.provide("extend",c);const{createComponentInstances:f}=z(n);f(r).forEach(([o,a])=>{e.component(o,a)}),window.__TRES__={app:e,version:we}}};d.CameraType=q,d.UseTresStateSymbol=he,d.default=Ce,d.trasverseObjects=Z,d.useCamera=A,d.useCatalogue=I,d.useInstanceCreator=z,d.useLoader=pe,d.useRenderLoop=B,d.useRenderer=E,d.useScene=D,d.useTexture=de,d.useTres=F,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(g,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("@vueuse/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","three"],i):(g=typeof globalThis<"u"?globalThis:g||self,i(g.tres={},g.Vue,g.VueUseCore,g.Three))})(this,function(g,i,l,m){"use strict";function re(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const q=re(m);var G=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(G||{});const b={cameras:[]},ae=45;let U;function D(){const{width:e,height:n}=l.useWindowSize(),{setState:r}=V();function s(t="Perspective",c){if(t==="Perspective"){const{near:f,far:a,fov:o}=c||{near:.1,far:1e3,fov:ae};U=new m.PerspectiveCamera(o,u.value,f,a),b.cameras.push(U)}else{const{left:f,right:a,top:o,bottom:C,near:w,far:y}=c||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};U=new m.OrthographicCamera(f,a,o,C,w,y),b.cameras.push(U)}return b.cameras.push(U),U}const u=i.computed(()=>e.value/n.value),p=i.computed(()=>b.cameras[0]);function d(){p.value instanceof m.PerspectiveCamera&&(p.value.aspect=u.value),p.value.updateProjectionMatrix()}function v(t){const c=i.inject("camera");t&&c&&(c.value=t,r("camera",c.value)),b.cameras.push(t),t instanceof m.PerspectiveCamera&&(t.aspect=u.value),t.updateProjectionMatrix()}return i.watch(u,d),{activeCamera:p,createCamera:s,updateCamera:d,pushCamera:v}}const K="[TresJS ▲ ■ ●] ";function _(){function e(s,u){console.error(`${K} ${s}`,u||"")}function n(s){console.warn(`${K} ${s}`)}function r(s,u){}return{logError:e,logWarning:n,logMessage:r}}const O=i.ref({...q,uuid:q.MathUtils.generateUUID()});delete O.value.Scene;let L;function T(e,n="Tres"){const{logMessage:r,logError:s}=_();!L&&e&&(L=e);const{createComponentInstances:u}=$(n);return{extend:d=>{if(!d){s("No objects provided to extend catalogue");return}O.value=Object.assign(O.value,d);const v=u(i.ref(d));r("Adding objects to catalogue",{objects:d,catalogue:O.value.uuid}),L&&v.forEach(([t,c])=>{L._context.components[t]||L.component(t,c)})},catalogue:O}}const x=e=>typeof e<"u",oe=e=>typeof e=="function",B=e=>!!e&&e.constructor===Array;function se(e){return typeof e=="number"?[e,e,e]:e instanceof m.Vector3?[e.x,e.y,e.z]:e}function ie(e){return e instanceof m.Color?e:Array.isArray(e)?new m.Color(...e):new m.Color(e)}const ce=["rotation","scale","position"];function $(e){const{logMessage:n,logError:r}=_();function s(t,c){x(t)&&x(c)&&Object.entries(t).forEach(([f,a])=>{const o=f.replace(/(-\w)/g,C=>C[1].toUpperCase());c.setAttribute(o,new m.BufferAttribute(...a))})}function u(t,c){x(t)&&x(c)&&Object.entries(t).forEach(([f,a])=>{const o=f.replace(/(-\w)/g,C=>C[1].toUpperCase());if(!(o==="args"||a===void 0)){ce.includes(o)&&a&&(a=se(a)),t.ref&&(t.ref=c);try{if(c[o]&&x(c[o].set))c[o].set(...B(a)?a:[a]);else{if(a===""&&(a=!0),oe(c[o])){if(f==="center"&&!a)return;c[o](...B(a)?a:[a]);return}c[o]=a}}catch(C){r(`There was an error setting ${o} property`,C)}}})}function p(t){var a;const c=/^Symbol\(Fragment\)$/g,f=/^Symbol\(Text\)$/g;if(c.test(t.type.toString()))return t.children.map(o=>p(o));if(f.test(t.type.toString()))return;{const o=t.type.name.replace(e,""),{catalogue:C}=T(),w=i.inject("catalogue")||C;let y;return w&&((a=t==null?void 0:t.props)!=null&&a.args?w!=null&&w.value[o]?y=new w.value[o](...t.props.args):r(`There is no ${o} in the catalogue`,w==null?void 0:w.value.uuid):y=new w.value[o]),t!=null&&t.props&&(o==="BufferGeometry"?s(t.props,y):u(t.props,y)),y}}function d(t,c,f){if(f.default&&(f!=null&&f.default())){const a=f.default().map(o=>p(o));return new t(...a.flat().filter(Boolean))}else return c.args?new t(...c.args):new t}function v(t){return Object.entries(t.value).filter(([c,f])=>{var a,o;return(o=(a=f==null?void 0:f.prototype)==null?void 0:a.constructor)==null?void 0:o.toString().includes("class")}).map(([c,f])=>{const a=`${e}${c}`,o=i.defineComponent({name:a,setup(C,{slots:w,attrs:y,...j}){const{scene:N}=F(),S=i.inject("local-scene")||N,A=i.inject("catalogue"),{pushCamera:P}=D();let M=d(f,y,w);return u(y,M),(M instanceof m.PerspectiveCamera||M instanceof m.OrthographicCamera)&&P(M),M.isObject3D&&(S==null||S.value.add(M)),S!=null&&S.value&&M.isFog&&(S.value.fog=M),j.expose(M),n(a,{sceneuuid:S==null?void 0:S.value.uuid,catalogue:A==null?void 0:A.value.uuid,props:C,slots:w.default?w.default():void 0,attrs:y,ctx:j,scene:S}),()=>{}}});return[a,o]})}return{createComponentInstances:v,processProps:u,createInstanceFromVNode:p}}const J=l.createEventHook(),Q=l.createEventHook(),X=l.createEventHook(),Y=new m.Clock,{pause:ue,resume:le,isActive:fe}=l.useRafFn(()=>{const e=Y.getElapsedTime(),n=Y.getDelta();J.trigger({delta:n,elapsed:e}),Q.trigger({delta:n,elapsed:e}),X.trigger({delta:n,elapsed:e})},{immediate:!1});function z(){return{onBeforeLoop:J.on,onLoop:Q.on,onAfterLoop:X.on,pause:ue,resume:le,isActive:fe}}const pe=i.shallowRef(new m.Scene);function F(){return{scene:pe}}function Z(e){const n={nodes:{},materials:{}};return e&&e.traverse(r=>{r.name&&(n.nodes[r.name]=r),r.material&&!n.materials[r.material.name]&&(n.materials[r.material.name]=r.material)}),n}async function de(e,n,r,s,u){const{logError:p}=_(),d=new e;u&&u(d),r&&r(d);const t=(Array.isArray(n)?n:[n]).map(c=>new Promise((f,a)=>{d.load(c,o=>{o.scene&&Object.assign(o,Z(o.scene)),f(o)},s,o=>a(p("[useLoader] - Failed to load resource",o)))}));return B(n)?await Promise.all(t):await t[0]}async function me(e){const n=new m.LoadingManager,r=new m.TextureLoader(n),s=u=>new Promise((p,d)=>{r.load(u,v=>p(v),()=>null,()=>{d(new Error("[useTextures] - Failed to load texture"))})});if(B(e)){const u=await Promise.all(e.map(p=>s(p)));return e.length>1?u:u[0]}else{const{map:u,displacementMap:p,normalMap:d,roughnessMap:v,metalnessMap:t,aoMap:c}=e;return{map:u?await s(u):null,displacementMap:p?await s(p):null,normalMap:d?await s(d):null,roughnessMap:v?await s(v):null,metalnessMap:t?await s(t):null,aoMap:c?await s(c):null}}}const I=i.reactive({});function V(){function e(r){return I[r]}function n(r,s){I[r]=s}return{state:I,...i.toRefs(I),getState:e,setState:n}}const h=i.shallowRef(),k=i.ref(!1);function E(e,n,r){const{alpha:s=!0,antialias:u=!0,depth:p,logarithmicDepthBuffer:d,failIfMajorPerformanceCaveat:v,precision:t,premultipliedAlpha:c,stencil:f,shadows:a=!1,shadowMapType:o=m.PCFShadowMap,physicallyCorrectLights:C=!1,outputEncoding:w=m.LinearEncoding,toneMapping:y=m.NoToneMapping,toneMappingExposure:j=1,context:N=void 0,powerPreference:S="default",preserveDrawingBuffer:A=!1,clearColor:P,windowSize:M=!1}=i.toRefs(r),{width:R,height:W}=l.resolveUnref(M)?l.useWindowSize():l.useElementSize(n),{pixelRatio:H}=l.useDevicePixelRatio(),{pause:ye,resume:Se}=z(),Me=i.computed(()=>R.value/W.value),ee=()=>{h.value&&(h.value.setSize(R.value,W.value),h.value.setPixelRatio(Math.min(H.value,2)))},te=()=>{h.value&&(h.value.shadowMap.enabled=l.resolveUnref(a),h.value.shadowMap.type=l.resolveUnref(o),h.value.toneMapping=l.resolveUnref(y)||m.NoToneMapping,h.value.toneMappingExposure=l.resolveUnref(j),h.value.outputEncoding=l.resolveUnref(w)||m.LinearEncoding,P!=null&&P.value&&h.value.setClearColor(ie(l.resolveUnref(P))),h.value.physicallyCorrectLights=l.resolveUnref(C))},Pe=()=>{const ne=l.unrefElement(e);if(h.value||!ne)return;h.value=new m.WebGLRenderer({canvas:ne,alpha:l.resolveUnref(s),antialias:l.resolveUnref(u),context:l.resolveUnref(N),depth:l.resolveUnref(p),failIfMajorPerformanceCaveat:l.resolveUnref(v),logarithmicDepthBuffer:l.resolveUnref(d),powerPreference:l.resolveUnref(S),precision:l.resolveUnref(t),stencil:l.resolveUnref(f),preserveDrawingBuffer:l.resolveUnref(A),premultipliedAlpha:l.resolveUnref(c)});const{setState:be}=V();be("renderer",h.value),te(),ee(),Se(),k.value=!0},Ue=()=>{h.value&&(h.value.dispose(),h.value=void 0,k.value=!1,ye())};return i.watch([R,W,H],ee),i.watch([a,o,w,C,y,j,P],te),i.watch(()=>[e,n],()=>{l.unrefElement(e)&&l.unrefElement(n)&&Pe()},{immediate:!0,deep:!0}),{renderer:h,isReady:k,dispose:Ue,aspectRatio:Me}}const ge=i.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Object,physicallyCorrectLights:Boolean,outputEncoding:Object,toneMapping:Object,toneMappingExposure:Number,context:Object,powerPreference:Object,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:Boolean},setup(e,{slots:n,attrs:r}){const{logError:s}=_(),u=i.ref(),p=i.ref(),{renderer:d,dispose:v,aspectRatio:t}=E(u,p,e),c=i.shallowRef();return i.provide("camera",c),i.provide("renderer",d),i.provide("aspect-ratio",t),n.default&&!n.default().some(f=>f.type.name==="Scene")&&s("TresCanvas must contain a Scene component."),n.default&&!n.default().some(f=>{var a;return(a=f.type.name)==null?void 0:a.includes("Camera")})&&s("Scene must contain a Camera component."),i.onBeforeUnmount(()=>v()),()=>{if(n.default)return i.h("div",{ref:p,style:{position:"relative",width:"100%",height:"100vh",...r.style}},[i.h("canvas",{ref:u,style:{width:"100%",height:"100%",position:"absolute",top:0,left:0}}),n.default()])}}}),he=i.defineComponent({name:"Scene",setup(e,{slots:n}){const{scene:r}=F(),s=i.inject("renderer"),{activeCamera:u}=D(),{onLoop:p}=z();return i.provide("local-scene",r),p(()=>{s!=null&&s.value&&(u!=null&&u.value)&&(r!=null&&r.value)&&s.value.render(r==null?void 0:r.value,u.value)}),()=>{if(n.default)return n.default()}}}),we=Symbol("UseTresState"),ve="1.4.0",Ce={install(e,n){const r=(n==null?void 0:n.prefix)||"Tres";e.component(`${r}Canvas`,ge),e.component(`${r}Scene`,he);const{catalogue:s,extend:u}=T(e,r);e.provide("catalogue",s),e.provide("extend",u);const{createComponentInstances:p}=$(r);p(s).forEach(([v,t])=>{e.component(v,t)}),window.__TRES__={app:e,version:ve}}};g.CameraType=G,g.UseTresStateSymbol=we,g.default=Ce,g.trasverseObjects=Z,g.useCamera=D,g.useCatalogue=T,g.useInstanceCreator=$,g.useLoader=de,g.useRenderLoop=z,g.useRenderer=E,g.useScene=F,g.useTexture=me,g.useTres=V,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/types/index.d.ts

@@ -12,6 +12,7 @@ export type TresVNodeType = VNodeTypes & {
 export type TresVNode = VNode & { children?: Array<VNode>; type: TresVNodeType }
 export type TresAttributes = Record<string, any> & { args?: number[] }
 
+export type TresColor = string | number | Color | number[]
 declare global {
   // Define the window interface, with type annotations for the properties and methods of the window object
   interface Window {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -30,7 +30,7 @@
     "threejs-vue"
   ],
   "dependencies": {
-    "three": "^0.147.0",
+    "three": "^0.148.0",
     "vue": "^3.2.45"
   },
   "peerDependencies": {
@@ -54,7 +54,7 @@
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.8.3",
     "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.0.2",
+    "vite": "^4.0.3",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "^1.7.1",
     "vite-plugin-glsl": "^1.0.1",