@tresjs/core 0.4.0 → 1.0.0

package/dist/tres.js

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