@tresjs/core 0.4.0 → 0.5.0

package/dist/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v0.4.0
+ * version: v0.5.0
  * (c) 2022
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { computed as F, watch as R, inject as Q, defineComponent as _, shallowRef as $, ref as O, reactive as le, toRefs as fe, provide as T, onBeforeUnmount as me, h as G } from "vue";
-import { useWindowSize as X, createEventHook as U, useRafFn as de, useElementSize as ge, useDevicePixelRatio as he, unrefElement as A, resolveUnref as v } from "@vueuse/core";
-import * as we from "three";
-import { PerspectiveCamera as I, OrthographicCamera as Ce, Color as z, Vector3 as ve, Clock as Me, Scene as Se, LoadingManager as Y, TextureLoader as ye, PCFShadowMap as xe, LinearEncoding as Ee, NoToneMapping as Pe, WebGLRenderer as Le } from "three";
-var Re = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Re || {});
-const P = {
+import { computed as j, watch as O, inject as Y, defineComponent as _, shallowRef as $, reactive as pe, toRefs as le, ref as D, provide as R, onBeforeUnmount as fe, h as q } from "vue";
+import { useWindowSize as Z, createEventHook as U, useRafFn as me, useElementSize as de, useDevicePixelRatio as ge, unrefElement as B, resolveUnref as v } from "@vueuse/core";
+import * as he from "three";
+import { PerspectiveCamera as I, OrthographicCamera as we, Color as z, Vector3 as Ce, Clock as ve, Scene as ye, LoadingManager as Me, TextureLoader as Se, PCFShadowMap as Ee, LinearEncoding as Pe, NoToneMapping as xe, WebGLRenderer as Le } from "three";
+var Oe = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Oe || {});
+const x = {
   cameras: []
-}, Te = 45;
-let y;
-function Z() {
-  const { width: e, height: t } = X();
-  function a(s = "Perspective", i) {
-    if (s === "Perspective") {
-      const { near: l, far: d, fov: m } = i || {
+}, Re = 45;
+let S;
+function k() {
+  const { width: e, height: t } = Z();
+  function r(i = "Perspective", s) {
+    if (i === "Perspective") {
+      const { near: p, far: d, fov: f } = s || {
         near: 0.1,
         far: 1e3,
-        fov: Te
+        fov: Re
       };
-      y = new I(m, r.value, l, d), P.cameras.push(y);
+      S = new I(f, a.value, p, d), x.cameras.push(S);
     } else {
-      const { left: l, right: d, top: m, bottom: h, near: M, far: S } = i || {
+      const { left: p, right: d, top: f, bottom: m, near: y, far: M } = s || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,251 +33,270 @@ function Z() {
         near: 0.1,
         far: 1e3
       };
-      y = new Ce(l, d, m, h, M, S), P.cameras.push(y);
+      S = new we(p, d, f, m, y, M), x.cameras.push(S);
     }
-    return P.cameras.push(y), y;
+    return x.cameras.push(S), S;
   }
-  const r = F(() => e.value / t.value), n = F(() => P.cameras[0]);
+  const a = j(() => e.value / t.value), n = j(() => x.cameras[0]);
   function o() {
-    n.value instanceof I && (n.value.aspect = r.value), n.value.updateProjectionMatrix();
+    n.value instanceof I && (n.value.aspect = a.value), n.value.updateProjectionMatrix();
   }
-  function p(s) {
-    const i = Q("camera");
-    s && i && (i.value = s), P.cameras.push(s), s instanceof I && (s.aspect = r.value), s.updateProjectionMatrix();
+  function u(i) {
+    const s = Y("camera");
+    i && s && (s.value = i), x.cameras.push(i), i instanceof I && (i.aspect = a.value), i.updateProjectionMatrix();
   }
-  return R(r, o), {
+  return O(a, o), {
     activeCamera: n,
-    createCamera: a,
+    createCamera: r,
     updateCamera: o,
-    pushCamera: p
+    pushCamera: u
   };
 }
-let b = { ...we };
-delete b.Scene;
-function be() {
+let T = { ...he };
+delete T.Scene;
+function Te() {
   return {
     extend: (t) => {
-      b = Object.assign(b, t);
+      T = Object.assign(T, t);
     },
-    catalogue: b
+    catalogue: T
   };
 }
-const Oe = (e) => typeof e < "u", k = (e) => !!e && e.constructor === Array;
-function je(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof ve ? [e.x, e.y, e.z] : e;
+const be = (e) => typeof e < "u", V = (e) => !!e && e.constructor === Array;
+function Ae(e) {
+  return typeof e == "number" ? [e, e, e] : e instanceof Ce ? [e.x, e.y, e.z] : e;
 }
-function J(e) {
+function K(e) {
   return e instanceof z ? e : Array.isArray(e) ? new z(...e) : new z(e);
 }
-const q = "[TresJS \u25B2 \u25A0 \u25CF] ";
-function ee() {
-  function e(r, n) {
-    console.error(`${q} ${r}`, n || "");
+const Q = "[TresJS \u25B2 \u25A0 \u25CF] ";
+function W() {
+  function e(a, n) {
+    console.error(`${Q} ${a}`, n || "");
   }
-  function t(r) {
-    console.warn(`${q} ${r}`);
+  function t(a) {
+    console.warn(`${Q} ${a}`);
   }
-  function a(r, n) {
+  function r(a, n) {
   }
   return {
     logError: e,
     logWarning: t,
-    logMessage: a
+    logMessage: r
   };
 }
 const Be = ["rotation", "scale", "position"];
-function Ae() {
-  const { catalogue: e } = be(), { logMessage: t, logError: a } = ee();
-  function r() {
+function Ie() {
+  const { catalogue: e } = Te(), { logMessage: t, logError: r } = W();
+  function a() {
     return Object.entries(e).filter(([n, o]) => {
-      var p, s;
-      return (s = (p = o == null ? void 0 : o.prototype) == null ? void 0 : p.constructor) == null ? void 0 : s.toString().includes("class");
+      var u, i;
+      return (i = (u = o == null ? void 0 : o.prototype) == null ? void 0 : u.constructor) == null ? void 0 : i.toString().includes("class");
     }).map(([n, o]) => {
-      const p = _({
+      const u = _({
         name: n,
-        setup(s, { slots: i, attrs: l, ...d }) {
+        setup(i, { slots: s, attrs: p, ...d }) {
           t(n, {
-            props: s,
-            slots: i,
-            attrs: l,
+            props: i,
+            slots: s,
+            attrs: p,
             ctx: d
           });
-          let m;
-          const { scene: h } = oe(), { pushCamera: M } = Z();
-          function S() {
-            if ((i == null ? void 0 : i.default) && (i == null ? void 0 : i.default())) {
-              const C = i.default().map((c) => {
-                var f;
+          let f;
+          const { scene: m } = ae(), { pushCamera: y } = k();
+          function M() {
+            if ((s == null ? void 0 : s.default) && (s == null ? void 0 : s.default())) {
+              const C = s.default().map((c) => {
+                var g;
                 let w;
-                return (f = c == null ? void 0 : c.props) != null && f.args ? w = new e[c.type.name](...c.props.args) : w = new e[c.type.name](), c != null && c.props && x(c.props, w), w;
+                return (g = c == null ? void 0 : c.props) != null && g.args ? w = new e[c.type.name](...c.props.args) : w = new e[c.type.name](), c != null && c.props && E(c.props, w), w;
               });
-              m = new o(...C);
+              f = new o(...C);
             } else
-              l.args ? m = new o(...l.args) : m = new o();
-            x(l, m), n === "PerspectiveCamera" || n === "OrtographicCamera" ? M(m) : h == null || h.value.add(m), t("Instance added", h), d.expose(m);
+              p.args ? f = new o(...p.args) : f = new o();
+            E(p, f), n === "PerspectiveCamera" || n === "OrtographicCamera" ? y(f) : m == null || m.value.add(f), t("Instance added", m), d.expose(f);
           }
-          function x(C, c) {
-            Object.entries(C).forEach(([w, f]) => {
-              const g = w.replace(/(-\w)/g, (E) => E[1].toUpperCase());
-              if (!(g === "args" || f === void 0)) {
-                Be.includes(w) && f && (f = je(f));
+          function E(C, c) {
+            Object.entries(C).forEach(([w, g]) => {
+              const h = w.replace(/(-\w)/g, (P) => P[1].toUpperCase());
+              if (!(h === "args" || g === void 0)) {
+                Be.includes(w) && g && (g = Ae(g));
                 try {
-                  c[g] && Oe(c[g].set) ? k(f) ? c[g].set(...f) : c[g].set(f) : (f === "" && (f = !0), c[g] = f);
-                } catch (E) {
-                  a(`There was an error setting ${g} property`, E);
+                  c[h] && be(c[h].set) ? V(g) ? c[h].set(...g) : c[h].set(g) : (g === "" && (g = !0), c[h] = g);
+                } catch (P) {
+                  r(`There was an error setting ${h} property`, P);
                 }
               }
             }), C.ref && (C.ref = c);
           }
-          return S(), () => {
+          return M(), () => {
           };
         }
       });
-      return [n, p];
+      return [n, u];
     });
   }
   return {
-    createComponentInstances: r
+    createComponentInstances: a
   };
 }
-const te = U(), ne = U(), re = U(), K = new Me(), { pause: Ie, resume: ze, isActive: De } = de(
+const ee = U(), te = U(), ne = U(), X = new ve(), { pause: ze, resume: Fe, isActive: je } = me(
   () => {
-    const e = K.getElapsedTime(), t = K.getDelta();
-    te.trigger({ delta: t, elapsed: e }), ne.trigger({ delta: t, elapsed: e }), re.trigger({ delta: t, elapsed: e });
+    const e = X.getElapsedTime(), t = X.getDelta();
+    ee.trigger({ delta: t, elapsed: e }), te.trigger({ delta: t, elapsed: e }), ne.trigger({ delta: t, elapsed: e });
   },
   { immediate: !1 }
 );
-function ae() {
+function re() {
   return {
-    onBeforeLoop: te.on,
-    onLoop: ne.on,
-    onAfterLoop: re.on,
-    pause: Ie,
-    resume: ze,
-    isActive: De
+    onBeforeLoop: ee.on,
+    onLoop: te.on,
+    onAfterLoop: ne.on,
+    pause: ze,
+    resume: Fe,
+    isActive: je
   };
 }
-const Fe = $(new Se());
-function oe() {
+const De = $(new ye());
+function ae() {
   return {
-    scene: Fe
+    scene: De
   };
 }
-function Ne() {
-  const e = new Y(), t = O(e);
-  return { loadingManager: e, loadingManagerRef: t };
+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 Ge(e, t, r, a, n) {
+  const { logError: o } = W(), u = new e();
+  n && n(u), r && r(e);
+  const s = (Array.isArray(t) ? t : [t]).map(
+    (p) => new Promise((d, f) => {
+      u.load(
+        p,
+        (m) => {
+          m.scene && Object.assign(m, _e(m.scene)), d(m);
+        },
+        a,
+        (m) => f(o("[useLoader] - Failed to load resource", m))
+      );
+    })
+  );
+  return V(t) ? await Promise.all(s) : await s[0];
 }
-async function Ge(e) {
-  const t = new Y(), a = new ye(t), r = (n) => new Promise((o, p) => {
-    a.load(
+async function Je(e) {
+  const t = new Me(), r = new Se(t), a = (n) => new Promise((o, u) => {
+    r.load(
       n,
-      (s) => o(s),
+      (i) => o(i),
       () => null,
       () => {
-        p(new Error("[useTextures] - Failed to load texture"));
+        u(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (k(e)) {
-    const n = await Promise.all(e.map((o) => r(o)));
+  if (V(e)) {
+    const n = await Promise.all(e.map((o) => a(o)));
     return e.length > 1 ? n : n[0];
   } else {
-    const { map: n, displacementMap: o, normalMap: p, roughnessMap: s, metalnessMap: i, aoMap: l } = e;
+    const { map: n, displacementMap: o, normalMap: u, roughnessMap: i, metalnessMap: s, aoMap: p } = e;
     return {
-      map: n ? await r(n) : null,
-      displacementMap: o ? await r(o) : null,
-      normalMap: p ? await r(p) : null,
-      roughnessMap: s ? await r(s) : null,
-      metalnessMap: i ? await r(i) : null,
-      aoMap: l ? await r(l) : null
+      map: n ? await a(n) : null,
+      displacementMap: o ? await a(o) : null,
+      normalMap: u ? await a(u) : null,
+      roughnessMap: i ? await a(i) : null,
+      metalnessMap: s ? await a(s) : null,
+      aoMap: p ? await a(p) : null
     };
   }
 }
-const L = le({});
-function Je() {
-  function e(a) {
-    return L[a];
+const L = pe({});
+function qe() {
+  function e(r) {
+    return L[r];
   }
-  function t(a, r) {
-    L[a] = r;
+  function t(r, a) {
+    L[r] = a;
   }
   return {
     state: L,
-    ...fe(L),
+    ...le(L),
     getState: e,
     setState: t
   };
 }
-const u = $(), D = O(!1);
-function _e(e, t, a) {
+const l = $(), F = D(!1);
+function $e(e, t, r) {
   const {
-    alpha: r = !1,
+    alpha: a = !1,
     antialias: n,
     depth: o,
-    logarithmicDepthBuffer: p,
-    failIfMajorPerformanceCaveat: s,
-    precision: i,
-    premultipliedAlpha: l,
+    logarithmicDepthBuffer: u,
+    failIfMajorPerformanceCaveat: i,
+    precision: s,
+    premultipliedAlpha: p,
     stencil: d,
-    shadows: m = !1,
-    shadowMapType: h = xe,
-    physicallyCorrectLights: M = !1,
-    outputEncoding: S = Ee,
-    toneMapping: x = Pe,
+    shadows: f = !1,
+    shadowMapType: m = Ee,
+    physicallyCorrectLights: y = !1,
+    outputEncoding: M = Pe,
+    toneMapping: E = xe,
     toneMappingExposure: C = 1,
     context: c = void 0,
     powerPreference: w = "default",
-    preserveDrawingBuffer: f = !1,
-    clearColor: g = J("#000000"),
-    windowSize: E = !1
-  } = a, { width: j, height: B } = E ? X() : ge(t), { pixelRatio: V } = he(), { pause: se, resume: ie } = ae(), ce = F(() => j.value / B.value), W = () => {
-    !u.value || (u.value.setSize(j.value, B.value), u.value.setPixelRatio(V.value));
-  }, H = () => {
-    !u.value || (u.value.shadowMap.enabled = v(m), u.value.outputEncoding = v(S), u.value.shadowMap.type = v(h), u.value.physicallyCorrectLights = v(M), u.value.toneMapping = v(x), u.value.toneMappingExposure = v(C), u.value.setClearColor(J(v(g))));
-  }, ue = () => {
-    const N = A(e);
-    u.value || !N || (u.value = new Le({
-      canvas: N,
-      alpha: r,
+    preserveDrawingBuffer: g = !1,
+    clearColor: h = K("#000000"),
+    windowSize: P = !1
+  } = r, { width: b, height: A } = P ? Z() : de(t), { pixelRatio: H } = ge(), { pause: oe, resume: se } = re(), ie = j(() => b.value / A.value), N = () => {
+    !l.value || (l.value.setSize(b.value, A.value), l.value.setPixelRatio(H.value));
+  }, G = () => {
+    !l.value || (l.value.shadowMap.enabled = v(f), l.value.outputEncoding = v(M), l.value.shadowMap.type = v(m), l.value.physicallyCorrectLights = v(y), l.value.toneMapping = v(E), l.value.toneMappingExposure = v(C), l.value.setClearColor(K(v(h))));
+  }, ce = () => {
+    const J = B(e);
+    l.value || !J || (l.value = new Le({
+      canvas: J,
+      alpha: a,
       antialias: n,
       context: c,
       depth: o,
-      failIfMajorPerformanceCaveat: s,
-      logarithmicDepthBuffer: p,
+      failIfMajorPerformanceCaveat: i,
+      logarithmicDepthBuffer: u,
       powerPreference: w,
-      precision: i,
+      precision: s,
       stencil: d,
-      preserveDrawingBuffer: f,
-      premultipliedAlpha: l
-    }), H(), W(), ie(), D.value = !0);
-  }, pe = () => {
-    !u.value || (u.value.dispose(), u.value = void 0, D.value = !1, se());
+      preserveDrawingBuffer: g,
+      premultipliedAlpha: p
+    }), G(), N(), se(), F.value = !0);
+  }, ue = () => {
+    !l.value || (l.value.dispose(), l.value = void 0, F.value = !1, oe());
   };
-  return R([j, B, V], W), R(
+  return O([b, A, H], N), O(
     () => [
+      f,
       m,
-      h,
-      S,
       M,
-      x,
+      y,
+      E,
       C,
-      g
+      h
     ],
-    H
-  ), R(
+    G
+  ), O(
     () => [e, t],
     () => {
-      A(e) && A(t) && ue();
+      B(e) && B(t) && ce();
     },
     { immediate: !0, deep: !0 }
   ), {
-    renderer: u,
-    isReady: D,
-    dispose: pe,
-    aspectRatio: ce
+    renderer: l,
+    isReady: F,
+    dispose: ue,
+    aspectRatio: ie
   };
 }
-const $e = _({
+const Ue = _({
   name: "TresCanvas",
   props: {
     shadows: Boolean,
@@ -292,13 +311,13 @@ const $e = _({
     clearColor: String,
     windowSize: Boolean
   },
-  setup(e, { slots: t, attrs: a }) {
-    const { logError: r } = ee(), n = O(), o = O(), { renderer: p, dispose: s, aspectRatio: i } = _e(n, o, e), l = $();
-    return T("camera", l), T("renderer", p), T("aspect-ratio", i), t.default && !t.default().some((d) => d.type.name === "Scene") && r("TresCanvas must contain a Scene component."), t.default && !t.default().some(
+  setup(e, { slots: t, attrs: r }) {
+    const { logError: a } = W(), n = D(), o = D(), { renderer: u, dispose: i, aspectRatio: s } = $e(n, o, e), p = $();
+    return R("camera", p), R("renderer", u), R("aspect-ratio", s), t.default && !t.default().some((d) => d.type.name === "Scene") && a("TresCanvas must contain a Scene component."), t.default && !t.default().some(
       (d) => d.type.name === "PerspectiveCamera" || d.type.name === "OrtographicCamera"
-    ) && r("Scene must contain a Camera component."), me(() => s()), () => {
+    ) && a("Scene must contain a Camera component."), fe(() => i()), () => {
       if (t.default)
-        return G(
+        return q(
           "div",
           {
             ref: o,
@@ -306,11 +325,11 @@ const $e = _({
               position: "relative",
               width: "100%",
               height: "100vh",
-              ...a.style
+              ...r.style
             }
           },
           [
-            G("canvas", {
+            q("canvas", {
               ref: n,
               style: { width: "100%", height: "100%", position: "absolute", top: 0, left: 0 }
             }),
@@ -319,37 +338,38 @@ const $e = _({
         );
     };
   }
-}), Ue = _({
+}), Ve = _({
   name: "Scene",
   setup(e, { slots: t }) {
-    const { scene: a } = oe(), r = Q("renderer"), { activeCamera: n } = Z(), { onLoop: o } = ae();
-    return T("local-scene", a), o(() => {
-      (r == null ? void 0 : r.value) && (n == null ? void 0 : n.value) && (a == null ? void 0 : a.value) && r.value.render(a == null ? void 0 : a.value, n.value);
+    const { scene: r } = ae(), a = Y("renderer"), { activeCamera: n } = k(), { onLoop: o } = re();
+    return R("local-scene", r), o(() => {
+      (a == null ? void 0 : a.value) && (n == null ? void 0 : n.value) && (r == null ? void 0 : r.value) && a.value.render(r == null ? void 0 : r.value, n.value);
     }), () => {
       if (t.default)
         return t.default();
     };
   }
-}), qe = Symbol("UseTresState"), Ke = {
+}), Ke = Symbol("UseTresState"), Qe = {
   install(e) {
-    e.component("TresCanvas", $e), e.component("Scene", Ue);
-    const { createComponentInstances: t } = Ae();
-    t().forEach(([r, n]) => {
-      e.component(r, n);
+    e.component("TresCanvas", Ue), e.component("Scene", Ve);
+    const { createComponentInstances: t } = Ie();
+    t().forEach(([a, n]) => {
+      e.component(a, n);
     });
   }
 };
 export {
-  Re as CameraType,
-  qe as UseTresStateSymbol,
-  Ke as default,
-  Z as useCamera,
-  be as useCatalog,
-  Ae as useInstanceCreator,
-  Ne as useLoadingManager,
-  ae as useRenderLoop,
-  _e as useRenderer,
-  oe as useScene,
-  Ge as useTexture,
-  Je as useTres
+  Oe as CameraType,
+  Ke as UseTresStateSymbol,
+  Qe as default,
+  _e as trasverseObjects,
+  k as useCamera,
+  Te as useCatalog,
+  Ie as useInstanceCreator,
+  Ge as useLoader,
+  re as useRenderLoop,
+  $e as useRenderer,
+  ae as useScene,
+  Je as useTexture,
+  qe as useTres
 };

package/dist/tres.umd.cjs

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -38,7 +38,7 @@
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
     "@histoire/plugin-vue": "0.11.7",
-    "@tresjs/cientos": "^0.3.0",
+    "@tresjs/cientos": "^0.4.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitest/coverage-c8": "^0.25.1",
     "@vitest/ui": "^0.25.1",