@tresjs/core 0.3.0 → 0.5.0

package/dist/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v0.3.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 v, watch as F, ref as L, defineComponent as J, reactive as ee, toRefs as te, useSlots as re, useAttrs as ne, provide as ae, onMounted as oe, onBeforeUnmount as se, openBlock as _, createElementBlock as j, normalizeStyle as V, unref as U, createElementVNode as ce, createBlock as ie, Suspense as le, withCtx as ue, renderSlot as W, createCommentVNode as D, Fragment as fe } from "vue";
-import * as pe from "three";
-import { PerspectiveCamera as B, OrthographicCamera as de, Vector3 as me, Color as A, Scene as ge, Clock as he, LoadingManager as we, TextureLoader as ye, WebGLRenderer as Ce, PCFSoftShadowMap as Me, sRGBEncoding as Se } from "three";
-import { useWindowSize as K } from "@vueuse/core";
-var E = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(E || {});
-const R = {
+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: []
-}, xe = 45;
-let x;
-function z() {
-  const { width: e, height: t } = K();
-  function u(o = "Perspective", a) {
-    if (o === "Perspective") {
-      const { near: p, far: g, fov: f } = a || {
+}, 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: xe
+        fov: Re
       };
-      x = new B(f, r.value, p, g), R.cameras.push(x);
+      S = new I(f, a.value, p, d), x.cameras.push(S);
     } else {
-      const { left: p, right: g, top: f, bottom: w, near: S, far: h } = a || {
+      const { left: p, right: d, top: f, bottom: m, near: y, far: M } = s || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,328 +33,343 @@ function z() {
         near: 0.1,
         far: 1e3
       };
-      x = new de(p, g, f, w, S, h), R.cameras.push(x);
+      S = new we(p, d, f, m, y, M), x.cameras.push(S);
     }
-    return R.cameras.push(x), x;
+    return x.cameras.push(S), S;
   }
-  const r = v(() => e.value / t.value), n = v(() => R.cameras[0]);
-  function s() {
-    n.value instanceof B && (n.value.aspect = r.value), n.value.updateProjectionMatrix();
+  const a = j(() => e.value / t.value), n = j(() => x.cameras[0]);
+  function o() {
+    n.value instanceof I && (n.value.aspect = a.value), n.value.updateProjectionMatrix();
   }
-  function c(o) {
-    R.cameras.push(o), o instanceof B && (o.aspect = r.value), o.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 F(r, s), {
+  return O(a, o), {
     activeCamera: n,
-    createCamera: u,
-    updateCamera: s,
-    pushCamera: c
+    createCamera: r,
+    updateCamera: o,
+    pushCamera: u
   };
 }
-let I = { ...pe };
-function Re() {
+let T = { ...he };
+delete T.Scene;
+function Te() {
   return {
     extend: (t) => {
-      I = Object.assign(I, t);
+      T = Object.assign(T, t);
     },
-    catalogue: I
+    catalogue: T
   };
 }
-const Pe = (e) => typeof e < "u", Q = (e) => !!e && e.constructor === Array;
-function X(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof me ? [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 Ee(e) {
-  return e instanceof A ? e : Array.isArray(e) ? new A(...e) : new A(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 $() {
-  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 u(r, n) {
+  function r(a, n) {
   }
   return {
     logError: e,
     logWarning: t,
-    logMessage: u
+    logMessage: r
   };
 }
-const P = new ge(), k = L(!1);
-function b() {
-  const { logMessage: e } = $();
-  function t() {
-    P == null || P.clear(), k.value = !k.value, e("clear Scene", P);
-  }
-  return {
-    isSceneReset: k,
-    clearScene: t,
-    scene: P
-  };
-}
-const Te = ["rotation", "scale", "position"];
-function Le() {
-  const { catalogue: e } = Re(), { logMessage: t, logError: u } = $();
-  function r() {
-    return Object.entries(e).filter(([n, s]) => {
-      var c, o;
-      return (o = (c = s == null ? void 0 : s.prototype) == null ? void 0 : c.constructor) == null ? void 0 : o.toString().includes("class");
-    }).map(([n, s]) => {
-      const c = J({
+const Be = ["rotation", "scale", "position"];
+function Ie() {
+  const { catalogue: e } = Te(), { logMessage: t, logError: r } = W();
+  function a() {
+    return Object.entries(e).filter(([n, o]) => {
+      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 u = _({
         name: n,
-        setup(o, { slots: a, attrs: p, ...g }) {
+        setup(i, { slots: s, attrs: p, ...d }) {
           t(n, {
-            props: o,
-            slots: a,
+            props: i,
+            slots: s,
             attrs: p,
-            ctx: g
+            ctx: d
           });
           let f;
-          const { scene: w } = b(), { pushCamera: S } = z();
-          function h() {
-            if ((a == null ? void 0 : a.default) && (a == null ? void 0 : a.default())) {
-              const M = a.default().map((i) => {
-                var m;
-                let y;
-                return (m = i == null ? void 0 : i.props) != null && m.args ? y = new e[i.type.name](...i.props.args) : y = new e[i.type.name](), i != null && i.props && d(i.props, y), y;
+          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 (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;
               });
-              f = new s(...M);
+              f = new o(...C);
             } else
-              p.args ? f = new s(...p.args) : f = new s();
-            d(p, f), n === "PerspectiveCamera" || n === "OrtographicCamera" ? S(f) : w == null || w.add(f), t("Instance added", w), g.expose(f);
+              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 d(M, i) {
-            Object.entries(M).forEach(([y, m]) => {
-              const C = y.replace(/(-\w)/g, (O) => O[1].toUpperCase());
-              if (!(C === "args" || m === void 0)) {
-                Te.includes(y) && m && (m = X(m));
+          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 {
-                  i[C] && Pe(i[C].set) ? Q(m) ? i[C].set(...m) : i[C].set(m) : (m === "" && (m = !0), i[C] = m);
-                } catch (O) {
-                  u(`There was an error setting ${C} property`, O);
+                  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);
                 }
               }
-            }), M.ref && (M.ref = i);
+            }), C.ref && (C.ref = c);
           }
-          return h(), () => {
+          return M(), () => {
           };
         }
       });
-      return [n, c];
+      return [n, u];
     });
   }
   return {
-    createComponentInstances: r
+    createComponentInstances: a
   };
 }
-let G;
-function N(e, t, u) {
-  const r = new he(), { scene: n } = b(), s = () => {
-    const o = r.getElapsedTime(), a = r.getDelta();
-    n && (t && t(a, o), e(a, o), u && u(a, o)), G = requestAnimationFrame(s);
+const ee = U(), te = U(), ne = U(), X = new ve(), { pause: ze, resume: Fe, isActive: je } = me(
+  () => {
+    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 re() {
+  return {
+    onBeforeLoop: ee.on,
+    onLoop: te.on,
+    onAfterLoop: ne.on,
+    pause: ze,
+    resume: Fe,
+    isActive: je
   };
-  s();
-  function c() {
-    cancelAnimationFrame(G);
-  }
+}
+const De = $(new ye());
+function ae() {
   return {
-    disposeLoop: c
+    scene: De
   };
 }
-function be() {
-  const e = new we(), t = L(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 Ie(e) {
-  const { loadingManager: t } = be(), u = new ye(t), r = (n) => new Promise((s, c) => {
-    u.load(
+async function Je(e) {
+  const t = new Me(), r = new Se(t), a = (n) => new Promise((o, u) => {
+    r.load(
       n,
-      (o) => s(o),
+      (i) => o(i),
       () => null,
       () => {
-        c(new Error("[useTextures] - Failed to load texture"));
+        u(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (Q(e)) {
-    const n = await Promise.all(e.map((s) => r(s)));
+  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: s, normalMap: c, roughnessMap: o, metalnessMap: a, aoMap: p } = e;
+    const { map: n, displacementMap: o, normalMap: u, roughnessMap: i, metalnessMap: s, aoMap: p } = e;
     return {
-      map: n ? await r(n) : null,
-      displacementMap: s ? await r(s) : null,
-      normalMap: c ? await r(c) : null,
-      roughnessMap: o ? await r(o) : null,
-      metalnessMap: a ? await r(a) : null,
-      aoMap: p ? await r(p) : 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 T = ee({});
-function Y() {
-  function e(u) {
-    return T[u];
+const L = pe({});
+function qe() {
+  function e(r) {
+    return L[r];
   }
-  function t(u, r) {
-    T[u] = r;
+  function t(r, a) {
+    L[r] = a;
   }
   return {
-    state: T,
-    ...te(T),
+    state: L,
+    ...le(L),
     getState: e,
     setState: t
   };
 }
-let l, H;
-function Oe(e, t) {
-  const { width: u, height: r } = K(), { logMessage: n } = $(), s = v(() => u.value / r.value), { scene: c } = b(), { activeCamera: o } = z(), { setState: a } = Y();
-  a("scene", c), a("camera", o);
-  function p() {
-    l && (l.shadowMap.enabled = !0, l.shadowMap.type = Me);
-  }
-  function g() {
-    l && (l.setSize(u.value, r.value), l.setPixelRatio(Math.min(window.devicePixelRatio, 2)));
-  }
-  function f() {
-    l && (l.dispose(), l = null), n("disposeRenderer", l), H();
-  }
-  F(s, g);
-  function w() {
-    if (n("Render init", {
-      renderer: l,
-      canvas: e,
-      scene: c
-    }), !l && e.value && c) {
-      const h = {
-        canvas: e.value,
-        ...t
-      };
-      t != null && t.context && (h.context = t.context), l = new Ce(h), t != null && t.shadows && p(), l.physicallyCorrectLights = (t == null ? void 0 : t.physicallyCorrectLights) || !1, t != null && t.outputEncoding && (l.outputEncoding = t.outputEncoding), t != null && t.toneMapping && (l.toneMapping = t.toneMapping, l.toneMappingExposure = 1), g(), l.render(c, o.value), a("renderer", l), H = N(() => {
-        c && l && l.render(c, o.value);
-      }).disposeLoop;
-    }
-    a("loop", N);
-  }
-  function S(h) {
-    l && l.setClearColor(Ee(h));
-  }
-  return w(), {
+const l = $(), F = D(!1);
+function $e(e, t, r) {
+  const {
+    alpha: a = !1,
+    antialias: n,
+    depth: o,
+    logarithmicDepthBuffer: u,
+    failIfMajorPerformanceCaveat: i,
+    precision: s,
+    premultipliedAlpha: p,
+    stencil: d,
+    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: 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: i,
+      logarithmicDepthBuffer: u,
+      powerPreference: w,
+      precision: s,
+      stencil: d,
+      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 O([b, A, H], N), O(
+    () => [
+      f,
+      m,
+      M,
+      y,
+      E,
+      C,
+      h
+    ],
+    G
+  ), O(
+    () => [e, t],
+    () => {
+      B(e) && B(t) && ce();
+    },
+    { immediate: !0, deep: !0 }
+  ), {
     renderer: l,
-    setClearColor: S,
-    updateRenderer: g,
-    disposeRenderer: f
+    isReady: F,
+    dispose: ue,
+    aspectRatio: ie
   };
 }
-const Z = /* @__PURE__ */ J({
-  __name: "TresCanvas",
+const Ue = _({
+  name: "TresCanvas",
   props: {
-    camera: null,
-    ortographic: { type: Boolean },
-    gl: null,
-    shadows: { type: Boolean, default: !1 },
-    physicallyCorrectLights: { type: Boolean, default: !1 },
-    outputEncoding: { default: Se },
-    alpha: { type: Boolean, default: !1 },
-    background: null,
-    async: { type: Boolean, default: !1 }
+    shadows: Boolean,
+    shadowMapType: Object,
+    physicallyCorrectLights: Boolean,
+    outputEncoding: Object,
+    toneMapping: Object,
+    toneMappingExposure: Number,
+    context: Object,
+    powerPreference: Object,
+    preserveDrawingBuffer: Boolean,
+    clearColor: String,
+    windowSize: Boolean
   },
-  setup(e) {
-    const t = e;
-    let u, r = () => {
-    };
-    const n = L(), s = L(!0), { scene: c, clearScene: o } = b(), a = re(), p = ne(), { createCamera: g } = z();
-    let f;
-    const w = Y();
-    ae("UseTresState", w.state);
-    const S = a.default ? a == null ? void 0 : a.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"
-    ) : !1;
-    if (c && !S)
-      if (t.camera) {
-        const { position: d, ...M } = t.camera;
-        if (f = g(t.ortographic === !0 ? E.Orthographic : E.Perspective, M || {}), d) {
-          const i = X(d);
-          f.position.set(i[0], i[1], i[2]);
-        }
-        c.add(f);
-      } else
-        f = g(t.ortographic === !0 ? E.Orthographic : E.Perspective, {}), f.position.set(5, 5, 5), c.add(f);
-    F(t, () => {
-      u && (r(), o(), h());
-    });
-    function h() {
-      const d = Oe(n, {
-        antialias: !0,
-        physicallyCorrectLights: t.physicallyCorrectLights,
-        shadows: t.shadows,
-        context: t.gl || null,
-        alpha: t.alpha
-      });
-      u = d.renderer, r = d.disposeRenderer, t.background && d.setClearColor(t.background);
-    }
-    return oe(() => {
-      h();
-    }), se(() => {
-      o(), r();
-    }), (d, M) => {
-      var i, y, m, C;
-      return _(), j("div", {
-        id: "tres-container",
-        style: V({
-          position: "relative",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          overflow: "hidden",
-          width: ((y = (i = U(p)) == null ? void 0 : i.style) == null ? void 0 : y.width) || "100%",
-          height: "100%"
-        })
-      }, [
-        ce("canvas", {
-          ref_key: "canvasRef",
-          ref: n,
-          style: V({ width: ((C = (m = U(p)) == null ? void 0 : m.style) == null ? void 0 : C.width) || "100%", height: "100%", overflow: "hidden" })
-        }, null, 4),
-        e.async ? (_(), ie(le, { key: 0 }, {
-          default: ue(() => [
-            s.value ? W(d.$slots, "default", { key: 0 }) : D("", !0)
-          ]),
-          _: 3
-        })) : (_(), j(fe, { key: 1 }, [
-          s.value ? W(d.$slots, "default", { key: 0 }) : D("", !0)
-        ], 64))
-      ], 4);
+    ) && a("Scene must contain a Camera component."), fe(() => i()), () => {
+      if (t.default)
+        return q(
+          "div",
+          {
+            ref: o,
+            style: {
+              position: "relative",
+              width: "100%",
+              height: "100vh",
+              ...r.style
+            }
+          },
+          [
+            q("canvas", {
+              ref: n,
+              style: { width: "100%", height: "100%", position: "absolute", top: 0, left: 0 }
+            }),
+            t.default()
+          ]
+        );
+    };
+  }
+}), Ve = _({
+  name: "Scene",
+  setup(e, { slots: t }) {
+    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();
     };
   }
-}), ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: Z
-}, Symbol.toStringTag, { value: "Module" })), ve = Symbol("UseTresState"), Fe = {
+}), Ke = Symbol("UseTresState"), Qe = {
   install(e) {
-    e.component("TresCanvas", Z);
-    const { createComponentInstances: t } = Le();
-    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 {
-  E as CameraType,
-  ke as TresCanvas,
-  ve as UseTresStateSymbol,
-  Fe as default,
-  z as useCamera,
-  Re as useCatalog,
-  Le as useInstanceCreator,
-  be as useLoadingManager,
-  N as useLoop,
-  Oe as useRenderer,
-  b as useScene,
-  Ie as useTexture,
-  Y 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
 };