@tresjs/core 0.5.0 → 1.0.0

package/dist/core/index.d.ts

@@ -1,5 +1,5 @@
 export * from './useCamera';
-export * from './useCatalog';
+export * from './useCatalogue';
 export * from './useInstanceCreator';
 export * from './useRenderLoop/';
 export * from './useRenderer/';

package/dist/core/{useCatalog → useCatalogue}/index.d.ts

@@ -1,4 +1,4 @@
-export declare function useCatalog(): {
+export declare function useCatalogue(): {
     extend: (objects: any) => void;
     catalogue: {
         [key: string]: any;

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

@@ -1,3 +1,3 @@
-export declare function useInstanceCreator(): {
-    createComponentInstances: () => (string | import("vue").DefineComponent<{}, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>)[][];
+export declare function useInstanceCreator(prefix: string): {
+    createComponentInstances: (newObjects: Record<string, any>) => (string | import("vue").DefineComponent<{}, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>)[][];
 };

package/dist/env.d.ts

@@ -6,3 +6,5 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare module '*.glsl' {}

package/dist/index.d.ts

@@ -1,9 +1,13 @@
 import { App } from 'vue';
 export * from './core';
 export * from './keys';
+export interface TresOptions {
+    prefix?: string;
+    extends?: Record<string, unknown>;
+}
 export interface TresPlugin {
     [key: string]: any;
-    install: (app: App, options?: any) => void;
+    install: (app: App, options?: TresOptions) => void;
 }
 declare const plugin: TresPlugin;
 export default plugin;

package/dist/logo-dark.svg

@@ -0,0 +1,5 @@
+<svg width="44" height="10" viewBox="0 0 44 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.14255 1.42916C5.53095 0.781817 6.46913 0.781816 6.85753 1.42915L11.0913 8.4855C11.4913 9.15203 11.0111 10 10.2338 10H1.76623C0.988935 10 0.508822 9.15203 0.908736 8.4855L5.14255 1.42916Z" fill="#82DBC5"/>
+<rect x="19" y="1" width="9" height="9" rx="1" fill="#f2f2f2"/>
+<circle cx="39.5" cy="5.5" r="4.5" fill="#EFAC35"/>
+</svg>

package/dist/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v0.5.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 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";
+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 x = {
+const P = {
   cameras: []
-}, Re = 45;
-let S;
-function k() {
-  const { width: e, height: t } = Z();
-  function r(i = "Perspective", s) {
+}, Ae = 45;
+let E;
+function Z() {
+  const { width: e, height: t } = Y(), { setState: n } = oe();
+  function a(i = "Perspective", f) {
     if (i === "Perspective") {
-      const { near: p, far: d, fov: f } = s || {
+      const { near: u, far: m, fov: d } = f || {
         near: 0.1,
         far: 1e3,
-        fov: Re
+        fov: Ae
       };
-      S = new I(f, a.value, p, d), x.cameras.push(S);
+      E = new $(d, r.value, u, m), P.cameras.push(E);
     } else {
-      const { left: p, right: d, top: f, bottom: m, near: y, far: M } = s || {
+      const { left: u, right: m, top: d, bottom: w, near: C, far: x } = f || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,116 +33,117 @@ function k() {
         near: 0.1,
         far: 1e3
       };
-      S = new we(p, d, f, m, y, M), x.cameras.push(S);
+      E = new Ce(u, m, d, w, C, x), P.cameras.push(E);
     }
-    return x.cameras.push(S), S;
+    return P.cameras.push(E), E;
   }
-  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();
+  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 u(i) {
-    const s = Y("camera");
-    i && s && (s.value = i), x.cameras.push(i), i instanceof I && (i.aspect = a.value), i.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 O(a, o), {
-    activeCamera: n,
-    createCamera: r,
-    updateCamera: o,
-    pushCamera: u
+  return O(r, s), {
+    activeCamera: o,
+    createCamera: a,
+    updateCamera: s,
+    pushCamera: c
   };
 }
-let T = { ...he };
-delete T.Scene;
-function Te() {
+let b = { ...ve };
+delete b.Scene;
+function be() {
   return {
     extend: (t) => {
-      T = Object.assign(T, t);
+      b = Object.assign(b, t);
     },
-    catalogue: T
+    catalogue: b
   };
 }
-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;
+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 K(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] ";
+const K = "[TresJS \u25B2 \u25A0 \u25CF] ";
 function W() {
-  function e(a, n) {
-    console.error(`${Q} ${a}`, n || "");
+  function e(a, r) {
+    console.error(`${K} ${a}`, r || "");
   }
   function t(a) {
-    console.warn(`${Q} ${a}`);
+    console.warn(`${K} ${a}`);
   }
-  function r(a, n) {
+  function n(a, r) {
   }
   return {
     logError: e,
     logWarning: t,
-    logMessage: r
+    logMessage: n
   };
 }
-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(i, { slots: s, attrs: p, ...d }) {
-          t(n, {
-            props: i,
-            slots: s,
-            attrs: p,
+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 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 (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;
+          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;
               });
-              f = new o(...C);
+              w = new s(...y);
             } else
-              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);
+              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 E(C, c) {
-            Object.entries(C).forEach(([w, g]) => {
-              const h = w.replace(/(-\w)/g, (P) => P[1].toUpperCase());
+          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)) {
-                Be.includes(w) && g && (g = Ae(g));
+                Ie.includes(v) && g && (g = $e(g));
                 try {
-                  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);
+                  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 M(), () => {
+          return L(), () => {
           };
         }
       });
-      return [n, u];
+      return [c, i];
     });
   }
   return {
     createComponentInstances: a
   };
 }
-const ee = U(), te = U(), ne = U(), X = new ve(), { pause: ze, resume: Fe, isActive: je } = me(
+const ee = U(), te = U(), ne = U(), Q = new Me(), { pause: De, resume: Fe, isActive: _e } = ge(
   () => {
-    const e = X.getElapsedTime(), t = X.getDelta();
+    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 }
@@ -152,151 +153,155 @@ function re() {
     onBeforeLoop: ee.on,
     onLoop: te.on,
     onAfterLoop: ne.on,
-    pause: ze,
+    pause: De,
     resume: Fe,
-    isActive: je
+    isActive: _e
   };
 }
-const De = $(new ye());
+const je = j(new Se());
 function ae() {
   return {
-    scene: De
+    scene: je
   };
 }
-function _e(e) {
+function Ue(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);
+  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 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);
+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,
-        (m) => f(o("[useLoader] - Failed to load resource", m))
+        (d) => m(o("[useLoader] - Failed to load resource", d))
       );
     })
   );
-  return V(t) ? await Promise.all(s) : await s[0];
+  return V(t) ? await Promise.all(i) : await i[0];
 }
-async function Je(e) {
-  const t = new Me(), r = new Se(t), a = (n) => new Promise((o, u) => {
-    r.load(
-      n,
-      (i) => o(i),
+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,
       () => {
-        u(new Error("[useTextures] - Failed to load texture"));
+        s(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
   if (V(e)) {
-    const n = await Promise.all(e.map((o) => a(o)));
-    return e.length > 1 ? n : n[0];
+    const r = await Promise.all(e.map((o) => a(o)));
+    return e.length > 1 ? r : r[0];
   } else {
-    const { map: n, displacementMap: o, normalMap: u, roughnessMap: i, metalnessMap: s, aoMap: p } = e;
+    const { map: r, displacementMap: o, normalMap: s, roughnessMap: c, metalnessMap: i, aoMap: f } = e;
     return {
-      map: n ? await a(n) : null,
+      map: r ? await a(r) : 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
+      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 = pe({});
-function qe() {
-  function e(r) {
-    return L[r];
+const R = fe({});
+function oe() {
+  function e(n) {
+    return R[n];
   }
-  function t(r, a) {
-    L[r] = a;
+  function t(n, a) {
+    R[n] = a;
   }
   return {
-    state: L,
-    ...le(L),
+    state: R,
+    ...me(R),
     getState: e,
     setState: t
   };
 }
-const l = $(), F = D(!1);
-function $e(e, t, r) {
+const p = j(), z = F(!1);
+function Ve(e, t, n) {
   const {
     alpha: a = !1,
-    antialias: n,
+    antialias: r,
     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,
+    logarithmicDepthBuffer: s,
+    failIfMajorPerformanceCaveat: c,
+    precision: i,
+    premultipliedAlpha: f,
+    stencil: u,
+    shadows: m = !1,
+    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 = () => {
+    !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 G = B(e);
+    if (p.value || !G)
+      return;
+    p.value = new Re({
+      canvas: G,
       alpha: a,
-      antialias: n,
-      context: c,
+      antialias: r,
+      context: T,
       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());
+      failIfMajorPerformanceCaveat: c,
+      logarithmicDepthBuffer: s,
+      powerPreference: y,
+      precision: i,
+      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 O([b, A, H], N), O(
+  return O([h, M, k], N), O(
     () => [
-      f,
       m,
-      M,
-      y,
-      E,
+      d,
       C,
-      h
+      w,
+      x,
+      L,
+      v
     ],
-    G
+    H
   ), O(
     () => [e, t],
     () => {
-      B(e) && B(t) && ce();
+      B(e) && B(t) && ue();
     },
     { immediate: !0, deep: !0 }
   ), {
-    renderer: l,
-    isReady: F,
-    dispose: ue,
-    aspectRatio: ie
+    renderer: p,
+    isReady: z,
+    dispose: le,
+    aspectRatio: ce
   };
 }
-const Ue = _({
+const We = _({
   name: "TresCanvas",
   props: {
     shadows: Boolean,
@@ -311,13 +316,14 @@ const Ue = _({
     clearColor: String,
     windowSize: Boolean
   },
-  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"
-    ) && a("Scene must contain a Camera component."), fe(() => i()), () => {
+  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 q(
+        return J(
           "div",
           {
             ref: o,
@@ -325,12 +331,12 @@ const Ue = _({
               position: "relative",
               width: "100%",
               height: "100vh",
-              ...r.style
+              ...n.style
             }
           },
           [
-            q("canvas", {
-              ref: n,
+            J("canvas", {
+              ref: r,
               style: { width: "100%", height: "100%", position: "absolute", top: 0, left: 0 }
             }),
             t.default()
@@ -338,23 +344,24 @@ const Ue = _({
         );
     };
   }
-}), Ve = _({
+}), ke = _({
   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);
+    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();
     };
   }
 }), Ke = Symbol("UseTresState"), Qe = {
-  install(e) {
-    e.component("TresCanvas", Ue), e.component("Scene", Ve);
-    const { createComponentInstances: t } = Ie();
-    t().forEach(([a, n]) => {
-      e.component(a, n);
+  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);
     });
   }
 };
@@ -362,14 +369,14 @@ export {
   Oe as CameraType,
   Ke as UseTresStateSymbol,
   Qe as default,
-  _e as trasverseObjects,
-  k as useCamera,
-  Te as useCatalog,
-  Ie as useInstanceCreator,
-  Ge as useLoader,
+  Ue as trasverseObjects,
+  Z as useCamera,
+  be as useCatalogue,
+  ze as useInstanceCreator,
+  Je as useLoader,
   re as useRenderLoop,
-  $e as useRenderer,
+  Ve as useRenderer,
   ae as useScene,
-  Je as useTexture,
-  qe as useTres
+  qe as useTexture,
+  oe as useTres
 };

package/dist/tres.umd.cjs

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

package/dist/types/index.d.ts

@@ -1,14 +1,11 @@
-import { Object3D } from 'three';
-import { VNode, VNodeTypes } from 'vue';
-export declare type TresInstance = Object3D<Event> & {
-    [key: string]: any;
-};
-export declare type TresVNodeType = VNodeTypes & {
-    name?: string | Array<string>;
-    __name?: string;
-    setup?: (props: Readonly<any>) => void;
-};
-export declare type TresVNode = VNode & {
-    children?: Array<VNode>;
-    type: TresVNodeType;
-};
+import { Object3D } from 'three'
+import { VNode, VNodeTypes } from 'vue'
+
+export type TresInstance = Object3D<Event> & { [key: string]: any }
+
+export type TresVNodeType = VNodeTypes & {
+  name?: string | Array<string>
+  __name?: string
+  setup?: (props: Readonly<any>) => void
+}
+export type TresVNode = VNode & { children?: Array<VNode>; type: TresVNodeType }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -30,6 +30,7 @@
     "threejs-vue"
   ],
   "dependencies": {
+    "three": "^0.146.0",
     "vue": "^3.2.45"
   },
   "peerDependencies": {
@@ -38,7 +39,8 @@
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
     "@histoire/plugin-vue": "0.11.7",
-    "@tresjs/cientos": "^0.4.0",
+    "@tresjs/cientos": "^1.0.0",
+    "@types/three": "^0.146.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitest/coverage-c8": "^0.25.1",
     "@vitest/ui": "^0.25.1",
@@ -54,6 +56,7 @@
     "vite": "^3.2.3",
     "vite-plugin-banner": "^0.6.1",
     "vite-plugin-dts": "^1.7.0",
+    "vite-plugin-glsl": "^0.5.3",
     "vite-plugin-require-transform": "^1.0.4",
     "vitest": "^0.25.1",
     "vue-demi": "^0.13.11"