@tresjs/core - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

dist/core/useRenderer/index.d.ts

 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 {
@@ -13,2 +14,4 @@ /**
      * Set the shadow map type
+     * Can be PCFShadowMap, PCFSoftShadowMap, BasicShadowMap, VSMShadowMap
+     * [see](https://threejs.org/docs/?q=we#api/en/constants/Renderer)
      *
@@ -27,2 +30,3 @@ * @default PCFSoftShadowMap
      * Defines the output encoding of the renderer.
+     * Can be LinearEncoding, sRGBEncoding
      *
@@ -34,2 +38,3 @@ * @default LinearEncoding
      * Defines the tone mapping used by the renderer.
+     * Can be NoToneMapping, LinearToneMapping, ReinhardToneMapping, Uncharted2ToneMapping, CineonToneMapping, ACESFilmicToneMapping, CustomToneMapping
      *
@@ -69,3 +74,3 @@ * @default NoToneMapping
      */
-    clearColor?: MaybeComputedRef<string | number>;
+    clearColor?: MaybeComputedRef<TresColor>;
     windowSize?: MaybeComputedRef<boolean>;
@@ -72,0 +77,0 @@ }

dist/tres.js

 /**
  * name: @tresjs/core
- * version: v1.3.2
+ * version: v1.3.3
  * (c) 2022
@@ -8,23 +8,23 @@ * description: Declarative ThreeJS using Vue Components
  */
-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 { computed as V, watch as O, inject as P, ref as T, defineComponent as N, shallowRef as k, reactive as Ce, toRefs as te, provide as b, onBeforeUnmount as Se, h as q } from "vue";
+import { useWindowSize as ne, createEventHook as W, useRafFn as Me, resolveUnref as m, useElementSize as xe, useDevicePixelRatio as Ee, unrefElement as F } 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 || {});
+import { PerspectiveCamera as A, OrthographicCamera as re, Vector3 as Pe, Color as z, Clock as Te, Scene as Re, LoadingManager as Le, TextureLoader as Oe, PCFShadowMap as be, LinearEncoding as X, NoToneMapping as Y, WebGLRenderer as Ae } from "three";
+var $e = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))($e || {});
 const M = {
   cameras: []
-}, _e = 45;
+}, Be = 45;
 let C;
-function ne() {
-  const { width: e, height: t } = ee(), { setState: n } = le();
+function ae() {
+  const { width: e, height: t } = ne(), { setState: n } = pe();
   function s(r = "Perspective", u) {
     if (r === "Perspective") {
-      const { near: a, far: c, fov: p } = u || {
+      const { near: o, far: c, fov: p } = u || {
         near: 0.1,
         far: 1e3,
-        fov: _e
+        fov: Be
       };
-      C = new $(p, i.value, a, c), M.cameras.push(C);
+      C = new A(p, i.value, o, c), M.cameras.push(C);
     } else {
-      const { left: a, right: c, top: p, bottom: m, near: g, far: v } = u || {
+      const { left: o, right: c, top: p, bottom: d, near: w, far: y } = u || {
         left: -100,
@@ -37,13 +37,13 @@ right: 100,
       };
-      C = new te(a, c, p, m, g, v), M.cameras.push(C);
+      C = new re(o, c, p, d, w, y), M.cameras.push(C);
     }
     return M.cameras.push(C), C;
   }
-  const i = j(() => e.value / t.value), l = j(() => M.cameras[0]);
+  const i = V(() => e.value / t.value), l = V(() => M.cameras[0]);
   function f() {
-    l.value instanceof $ && (l.value.aspect = i.value), l.value.updateProjectionMatrix();
+    l.value instanceof A && (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 a(r) {
+    const u = P("camera");
+    r && u && (u.value = r, n("camera", u.value)), M.cameras.push(r), r instanceof A && (r.aspect = i.value), r.updateProjectionMatrix();
   }
@@ -54,12 +54,12 @@ return O(i, f), {
     updateCamera: f,
-    pushCamera: o
+    pushCamera: a
   };
 }
-const X = "[TresJS ▲ ■ ●] ";
-function I() {
+const Z = "[TresJS ▲ ■ ●] ";
+function B() {
   function e(s, i) {
-    console.error(`${X} ${s}`, i || "");
+    console.error(`${Z} ${s}`, i || "");
   }
   function t(s) {
-    console.warn(`${X} ${s}`);
+    console.warn(`${Z} ${s}`);
   }
@@ -74,9 +74,9 @@ function n(s, i) {
 }
-const E = P({ ...Q, uuid: Q.MathUtils.generateUUID() });
+const E = T({ ...Q, uuid: Q.MathUtils.generateUUID() });
 delete E.value.Scene;
 let x;
-function re(e, t = "Tres") {
-  const { logMessage: n, logError: s } = I();
+function oe(e, t = "Tres") {
+  const { logMessage: n, logError: s } = B();
   !x && e && (x = e);
-  const { createComponentInstances: i } = oe(t);
+  const { createComponentInstances: i } = se(t);
   return {
@@ -89,4 +89,4 @@ extend: (f) => {
       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]) => {
+      const a = i(T(f));
+      n("Adding objects to catalogue", { objects: f, catalogue: E.value.uuid }), x && a.forEach(([r, u]) => {
         x._context.components[r] || x.component(r, u);
@@ -98,28 +98,28 @@ });
 }
-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 U = (e) => typeof e < "u", Ie = (e) => typeof e == "function", $ = (e) => !!e && e.constructor === Array;
+function _e(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 De(e) {
+  return e instanceof z ? e : Array.isArray(e) ? new z(...e) : new z(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 Fe = ["rotation", "scale", "position"];
+function se(e) {
+  const { logMessage: t, logError: n } = B();
+  function s(a, r) {
+    U(a) && U(r) && Object.entries(a).forEach(([u, o]) => {
       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);
+      if (!(c === "args" || o === void 0)) {
+        Fe.includes(c) && o && (o = _e(o)), a.ref && (a.ref = r);
         try {
           if (r[c] && U(r[c].set))
-            r[c].set(...A(a) ? a : [a]);
+            r[c].set(...$(o) ? o : [o]);
           else {
-            if (a === "" && (a = !0), Be(r[c])) {
-              if (u === "center" && !a)
+            if (o === "" && (o = !0), Ie(r[c])) {
+              if (u === "center" && !o)
                 return;
-              r[c](...A(a) ? a : [a]);
+              r[c](...$(o) ? o : [o]);
               return;
             }
-            r[c] = a;
+            r[c] = o;
           }
@@ -132,40 +132,40 @@ } catch (p) {
   }
-  function i(o) {
-    var a;
+  function i(a) {
+    var o;
     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()))
+    if (r.test(a.type.toString()))
+      return a.children.map((c) => i(c));
+    if (u.test(a.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 c = a.type.name.replace(e, ""), { catalogue: p } = oe(), d = P("catalogue") || p;
+      let w;
+      return d && ((o = a == null ? void 0 : a.props) != null && o.args ? d != null && d.value[c] ? w = new d.value[c](...a.props.args) : n(`There is no ${c} in the catalogue`, d == null ? void 0 : d.value.uuid) : w = new d.value[c]()), a != null && a.props && s(a.props, w), w;
     }
   }
-  function l(o, r, u) {
+  function l(a, r, u) {
     if (u.default && (u != null && u.default())) {
-      const a = u.default().map((c) => i(c));
-      return new o(...a.flat().filter(Boolean));
+      const o = u.default().map((c) => i(c));
+      return new a(...o.flat().filter(Boolean));
     } else
-      return r.args ? new o(...r.args) : new o();
+      return r.args ? new a(...r.args) : new a();
   }
-  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");
+  function f(a) {
+    return Object.entries(a.value).filter(([r, u]) => {
+      var o, c;
+      return (c = (o = u == null ? void 0 : u.prototype) == null ? void 0 : o.constructor) == null ? void 0 : c.toString().includes("class");
     }).map(([r, u]) => {
-      const a = `${e}${r}`, c = N({
-        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,
+      const o = `${e}${r}`, c = N({
+        name: o,
+        setup(p, { slots: d, attrs: w, ...y }) {
+          const { scene: R } = fe(), v = P("local-scene") || R, S = P("catalogue"), { pushCamera: I } = ae();
+          let h = l(u, w, d);
+          return s(w, h), (h instanceof A || h instanceof re) && I(h), h.isObject3D && (v == null || v.value.add(h)), v != null && v.value && h.isFog && (v.value.fog = h), y.expose(h), t(o, {
+            sceneuuid: v == null ? void 0 : v.value.uuid,
             catalogue: S == null ? void 0 : S.value.uuid,
             props: p,
-            slots: m.default ? m.default() : void 0,
-            attrs: g,
-            ctx: v,
-            scene: w
+            slots: d.default ? d.default() : void 0,
+            attrs: w,
+            ctx: y,
+            scene: v
           }), () => {
@@ -175,3 +175,3 @@ };
       });
-      return [a, c];
+      return [o, c];
     });
@@ -185,23 +185,23 @@ }
 }
-const ae = W(), se = W(), ie = W(), Z = new Te(), { pause: De, resume: Ue, isActive: Ve } = Se(
+const ie = W(), ce = W(), ue = W(), ee = new Te(), { pause: ze, resume: Ue, isActive: je } = 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 = ee.getElapsedTime(), t = ee.getDelta();
+    ie.trigger({ delta: t, elapsed: e }), ce.trigger({ delta: t, elapsed: e }), ue.trigger({ delta: t, elapsed: e });
   },
   { immediate: !1 }
 );
-function ce() {
+function le() {
   return {
-    onBeforeLoop: ae.on,
-    onLoop: se.on,
-    onAfterLoop: ie.on,
-    pause: De,
+    onBeforeLoop: ie.on,
+    onLoop: ce.on,
+    onAfterLoop: ue.on,
+    pause: ze,
     resume: Ue,
-    isActive: Ve
+    isActive: je
   };
 }
-const je = k(new Pe());
-function ue() {
+const Ve = k(new Re());
+function fe() {
   return {
-    scene: je
+    scene: Ve
   };
@@ -216,10 +216,10 @@ }
 async function Qe(e, t, n, s, i) {
-  const { logError: l } = I(), f = new e();
+  const { logError: l } = B(), f = new e();
   i && i(f), n && n(f);
   const r = (Array.isArray(t) ? t : [t]).map(
-    (u) => new Promise((a, c) => {
+    (u) => new Promise((o, c) => {
       f.load(
         u,
         (p) => {
-          p.scene && Object.assign(p, Ne(p.scene)), a(p);
+          p.scene && Object.assign(p, Ne(p.scene)), o(p);
         },
@@ -231,9 +231,9 @@ s,
   );
-  return A(t) ? await Promise.all(r) : await r[0];
+  return $(t) ? await Promise.all(r) : await r[0];
 }
 async function Xe(e) {
-  const t = new Re(), n = new Le(t), s = (i) => new Promise((l, f) => {
+  const t = new Le(), n = new Oe(t), s = (i) => new Promise((l, f) => {
     n.load(
       i,
-      (o) => l(o),
+      (a) => l(a),
       () => null,
@@ -245,7 +245,7 @@ () => {
   });
-  if (A(e)) {
+  if ($(e)) {
     const i = await Promise.all(e.map((l) => s(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: a, metalnessMap: r, aoMap: u } = e;
     return {
@@ -255,3 +255,3 @@ map: i ? await s(i) : null,
       normalMap: f ? await s(f) : null,
-      roughnessMap: o ? await s(o) : null,
+      roughnessMap: a ? await s(a) : null,
       metalnessMap: r ? await s(r) : null,
@@ -262,4 +262,4 @@ aoMap: u ? await s(u) : null
 }
-const L = ve({});
-function le() {
+const L = Ce({});
+function pe() {
   function e(n) {
@@ -273,3 +273,3 @@ return L[n];
     state: L,
-    ...ye(L),
+    ...te(L),
     getState: e,
@@ -279,61 +279,53 @@ setState: t
 }
-const d = k(), V = P(!1);
+const g = k(), j = T(!1);
 function ke(e, t, n) {
   const {
-    alpha: s = !1,
-    antialias: i,
+    alpha: s = !0,
+    antialias: i = !0,
     depth: l,
     logarithmicDepthBuffer: f,
-    failIfMajorPerformanceCaveat: o,
+    failIfMajorPerformanceCaveat: a,
     precision: r,
     premultipliedAlpha: u,
-    stencil: a,
+    stencil: o,
     shadows: c = !1,
-    shadowMapType: p = Oe,
-    physicallyCorrectLights: m = !1,
-    outputEncoding: g = be,
-    toneMapping: v = $e,
+    shadowMapType: p = be,
+    physicallyCorrectLights: d = !1,
+    outputEncoding: w = X,
+    toneMapping: y = Y,
     toneMappingExposure: R = 1,
-    context: w = void 0,
+    context: v = 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)));
+    preserveDrawingBuffer: I = !1,
+    clearColor: h,
+    windowSize: me = !1
+  } = te(n), { width: _, height: D } = m(me) ? ne() : xe(t), { pixelRatio: H } = Ee(), { pause: de, resume: ge } = le(), he = V(() => _.value / D.value), G = () => {
+    g.value && (g.value.setSize(_.value, D.value), g.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)
+    g.value && (g.value.shadowMap.enabled = m(c), g.value.shadowMap.type = m(p), g.value.toneMapping = m(y) || Y, g.value.toneMappingExposure = m(R), g.value.outputEncoding = m(w) || X, h != null && h.value && g.value.setClearColor(De(m(h))), g.value.physicallyCorrectLights = m(d));
+  }, we = () => {
+    const K = F(e);
+    if (g.value || !K)
       return;
-    d.value = new Ae({
+    g.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
+      alpha: m(s),
+      antialias: m(i),
+      context: m(v),
+      depth: m(l),
+      failIfMajorPerformanceCaveat: m(a),
+      logarithmicDepthBuffer: m(f),
+      powerPreference: m(S),
+      precision: m(r),
+      stencil: m(o),
+      preserveDrawingBuffer: m(I),
+      premultipliedAlpha: m(u)
     });
-    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 } = pe();
+    ye("renderer", g.value), J(), G(), ge(), j.value = !0;
+  }, ve = () => {
+    g.value && (g.value.dispose(), g.value = void 0, j.value = !1, de());
   };
-  return O([B, F, H], G), O(
-    () => [
-      c,
-      p,
-      g,
-      m,
-      v,
-      R,
-      h
-    ],
+  return O([_, D, H], G), O(
+    [c, p, w, d, y, R, h],
     J
@@ -343,10 +335,10 @@ ), O(
     () => {
-      z(e) && z(t) && ge();
+      F(e) && F(t) && we();
     },
     { immediate: !0, deep: !0 }
   ), {
-    renderer: d,
-    isReady: V,
-    dispose: he,
-    aspectRatio: de
+    renderer: g,
+    isReady: j,
+    dispose: ve,
+    aspectRatio: he
   };
@@ -370,7 +362,7 @@ }
   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) => {
+    const { logError: s } = B(), i = T(), l = T(), { renderer: f, dispose: a, aspectRatio: r } = ke(i, l, e), u = k();
+    return b("camera", u), b("renderer", f), b("aspect-ratio", r), t.default && !t.default().some((o) => o.type.name === "Scene") && s("TresCanvas must contain a Scene component."), t.default && !t.default().some((o) => {
       var c;
-      return (c = a.type.name) == null ? void 0 : c.includes("Camera");
-    }) && s("Scene must contain a Camera component."), Ce(() => o()), () => {
+      return (c = o.type.name) == null ? void 0 : c.includes("Camera");
+    }) && s("Scene must contain a Camera component."), Se(() => a()), () => {
       if (t.default)
@@ -401,3 +393,3 @@ return q(
   setup(e, { slots: t }) {
-    const { scene: n } = ue(), s = T("renderer"), { activeCamera: i } = ne(), { onLoop: l } = ce();
+    const { scene: n } = fe(), s = P("renderer"), { activeCamera: i } = ae(), { onLoop: l } = le();
     return b("local-scene", n), l(() => {
@@ -410,11 +402,11 @@ s != null && s.value && (i != null && i.value) && (n != null && n.value) && s.value.render(n == null ? void 0 : n.value, i.value);
   }
-}), Ye = Symbol("UseTresState"), Ge = "1.3.2", Ze = {
+}), Ye = Symbol("UseTresState"), Ge = "1.3.3", 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);
+    const { catalogue: s, extend: i } = oe(e, n);
     e.provide("catalogue", s), e.provide("extend", i);
-    const { createComponentInstances: l } = oe(n);
-    l(s).forEach(([o, r]) => {
-      e.component(o, r);
+    const { createComponentInstances: l } = se(n);
+    l(s).forEach(([a, r]) => {
+      e.component(a, r);
     }), window.__TRES__ = {
@@ -427,15 +419,15 @@ app: e,
 export {
-  Ie as CameraType,
+  $e as CameraType,
   Ye as UseTresStateSymbol,
   Ze as default,
   Ne as trasverseObjects,
-  ne as useCamera,
-  re as useCatalogue,
-  oe as useInstanceCreator,
+  ae as useCamera,
+  oe as useCatalogue,
+  se as useInstanceCreator,
   Qe as useLoader,
-  ce as useRenderLoop,
+  le as useRenderLoop,
   ke as useRenderer,
-  ue as useScene,
+  fe as useScene,
   Xe as useTexture,
-  le as useTres
+  pe as useTres
 };

dist/types/index.d.ts

@@ -15,2 +15,3 @@ import { Object3D } from 'three'
 
+export type TresColor = string | number | Color | number[]
 declare global {
@@ -17,0 +18,0 @@ // Define the window interface, with type annotations for the properties and methods of the window object

package.json

 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "type": "module",
@@ -6,0 +6,0 @@ "author": "Alvaro Saburido <[e-mail]> (https://github.com/alvarosabu/)",

No alert changes

Improved metrics

Total package byte prevSize

39202

increased by2.04%

Worsened metrics

Lines of code

770

decreased by-0.13%

No dependency changes