@tresjs/core 1.6.2 → 1.7.0

package/dist/core/index.d.ts

@@ -7,3 +7,4 @@ export * from './useScene/';
 export * from './useLoader';
 export * from './useTexture';
 export * from './useTres';
+export * from './useRaycaster';

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

@@ -1,6 +1,7 @@
 import { Object3D } from 'three';
 export interface TresLoader<T> extends THREE.Loader {
     load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): unknown;
+    loadAsync(url: string, onProgress?: (event: ProgressEvent) => void): Promise<T>;
 }
 export type LoaderProto<T> = new (...args: any) => TresLoader<T extends unknown ? any : T>;
 export type LoaderReturnType<T, L extends LoaderProto<T>> = T extends unknown ? Awaited<ReturnType<InstanceType<L>['loadAsync']>> : T;

package/dist/core/useRenderer/component.d.ts

@@ -18,6 +18,7 @@ export declare const TresCanvas: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    preset: PropType<"realistic">;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -35,6 +36,7 @@ export declare const TresCanvas: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    preset: PropType<"realistic">;
 }>>, {
     shadows: boolean;
     physicallyCorrectLights: boolean;

package/dist/core/useRenderer/const.d.ts

@@ -0,0 +1,13 @@
+export declare const rendererPresets: {
+    realistic: {
+        physicallyCorrectLights: boolean;
+        outputEncoding: import("three").TextureEncoding;
+        toneMapping: import("three").ToneMapping;
+        toneMappingExposure: number;
+        shadowMap: {
+            enabled: boolean;
+            type: import("three").ShadowMapType;
+        };
+    };
+};
+export type RendererPresetsType = keyof typeof rendererPresets;

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

@@ -2,6 +2,7 @@ import { MaybeComputedRef, MaybeElementRef } from '@vueuse/core';
 import { WebGLRendererParameters, WebGLRenderer, ShadowMapType } from 'three';
 import type { TextureEncoding, ToneMapping } from 'three';
 import { TresColor } from '../../types';
+import { RendererPresetsType } from './const';
 export interface UseRendererOptions extends WebGLRendererParameters {
     /**
      * Enable shadows in the Renderer
@@ -70,6 +71,7 @@ export interface UseRendererOptions extends WebGLRendererParameters {
      */
     clearColor?: MaybeComputedRef<TresColor>;
     windowSize?: MaybeComputedRef<boolean>;
+    preset?: RendererPresetsType;
 }
 /**
  * Reactive Three.js WebGLRenderer instance

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

@@ -1,14 +1,33 @@
-import { WebGLRenderer } from 'three';
+import { Clock, EventDispatcher, Raycaster, Scene, Vector2, WebGLRenderer } from 'three';
+import { ComputedRef } from 'vue';
 import { Camera } from '../../core';
 export interface TresState {
-    camera?: Camera;
+    camera?: ComputedRef<Camera>;
+    aspectRatio?: ComputedRef<number>;
     renderer?: WebGLRenderer;
+    scene?: Scene;
+    raycaster?: Raycaster;
+    clock?: Clock;
+    pointer?: Vector2;
+    currentInstance?: any;
+    controls?: (EventDispatcher & {
+        enabled: boolean;
+    }) | null;
     [key: string]: any;
 }
 export declare function useTres(): {
     getState: (key: string) => any;
     setState: (key: string, value: any) => void;
-    camera?: import("vue").Ref<Camera | undefined> | undefined;
+    camera?: import("vue").Ref<ComputedRef<Camera> | undefined> | undefined;
+    aspectRatio?: import("vue").Ref<ComputedRef<number> | undefined> | undefined;
     renderer?: import("vue").Ref<WebGLRenderer | undefined> | undefined;
+    scene?: import("vue").Ref<Scene | undefined> | undefined;
+    raycaster?: import("vue").Ref<Raycaster | undefined> | undefined;
+    clock?: import("vue").Ref<Clock | undefined> | undefined;
+    pointer?: import("vue").Ref<Vector2 | undefined> | undefined;
+    currentInstance?: import("vue").Ref<any> | undefined;
+    controls?: import("vue").Ref<(EventDispatcher<import("three").Event> & {
+        enabled: boolean;
+    }) | null | undefined> | undefined;
     state: TresState;
 };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { App } from 'vue';
 export * from './core';
 export * from './keys';
+export * from './types';
 export interface TresOptions {
     prefix?: string;
     extends?: Record<string, unknown>;

package/dist/tres.js

@@ -1,31 +1,32 @@
 /**
  * name: @tresjs/core
- * version: v1.6.2
+ * version: v1.7.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { inject as R, computed as fe, watch as z, ref as L, defineComponent as X, onUnmounted as pe, shallowRef as W, shallowReactive as Le, toRefs as me, provide as x, onBeforeUnmount as Pe, h as ae } from "vue";
-import { useEventListener as Te, createEventHook as Y, useRafFn as Re, resolveUnref as m, useWindowSize as be, useElementSize as Ae, useDevicePixelRatio as Be, unrefElement as H } from "@vueuse/core";
-import * as ie from "three";
-import { PerspectiveCamera as U, OrthographicCamera as de, Vector3 as Oe, Color as K, BufferAttribute as Ie, Clock as ge, Scene as $e, LoadingManager as _e, TextureLoader as Fe, PCFShadowMap as De, LinearEncoding as se, NoToneMapping as ce, WebGLRenderer as ze, Raycaster as Ue, Vector2 as je } from "three";
-var ke = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(ke || {});
-const A = {
+import { computed as me, watch as U, ref as R, inject as de, defineComponent as Z, onUnmounted as ge, shallowRef as ee, shallowReactive as be, toRefs as we, provide as L, onBeforeUnmount as Be, h as ie } from "vue";
+import { useEventListener as Oe, createEventHook as te, useRafFn as Ae, resolveUnref as m, useWindowSize as Ie, useElementSize as Fe, useDevicePixelRatio as $e, unrefElement as J } from "@vueuse/core";
+import * as ce from "three";
+import { PerspectiveCamera as _, OrthographicCamera as he, Vector3 as je, Color as X, Mesh as ke, Fog as ze, BufferAttribute as De, Clock as ve, Scene as Ue, LoadingManager as _e, TextureLoader as Ne, Raycaster as Ve, Vector2 as We, sRGBEncoding as Ge, ACESFilmicToneMapping as He, PCFSoftShadowMap as Ke, PCFShadowMap as Je, LinearEncoding as ue, NoToneMapping as le, WebGLRenderer as Xe } from "three";
+var Ye = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Ye || {});
+const B = {
   cameras: []
-}, Ve = 45;
-let T;
-function we() {
-  const e = R("aspect-ratio"), { setState: n } = Z();
-  function r(f = "Perspective", t) {
-    if (f === "Perspective") {
-      const { near: i, far: u, fov: a } = t || {
+}, qe = 45;
+let P;
+function ye() {
+  const { state: e, setState: n } = T();
+  function o(p = "Perspective", t) {
+    var s;
+    if (p === "Perspective") {
+      const { near: c, far: a, fov: u } = t || {
         near: 0.1,
         far: 1e3,
-        fov: Ve
+        fov: qe
       };
-      T = new U(a, (e == null ? void 0 : e.value) || 1, i, u), A.cameras.push(T);
+      P = new _(u, ((s = e.aspectRatio) == null ? void 0 : s.value) || 1, c, a), B.cameras.push(P);
     } else {
-      const { left: i, right: u, top: a, bottom: c, near: l, far: S } = t || {
+      const { left: c, right: a, top: u, bottom: f, near: S, far: g } = t || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,370 +34,406 @@ function we() {
         near: 0.1,
         far: 1e3
       };
-      T = new de(i, u, a, c, l, S), A.cameras.push(T);
+      P = new he(c, a, u, f, S, g), B.cameras.push(P);
     }
-    return A.cameras.push(T), T;
+    return B.cameras.push(P), P;
   }
-  const o = fe(() => A.cameras[0]);
-  function s() {
-    o.value instanceof U && e && (o.value.aspect = e.value), o.value.updateProjectionMatrix();
+  const r = me(() => B.cameras[0]);
+  n("camera", r);
+  function i() {
+    r.value instanceof _ && e.aspectRatio && (r.value.aspect = e.aspectRatio.value), r.value.updateProjectionMatrix();
   }
-  function p(f) {
-    const t = R("camera");
-    f && t && (t.value = f, n("camera", t.value)), A.cameras.push(f), f instanceof U && e && (f.aspect = e.value), f.updateProjectionMatrix();
+  function l(p) {
+    B.cameras.push(p), p instanceof _ && e.aspectRatio && (p.aspect = e.aspectRatio.value), p.updateProjectionMatrix();
   }
-  return e && z(e, s), {
-    activeCamera: o,
-    createCamera: r,
-    updateCamera: s,
-    pushCamera: p
+  return e.aspectRatio && U(e.aspectRatio, i), {
+    activeCamera: r,
+    createCamera: o,
+    updateCamera: i,
+    pushCamera: l
   };
 }
-const ue = "[TresJS ▲ ■ ●] ";
-function G() {
-  function e(o, s) {
-    console.error(`${ue} ${o}`, s || "");
+const fe = "[TresJS ▲ ■ ●] ";
+function $() {
+  function e(r, i) {
+    console.error(`${fe} ${r}`, i || "");
   }
-  function n(o) {
-    console.warn(`${ue} ${o}`);
+  function n(r) {
+    console.warn(`${fe} ${r}`);
   }
-  function r(o, s) {
+  function o(r, i) {
   }
   return {
     logError: e,
     logWarning: n,
-    logMessage: r
+    logMessage: o
   };
 }
-const j = L({ ...ie, uuid: ie.MathUtils.generateUUID() });
-delete j.value.Scene;
-let B;
-function he(e, n = "Tres") {
-  const { logError: r } = G();
-  !B && e && (B = e);
-  const { createComponentInstances: o } = ve(n);
+const N = R({ ...ce, uuid: ce.MathUtils.generateUUID() });
+delete N.value.Scene;
+let O;
+function Se(e, n = "Tres") {
+  const { logError: o } = $();
+  !O && e && (O = e);
+  const { createComponentInstances: r } = Me(n);
   return {
-    extend: (p) => {
-      if (!p) {
-        r("No objects provided to extend catalogue");
+    extend: (l) => {
+      if (!l) {
+        o("No objects provided to extend catalogue");
         return;
       }
-      j.value = Object.assign(j.value, p);
-      const f = o(L(p));
-      B && f.forEach(([t, i]) => {
-        B._context.components[t] || B.component(t, i);
+      N.value = Object.assign(N.value, l);
+      const p = r(R(l));
+      O && p.forEach(([t, s]) => {
+        O._context.components[t] || O.component(t, s);
       });
     },
-    catalogue: j
+    catalogue: N
   };
 }
-const O = (e) => typeof e < "u", Ne = (e) => typeof e == "function", N = (e) => !!e && e.constructor === Array;
-function We(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof Oe ? [e.x, e.y, e.z] : e;
+const A = (e) => typeof e < "u", Qe = (e) => typeof e == "function", G = (e) => !!e && e.constructor === Array;
+function Ze(e) {
+  return typeof e == "number" ? [e, e, e] : e instanceof je ? [e.x, e.y, e.z] : e;
 }
-function Ge(e) {
-  return e instanceof K ? e : Array.isArray(e) ? new K(...e) : new K(e);
+function et(e) {
+  return e instanceof X ? e : Array.isArray(e) ? new X(...e) : new X(e);
 }
-const He = ["rotation", "scale", "position"];
-function ve(e) {
+const tt = ["rotation", "scale", "position"];
+function Me(e) {
   const {
     /* logMessage, */
     logError: n
-  } = G();
-  function r(t, i) {
-    O(t) && O(i) && Object.entries(t).forEach(([u, a]) => {
-      const c = u.replace(/(-\w)/g, (l) => l[1].toUpperCase());
-      i.setAttribute(c, new Ie(...a));
+  } = $();
+  function o(t, s) {
+    A(t) && A(s) && Object.entries(t).forEach(([c, a]) => {
+      const u = c.replace(/(-\w)/g, (f) => f[1].toUpperCase());
+      s.setAttribute(u, new De(...a));
     });
   }
-  function o(t, i) {
-    O(t) && O(i) && Object.entries(t).forEach(([u, a]) => {
-      const c = u.replace(/(-\w)/g, (l) => l[1].toUpperCase());
-      if (!(c === "args" || a === void 0)) {
-        He.includes(c) && a && (a = We(a)), t.ref && (t.ref = i);
+  function r(t, s) {
+    A(t) && A(s) && Object.entries(t).forEach(([c, a]) => {
+      const u = c.replace(/(-\w)/g, (f) => f[1].toUpperCase());
+      if (!(u === "args" || a === void 0)) {
+        tt.includes(u) && a && (a = Ze(a)), t.ref && (t.ref = s);
         try {
-          if (i[c] && O(i[c].set))
-            i[c].set(...N(a) ? a : [a]);
+          if (s[u] && A(s[u].set))
+            s[u].set(...G(a) ? a : [a]);
           else {
-            if (a === "" && (a = !0), Ne(i[c])) {
-              if (u === "center" && !a)
+            if (a === "" && (a = !0), Qe(s[u])) {
+              if (c === "center" && !a)
                 return;
-              i[c](...N(a) ? a : [a]);
+              s[u](...G(a) ? a : [a]);
               return;
             }
-            i[c] = a;
+            s[u] = a;
           }
-        } catch (l) {
-          n(`There was an error setting ${c} property`, l);
+        } catch (f) {
+          n(`There was an error setting ${u} property`, f);
         }
       }
     });
   }
-  function s(t) {
-    var a, c;
-    const i = /^Symbol\(Fragment\)$/g, u = /^Symbol\(Text\)$/g;
-    if (i.test(t.type.toString()))
-      return t.children.map((l) => s(l));
-    if (u.test(t.type.toString()))
+  function i(t) {
+    var a, u;
+    const s = /^Symbol\(Fragment\)$/g, c = /^Symbol\(Text\)$/g;
+    if (s.test(t.type.toString()))
+      return t.children.map((f) => i(f));
+    if (c.test(t.type.toString()))
       return;
     {
-      const l = t.type.name.replace(e, ""), { catalogue: S } = he(), g = R("catalogue") || S;
+      const f = t.type.name.replace(e, ""), { catalogue: S } = Se(), g = de("catalogue") || S;
       let w;
       if (g)
         if ((a = t.children) != null && a.default) {
-          const P = t.children.default().map((b) => s(b));
-          w = new g.value[l](...P.flat().filter(Boolean));
+          const C = t.children.default().map((b) => i(b));
+          w = new g.value[f](...C.flat().filter(Boolean));
         } else
-          (c = t == null ? void 0 : t.props) != null && c.args ? g != null && g.value[l] ? w = new g.value[l](...t.props.args) : n(`There is no ${l} in the catalogue`, g == null ? void 0 : g.value.uuid) : w = new g.value[l]();
-      return t != null && t.props && (l === "BufferGeometry" ? r(t.props, w) : o(t.props, w)), w;
+          (u = t == null ? void 0 : t.props) != null && u.args ? g != null && g.value[f] ? w = new g.value[f](...t.props.args) : n(`There is no ${f} in the catalogue`, g == null ? void 0 : g.value.uuid) : w = new g.value[f]();
+      return t != null && t.props && (f === "BufferGeometry" ? o(t.props, w) : r(t.props, w)), w;
     }
   }
-  function p(t, i, u) {
-    if (u.default && (u != null && u.default())) {
-      const a = u.default().map((c) => s(c));
+  function l(t, s, c) {
+    if (c.default && (c != null && c.default())) {
+      const a = c.default().map((u) => i(u));
       if (t.name === "Group") {
-        const c = new t();
-        return a.forEach((l) => {
-          c.add(l);
-        }), c;
+        const u = new t();
+        return a.forEach((f) => {
+          u.add(f);
+        }), u;
       } else
         return new t(...a.flat().filter(Boolean));
     } else
-      return i.args ? new t(...i.args) : new t();
+      return s.args ? new t(...s.args) : new t();
   }
-  function f(t) {
-    return Object.entries(t.value).filter(([i, 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");
-    }).map(([i, u]) => {
-      const a = `${e}${i}`, c = X({
+  function p(t) {
+    return Object.entries(t.value).filter(([s, c]) => {
+      var a, u;
+      return (u = (a = c == null ? void 0 : c.prototype) == null ? void 0 : a.constructor) == null ? void 0 : u.toString().includes("class");
+    }).map(([s, c]) => {
+      const a = `${e}${s}`, u = Z({
         name: a,
-        setup(l, { slots: S, attrs: g, ...w }) {
-          const { scene: P } = Se(), { onLoop: b } = Q(), y = R("local-scene") || P, E = R("raycaster"), { pushCamera: M } = we();
-          let h = p(u, g, S);
-          o(g, h), (h instanceof U || h instanceof de) && M(h), h.isObject3D && (y == null || y.value.add(h));
-          let C = null, v = null;
-          if (h.isMesh) {
+        setup(f, { slots: S, attrs: g, ...w }) {
+          const { state: C } = T(), { onLoop: b } = re(), h = C.scene, j = C.raycaster, { pushCamera: E } = ye();
+          let v = l(c, g, S);
+          r(g, v), (v instanceof _ || v instanceof he) && E(v), v.isObject3D && (h == null || h.add(v));
+          let M = null, y = null;
+          if (v instanceof ke) {
             b(() => {
-              if (h && (E != null && E.value)) {
-                const _ = E == null ? void 0 : E.value.intersectObjects(y.value.children);
-                _.length > 0 ? (v = _[0], (C === null || C.object.uuid !== (v == null ? void 0 : v.object.uuid)) && w.emit("pointer-enter", v), w.emit("pointer-move", v)) : (v = null, C !== null && w.emit("pointer-leave", C)), C = v;
+              if (v && j && (h != null && h.children)) {
+                const z = j.intersectObjects(h == null ? void 0 : h.children);
+                z.length > 0 ? (y = z[0], (M === null || M.object.uuid !== (y == null ? void 0 : y.object.uuid)) && w.emit("pointer-enter", y), w.emit("pointer-move", y)) : (y = null, M !== null && w.emit("pointer-leave", M)), M = y;
               }
             });
-            const $ = Te(window, "click", () => {
-              w.emit("click", C);
+            const k = Oe(window, "click", () => {
+              w.emit("click", M);
             });
-            pe(() => {
-              $();
+            ge(() => {
+              k();
             });
           }
-          return y != null && y.value && h.isFog && (y.value.fog = h), w.expose(h), () => {
+          return h && v instanceof ze && (h.fog = v), w.expose(v), () => {
           };
         }
       });
-      return [a, c];
+      return [a, u];
     });
   }
   return {
-    createComponentInstances: f,
-    processProps: o,
-    createInstanceFromVNode: s
+    createComponentInstances: p,
+    processProps: r,
+    createInstanceFromVNode: i
   };
 }
-const ye = Y(), Ce = Y(), q = Y(), I = new ge();
-let k = 0, V = 0;
-const { pause: Ke, resume: Je, isActive: Xe } = Re(
+const Ce = te(), Ee = te(), ne = te(), F = new ve();
+let V = 0, W = 0;
+const { pause: nt, resume: rt, isActive: ot } = Ae(
   () => {
-    ye.trigger({ delta: k, elapsed: V, clock: I }), Ce.trigger({ delta: k, elapsed: V, clock: I }), q.trigger({ delta: k, elapsed: V, clock: I });
+    Ce.trigger({ delta: V, elapsed: W, clock: F }), Ee.trigger({ delta: V, elapsed: W, clock: F }), ne.trigger({ delta: V, elapsed: W, clock: F });
   },
   { immediate: !1 }
 );
-q.on(() => {
-  k = I.getDelta(), V = I.getElapsedTime();
+ne.on(() => {
+  V = F.getDelta(), W = F.getElapsedTime();
 });
-function Q() {
+function re() {
   return {
-    onBeforeLoop: ye.on,
-    onLoop: Ce.on,
-    onAfterLoop: q.on,
-    pause: Ke,
-    resume: Je,
-    isActive: Xe
+    onBeforeLoop: Ce.on,
+    onLoop: Ee.on,
+    onAfterLoop: ne.on,
+    pause: nt,
+    resume: rt,
+    isActive: ot
   };
 }
-const Ye = W(new $e());
-function Se() {
+const at = ee(new Ue());
+function st() {
   return {
-    scene: Ye
+    scene: at
   };
 }
-function qe(e) {
+function it(e) {
   const n = { nodes: {}, materials: {} };
-  return e && e.traverse((r) => {
-    r.name && (n.nodes[r.name] = r), r.material && !n.materials[r.material.name] && (n.materials[r.material.name] = r.material);
+  return e && e.traverse((o) => {
+    o.name && (n.nodes[o.name] = o), o.material && !n.materials[o.material.name] && (n.materials[o.material.name] = o.material);
   }), n;
 }
-async function st(e, n, r, o, s) {
-  const { logError: p } = G(), f = new e();
-  s && s(f), r && r(f);
-  const i = (Array.isArray(n) ? n : [n]).map(
-    (u) => new Promise((a, c) => {
-      f.load(
-        u,
-        (l) => {
-          l.scene && Object.assign(l, qe(l.scene)), a(l);
+async function gt(e, n, o, r, i) {
+  const { logError: l } = $(), p = new e();
+  i && i(p), o && o(p);
+  const s = (Array.isArray(n) ? n : [n]).map(
+    (c) => new Promise((a, u) => {
+      p.load(
+        c,
+        (f) => {
+          f.scene && Object.assign(f, it(f.scene)), a(f);
         },
-        o,
-        (l) => c(p("[useLoader] - Failed to load resource", l))
+        r,
+        (f) => u(l("[useLoader] - Failed to load resource", f))
       );
     })
   );
-  return N(n) ? await Promise.all(i) : await i[0];
+  return G(n) ? await Promise.all(s) : await s[0];
 }
-async function ct(e) {
-  const n = new _e(), r = new Fe(n), o = (s) => new Promise((p, f) => {
-    r.load(
-      s,
-      (t) => p(t),
+async function wt(e) {
+  const n = new _e(), o = new Ne(n), r = (i) => new Promise((l, p) => {
+    o.load(
+      i,
+      (t) => l(t),
       () => null,
       () => {
-        f(new Error("[useTextures] - Failed to load texture"));
+        p(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (N(e)) {
-    const s = await Promise.all(e.map((p) => o(p)));
-    return e.length > 1 ? s : s[0];
+  if (G(e)) {
+    const i = await Promise.all(e.map((l) => r(l)));
+    return e.length > 1 ? i : i[0];
   } else {
-    const { map: s, displacementMap: p, normalMap: f, roughnessMap: t, metalnessMap: i, aoMap: u } = e;
+    const { map: i, displacementMap: l, normalMap: p, roughnessMap: t, metalnessMap: s, aoMap: c } = e;
     return {
-      map: s ? await o(s) : null,
-      displacementMap: p ? await o(p) : null,
-      normalMap: f ? await o(f) : null,
-      roughnessMap: t ? await o(t) : null,
-      metalnessMap: i ? await o(i) : null,
-      aoMap: u ? await o(u) : null
+      map: i ? await r(i) : null,
+      displacementMap: l ? await r(l) : null,
+      normalMap: p ? await r(p) : null,
+      roughnessMap: t ? await r(t) : null,
+      metalnessMap: s ? await r(s) : null,
+      aoMap: c ? await r(c) : null
     };
   }
 }
-const F = Le({});
-function Z() {
-  function e(r) {
-    return F[r];
+const D = be({});
+function T() {
+  function e(o) {
+    return D[o];
   }
-  function n(r, o) {
-    F[r] = o;
+  function n(o, r) {
+    D[o] = r;
   }
   return {
-    state: F,
-    ...me(F),
+    state: D,
+    ...we(D),
     getState: e,
     setState: n
   };
 }
-const d = W(), J = L(!1);
-function Qe(e, n, r) {
+const Y = ee(new Ve()), I = R(new We()), pe = R(null);
+function ct() {
+  const { setState: e } = T();
+  e("raycaster", Y.value), e("pointer", I), e("currentInstance", pe), L("raycaster", Y), L("pointer", I), L("currentInstance", pe);
+  function n(o) {
+    I.value.x = o.clientX / window.innerWidth * 2 - 1, I.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
+  }
+  return window.addEventListener("pointermove", n), ge(() => {
+    window.removeEventListener("pointermove", n);
+  }), {
+    raycaster: Y,
+    pointer: I
+  };
+}
+const q = {
+  realistic: {
+    physicallyCorrectLights: !0,
+    outputEncoding: Ge,
+    toneMapping: He,
+    toneMappingExposure: 3,
+    shadowMap: {
+      enabled: !0,
+      type: Ke
+    }
+  }
+}, Re = (e, n) => {
+  for (const o of Object.keys(n))
+    n[o] instanceof Object && Object.assign(n[o], Re(e[o], n[o]));
+  return Object.assign(e || {}, n), e;
+}, d = ee(), Q = R(!1);
+function ut(e, n, o) {
   const {
-    alpha: o = !0,
-    antialias: s = !0,
-    depth: p,
-    logarithmicDepthBuffer: f,
+    alpha: r = !0,
+    antialias: i = !0,
+    depth: l,
+    logarithmicDepthBuffer: p,
     failIfMajorPerformanceCaveat: t,
-    precision: i,
-    premultipliedAlpha: u,
+    precision: s,
+    premultipliedAlpha: c,
     stencil: a,
-    shadows: c = !1,
-    shadowMapType: l = De,
+    shadows: u = !1,
+    shadowMapType: f = Je,
     physicallyCorrectLights: S = !1,
-    outputEncoding: g = se,
-    toneMapping: w = ce,
-    toneMappingExposure: P = 1,
+    outputEncoding: g = ue,
+    toneMapping: w = le,
+    toneMappingExposure: C = 1,
     context: b = void 0,
-    powerPreference: y = "default",
-    preserveDrawingBuffer: E = !1,
-    clearColor: M,
-    windowSize: h = !1
-  } = me(r), { width: C, height: v } = m(h) ? be() : Ae(n), { pixelRatio: $ } = Be(), { pause: _, resume: Ee } = Q(), ee = fe(() => C.value / v.value), te = () => {
-    d.value && (d.value.setSize(C.value, v.value), d.value.setPixelRatio(Math.min($.value, 2)));
-  }, ne = () => {
-    d.value && (d.value.shadowMap.enabled = m(c), d.value.shadowMap.type = m(l), d.value.toneMapping = m(w) || ce, d.value.toneMappingExposure = m(P), d.value.outputEncoding = m(g) || se, M != null && M.value && d.value.setClearColor(Ge(m(M))), d.value.physicallyCorrectLights = m(S));
-  }, Me = () => {
-    const re = H(e);
-    if (d.value || !re)
+    powerPreference: h = "default",
+    preserveDrawingBuffer: j = !1,
+    clearColor: E,
+    windowSize: v = !1,
+    preset: M = void 0
+  } = we(o), { width: y, height: k } = m(v) ? Ie() : Fe(n), { logError: z } = $(), { pixelRatio: oe } = $e(), { pause: xe, resume: Pe } = re(), H = me(() => y.value / k.value), ae = () => {
+    d.value && (d.value.setSize(y.value, k.value), d.value.setPixelRatio(Math.min(oe.value, 2)));
+  }, se = () => {
+    if (!d.value)
+      return;
+    const x = m(M);
+    if (x) {
+      x in q || z("Renderer Preset must be one of these: " + Object.keys(q).join(", ")), Re(d.value, q[x]);
       return;
-    d.value = new ze({
-      canvas: re,
-      alpha: m(o),
-      antialias: m(s),
+    }
+    d.value.shadowMap.enabled = m(u), d.value.shadowMap.type = m(f), d.value.toneMapping = m(w) || le, d.value.toneMappingExposure = m(C), d.value.outputEncoding = m(g) || ue, E != null && E.value && d.value.setClearColor(et(m(E))), d.value.physicallyCorrectLights = m(S);
+  }, Le = () => {
+    const x = J(e);
+    if (d.value || !x)
+      return;
+    d.value = new Xe({
+      canvas: x,
+      alpha: m(r),
+      antialias: m(i),
       context: m(b),
-      depth: m(p),
+      depth: m(l),
       failIfMajorPerformanceCaveat: m(t),
-      logarithmicDepthBuffer: m(f),
-      powerPreference: m(y),
-      precision: m(i),
+      logarithmicDepthBuffer: m(p),
+      powerPreference: m(h),
+      precision: m(s),
       stencil: m(a),
-      preserveDrawingBuffer: m(E),
-      premultipliedAlpha: m(u)
+      preserveDrawingBuffer: m(j),
+      premultipliedAlpha: m(c)
     });
-    const { setState: oe } = Z();
-    oe("renderer", d.value), oe("clock", new ge()), ne(), te(), Ee(), J.value = !0;
-  }, xe = () => {
-    d.value && (d.value.dispose(), d.value = void 0, J.value = !1, _());
+    const { setState: K } = T();
+    K("renderer", d.value), K("clock", new ve()), K("aspectRatio", H), se(), ae(), Pe(), Q.value = !0;
+  }, Te = () => {
+    d.value && (d.value.dispose(), d.value = void 0, Q.value = !1, xe());
   };
-  return z([ee, $], te), z(
-    [c, l, g, S, w, P, M],
-    ne
-  ), z(
+  return U([H, oe], ae), U(
+    [u, f, g, S, w, C, E],
+    se
+  ), U(
     () => [e, n],
     () => {
-      H(e) && H(n) && Me();
+      J(e) && J(n) && Le();
     },
     { immediate: !0, deep: !0 }
   ), {
     renderer: d,
-    isReady: J,
-    dispose: xe,
-    aspectRatio: ee
+    isReady: Q,
+    dispose: Te,
+    aspectRatio: H
   };
 }
-const Ze = X({
+const lt = Z({
   name: "TresCanvas",
   props: {
     shadows: Boolean,
-    shadowMapType: Object,
+    shadowMapType: Number,
     physicallyCorrectLights: Boolean,
-    outputEncoding: Object,
-    toneMapping: Object,
+    outputEncoding: Number,
+    toneMapping: Number,
     toneMappingExposure: Number,
     context: Object,
-    powerPreference: Object,
+    powerPreference: String,
     preserveDrawingBuffer: Boolean,
     clearColor: String,
-    windowSize: { type: Boolean, default: !1 }
+    windowSize: { type: Boolean, default: !1 },
+    preset: String
   },
-  setup(e, { slots: n, attrs: r }) {
-    const { logError: o } = G(), s = L(), p = L(), { renderer: f, dispose: t, aspectRatio: i } = Qe(s, p, e);
-    x("aspect-ratio", i), x("renderer", f);
-    const u = W();
-    return x("camera", u), n.default && !n.default().some((a) => a.type.name === "Scene") && o("TresCanvas must contain a Scene component."), n.default && !n.default().some((a) => {
-      var c;
-      return (c = a.type.name) == null ? void 0 : c.includes("Camera");
-    }) && o("Scene must contain a Camera component."), Pe(() => t()), () => {
+  setup(e, { slots: n, attrs: o }) {
+    const { logError: r } = $(), i = R(), l = R(), { renderer: p, dispose: t, aspectRatio: s } = ut(i, l, e);
+    return L("aspect-ratio", s), L("renderer", p), n.default && !n.default().some((c) => c.type.name === "Scene") && r("TresCanvas must contain a Scene component."), n.default && !n.default().some((c) => {
+      var a;
+      return (a = c.type.name) == null ? void 0 : a.includes("Camera");
+    }) && r("Scene must contain a Camera component."), Be(() => t()), () => {
       if (n.default)
-        return ae(
+        return ie(
           "div",
           {
-            ref: p,
+            ref: l,
             style: {
               position: "relative",
               width: "100%",
               height: "100vh",
-              ...r.style
+              ...o.style
             }
           },
           [
-            ae("canvas", {
-              ref: s,
+            ie("canvas", {
+              ref: i,
               style: {
                 width: "100%",
                 height: "100%",
@@ -410,57 +447,42 @@ const Ze = X({
         );
     };
   }
-}), le = W(new Ue()), D = L(new je()), et = L(null);
-function tt() {
-  x("raycaster", le), x("pointer", D), x("currentInstance", et);
-  function e(n) {
-    D.value.x = n.clientX / window.innerWidth * 2 - 1, D.value.y = -(n.clientY / window.innerHeight) * 2 + 1;
-  }
-  return window.addEventListener("pointermove", e), pe(() => {
-    window.removeEventListener("pointermove", e);
-  }), {
-    raycaster: le,
-    pointer: D
-  };
-}
-const nt = X({
+}), ft = Z({
   name: "Scene",
   setup(e, { slots: n }) {
-    const { scene: r } = Se(), o = R("renderer"), { activeCamera: s } = we(), { raycaster: p, pointer: f } = tt(), { onLoop: t } = Q();
-    return x("local-scene", r), t(() => {
-      p.value.setFromCamera(f.value, s.value), o != null && o.value && (s != null && s.value) && (r != null && r.value) && o.value.render(r == null ? void 0 : r.value, s.value);
+    const { setState: o } = T(), { scene: r } = st(), i = de("renderer"), { activeCamera: l } = ye(), { raycaster: p, pointer: t } = ct(), { onLoop: s } = re();
+    return L("local-scene", r), o("scene", r.value), s(() => {
+      p.value.setFromCamera(t.value, l.value), i != null && i.value && (l != null && l.value) && (r != null && r.value) && i.value.render(r == null ? void 0 : r.value, l.value);
     }), () => {
       if (n.default)
         return n.default();
     };
   }
-}), ut = Symbol("UseTresState"), rt = "1.6.2", lt = {
+}), ht = Symbol("UseTresState"), vt = {
   install(e, n) {
-    const r = (n == null ? void 0 : n.prefix) || "Tres";
-    e.component(`${r}Canvas`, Ze), e.component(`${r}Scene`, nt);
-    const { catalogue: o, extend: s } = he(e, r);
-    e.provide("catalogue", o), e.provide("extend", s), e.provide("useTres", Z());
-    const { createComponentInstances: p } = ve(r);
-    p(o).forEach(([t, i]) => {
-      e.component(t, i);
-    }), window.__TRES__ = {
-      app: e,
-      version: rt
-    };
+    const o = (n == null ? void 0 : n.prefix) || "Tres";
+    e.component(`${o}Canvas`, lt), e.component(`${o}Scene`, ft);
+    const { catalogue: r, extend: i } = Se(e, o);
+    e.provide("catalogue", r), e.provide("extend", i), e.provide("useTres", T());
+    const { createComponentInstances: l } = Me(o);
+    l(r).forEach(([t, s]) => {
+      e.component(t, s);
+    });
   }
 };
 export {
-  ke as CameraType,
-  ut as UseTresStateSymbol,
-  lt as default,
-  qe as trasverseObjects,
-  we as useCamera,
-  he as useCatalogue,
-  ve as useInstanceCreator,
-  st as useLoader,
-  Q as useRenderLoop,
-  Qe as useRenderer,
-  Se as useScene,
-  ct as useTexture,
-  Z as useTres
+  Ye as CameraType,
+  ht as UseTresStateSymbol,
+  vt as default,
+  it as trasverseObjects,
+  ye as useCamera,
+  Se as useCatalogue,
+  Me as useInstanceCreator,
+  gt as useLoader,
+  ct as useRaycaster,
+  re as useRenderLoop,
+  ut as useRenderer,
+  st as useScene,
+  wt as useTexture,
+  T as useTres
 };

package/dist/tres.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/core
- * version: v1.6.2
+ * version: v1.7.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(h,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):(h=typeof globalThis<"u"?globalThis:h||self,o(h.tres={},h.Vue,h.VueUseCore,h.Three))})(this,function(h,o,f,m){"use strict";function ue(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const Z=ue(m);var E=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(E||{});const j={cameras:[]},fe=45;let O;function G(){const e=o.inject("aspect-ratio"),{setState:n}=N();function r(d="Perspective",t){if(d==="Perspective"){const{near:s,far:u,fov:i}=t||{near:.1,far:1e3,fov:fe};O=new m.PerspectiveCamera(i,(e==null?void 0:e.value)||1,s,u),j.cameras.push(O)}else{const{left:s,right:u,top:i,bottom:l,near:p,far:U}=t||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};O=new m.OrthographicCamera(s,u,i,l,p,U),j.cameras.push(O)}return j.cameras.push(O),O}const a=o.computed(()=>j.cameras[0]);function c(){a.value instanceof m.PerspectiveCamera&&e&&(a.value.aspect=e.value),a.value.updateProjectionMatrix()}function g(d){const t=o.inject("camera");d&&t&&(t.value=d,n("camera",t.value)),j.cameras.push(d),d instanceof m.PerspectiveCamera&&e&&(d.aspect=e.value),d.updateProjectionMatrix()}return e&&o.watch(e,c),{activeCamera:a,createCamera:r,updateCamera:c,pushCamera:g}}const H="[TresJS ▲ ■ ●] ";function D(){function e(a,c){console.error(`${H} ${a}`,c||"")}function n(a){console.warn(`${H} ${a}`)}function r(a,c){}return{logError:e,logWarning:n,logMessage:r}}const $=o.ref({...Z,uuid:Z.MathUtils.generateUUID()});delete $.value.Scene;let _;function K(e,n="Tres"){const{logError:r}=D();!_&&e&&(_=e);const{createComponentInstances:a}=J(n);return{extend:g=>{if(!g){r("No objects provided to extend catalogue");return}$.value=Object.assign($.value,g);const d=a(o.ref(g));_&&d.forEach(([t,s])=>{_._context.components[t]||_.component(t,s)})},catalogue:$}}const A=e=>typeof e<"u",pe=e=>typeof e=="function",k=e=>!!e&&e.constructor===Array;function de(e){return typeof e=="number"?[e,e,e]:e instanceof m.Vector3?[e.x,e.y,e.z]:e}function me(e){return e instanceof m.Color?e:Array.isArray(e)?new m.Color(...e):new m.Color(e)}const ge=["rotation","scale","position"];function J(e){const{logError:n}=D();function r(t,s){A(t)&&A(s)&&Object.entries(t).forEach(([u,i])=>{const l=u.replace(/(-\w)/g,p=>p[1].toUpperCase());s.setAttribute(l,new m.BufferAttribute(...i))})}function a(t,s){A(t)&&A(s)&&Object.entries(t).forEach(([u,i])=>{const l=u.replace(/(-\w)/g,p=>p[1].toUpperCase());if(!(l==="args"||i===void 0)){ge.includes(l)&&i&&(i=de(i)),t.ref&&(t.ref=s);try{if(s[l]&&A(s[l].set))s[l].set(...k(i)?i:[i]);else{if(i===""&&(i=!0),pe(s[l])){if(u==="center"&&!i)return;s[l](...k(i)?i:[i]);return}s[l]=i}}catch(p){n(`There was an error setting ${l} property`,p)}}})}function c(t){var i,l;const s=/^Symbol\(Fragment\)$/g,u=/^Symbol\(Text\)$/g;if(s.test(t.type.toString()))return t.children.map(p=>c(p));if(u.test(t.type.toString()))return;{const p=t.type.name.replace(e,""),{catalogue:U}=K(),v=o.inject("catalogue")||U;let y;if(v)if((i=t.children)!=null&&i.default){const x=t.children.default().map(I=>c(I));y=new v.value[p](...x.flat().filter(Boolean))}else(l=t==null?void 0:t.props)!=null&&l.args?v!=null&&v.value[p]?y=new v.value[p](...t.props.args):n(`There is no ${p} in the catalogue`,v==null?void 0:v.value.uuid):y=new v.value[p];return t!=null&&t.props&&(p==="BufferGeometry"?r(t.props,y):a(t.props,y)),y}}function g(t,s,u){if(u.default&&(u!=null&&u.default())){const i=u.default().map(l=>c(l));if(t.name==="Group"){const l=new t;return i.forEach(p=>{l.add(p)}),l}else return new t(...i.flat().filter(Boolean))}else return s.args?new t(...s.args):new t}function d(t){return Object.entries(t.value).filter(([s,u])=>{var i,l;return(l=(i=u==null?void 0:u.prototype)==null?void 0:i.constructor)==null?void 0:l.toString().includes("class")}).map(([s,u])=>{const i=`${e}${s}`,l=o.defineComponent({name:i,setup(p,{slots:U,attrs:v,...y}){const{scene:x}=Y(),{onLoop:I}=T(),M=o.inject("local-scene")||x,L=o.inject("raycaster"),{pushCamera:b}=G();let C=g(u,v,U);a(v,C),(C instanceof m.PerspectiveCamera||C instanceof m.OrthographicCamera)&&b(C),C.isObject3D&&(M==null||M.value.add(C));let P=null,S=null;if(C.isMesh){I(()=>{if(C&&(L!=null&&L.value)){const q=L==null?void 0:L.value.intersectObjects(M.value.children);q.length>0?(S=q[0],(P===null||P.object.uuid!==(S==null?void 0:S.object.uuid))&&y.emit("pointer-enter",S),y.emit("pointer-move",S)):(S=null,P!==null&&y.emit("pointer-leave",P)),P=S}});const W=f.useEventListener(window,"click",()=>{y.emit("click",P)});o.onUnmounted(()=>{W()})}return M!=null&&M.value&&C.isFog&&(M.value.fog=C),y.expose(C),()=>{}}});return[i,l]})}return{createComponentInstances:d,processProps:a,createInstanceFromVNode:c}}const ee=f.createEventHook(),te=f.createEventHook(),X=f.createEventHook(),B=new m.Clock;let F=0,z=0;const{pause:he,resume:we,isActive:ve}=f.useRafFn(()=>{ee.trigger({delta:F,elapsed:z,clock:B}),te.trigger({delta:F,elapsed:z,clock:B}),X.trigger({delta:F,elapsed:z,clock:B})},{immediate:!1});X.on(()=>{F=B.getDelta(),z=B.getElapsedTime()});function T(){return{onBeforeLoop:ee.on,onLoop:te.on,onAfterLoop:X.on,pause:he,resume:we,isActive:ve}}const ye=o.shallowRef(new m.Scene);function Y(){return{scene:ye}}function ne(e){const n={nodes:{},materials:{}};return e&&e.traverse(r=>{r.name&&(n.nodes[r.name]=r),r.material&&!n.materials[r.material.name]&&(n.materials[r.material.name]=r.material)}),n}async function Ce(e,n,r,a,c){const{logError:g}=D(),d=new e;c&&c(d),r&&r(d);const s=(Array.isArray(n)?n:[n]).map(u=>new Promise((i,l)=>{d.load(u,p=>{p.scene&&Object.assign(p,ne(p.scene)),i(p)},a,p=>l(g("[useLoader] - Failed to load resource",p)))}));return k(n)?await Promise.all(s):await s[0]}async function Se(e){const n=new m.LoadingManager,r=new m.TextureLoader(n),a=c=>new Promise((g,d)=>{r.load(c,t=>g(t),()=>null,()=>{d(new Error("[useTextures] - Failed to load texture"))})});if(k(e)){const c=await Promise.all(e.map(g=>a(g)));return e.length>1?c:c[0]}else{const{map:c,displacementMap:g,normalMap:d,roughnessMap:t,metalnessMap:s,aoMap:u}=e;return{map:c?await a(c):null,displacementMap:g?await a(g):null,normalMap:d?await a(d):null,roughnessMap:t?await a(t):null,metalnessMap:s?await a(s):null,aoMap:u?await a(u):null}}}const V=o.shallowReactive({});function N(){function e(r){return V[r]}function n(r,a){V[r]=a}return{state:V,...o.toRefs(V),getState:e,setState:n}}const w=o.shallowRef(),Q=o.ref(!1);function re(e,n,r){const{alpha:a=!0,antialias:c=!0,depth:g,logarithmicDepthBuffer:d,failIfMajorPerformanceCaveat:t,precision:s,premultipliedAlpha:u,stencil:i,shadows:l=!1,shadowMapType:p=m.PCFShadowMap,physicallyCorrectLights:U=!1,outputEncoding:v=m.LinearEncoding,toneMapping:y=m.NoToneMapping,toneMappingExposure:x=1,context:I=void 0,powerPreference:M="default",preserveDrawingBuffer:L=!1,clearColor:b,windowSize:C=!1}=o.toRefs(r),{width:P,height:S}=f.resolveUnref(C)?f.useWindowSize():f.useElementSize(n),{pixelRatio:W}=f.useDevicePixelRatio(),{pause:q,resume:je}=T(),ae=o.computed(()=>P.value/S.value),ie=()=>{w.value&&(w.value.setSize(P.value,S.value),w.value.setPixelRatio(Math.min(W.value,2)))},se=()=>{w.value&&(w.value.shadowMap.enabled=f.resolveUnref(l),w.value.shadowMap.type=f.resolveUnref(p),w.value.toneMapping=f.resolveUnref(y)||m.NoToneMapping,w.value.toneMappingExposure=f.resolveUnref(x),w.value.outputEncoding=f.resolveUnref(v)||m.LinearEncoding,b!=null&&b.value&&w.value.setClearColor(me(f.resolveUnref(b))),w.value.physicallyCorrectLights=f.resolveUnref(U))},_e=()=>{const ce=f.unrefElement(e);if(w.value||!ce)return;w.value=new m.WebGLRenderer({canvas:ce,alpha:f.resolveUnref(a),antialias:f.resolveUnref(c),context:f.resolveUnref(I),depth:f.resolveUnref(g),failIfMajorPerformanceCaveat:f.resolveUnref(t),logarithmicDepthBuffer:f.resolveUnref(d),powerPreference:f.resolveUnref(M),precision:f.resolveUnref(s),stencil:f.resolveUnref(i),preserveDrawingBuffer:f.resolveUnref(L),premultipliedAlpha:f.resolveUnref(u)});const{setState:le}=N();le("renderer",w.value),le("clock",new m.Clock),se(),ie(),je(),Q.value=!0},Ae=()=>{w.value&&(w.value.dispose(),w.value=void 0,Q.value=!1,q())};return o.watch([ae,W],ie),o.watch([l,p,v,U,y,x,b],se),o.watch(()=>[e,n],()=>{f.unrefElement(e)&&f.unrefElement(n)&&_e()},{immediate:!0,deep:!0}),{renderer:w,isReady:Q,dispose:Ae,aspectRatio:ae}}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:{type:Boolean,default:!1}},setup(e,{slots:n,attrs:r}){const{logError:a}=D(),c=o.ref(),g=o.ref(),{renderer:d,dispose:t,aspectRatio:s}=re(c,g,e);o.provide("aspect-ratio",s),o.provide("renderer",d);const u=o.shallowRef();return o.provide("camera",u),n.default&&!n.default().some(i=>i.type.name==="Scene")&&a("TresCanvas must contain a Scene component."),n.default&&!n.default().some(i=>{var l;return(l=i.type.name)==null?void 0:l.includes("Camera")})&&a("Scene must contain a Camera component."),o.onBeforeUnmount(()=>t()),()=>{if(n.default)return o.h("div",{ref:g,style:{position:"relative",width:"100%",height:"100vh",...r.style}},[o.h("canvas",{ref:c,style:{width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}}),n.default()])}}}),oe=o.shallowRef(new m.Raycaster),R=o.ref(new m.Vector2),Pe=o.ref(null);function Ue(){o.provide("raycaster",oe),o.provide("pointer",R),o.provide("currentInstance",Pe);function e(n){R.value.x=n.clientX/window.innerWidth*2-1,R.value.y=-(n.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",e),o.onUnmounted(()=>{window.removeEventListener("pointermove",e)}),{raycaster:oe,pointer:R}}const Le=o.defineComponent({name:"Scene",setup(e,{slots:n}){const{scene:r}=Y(),a=o.inject("renderer"),{activeCamera:c}=G(),{raycaster:g,pointer:d}=Ue(),{onLoop:t}=T();return o.provide("local-scene",r),t(()=>{g.value.setFromCamera(d.value,c.value),a!=null&&a.value&&(c!=null&&c.value)&&(r!=null&&r.value)&&a.value.render(r==null?void 0:r.value,c.value)}),()=>{if(n.default)return n.default()}}}),be=Symbol("UseTresState"),Oe="1.6.2",xe={install(e,n){const r=(n==null?void 0:n.prefix)||"Tres";e.component(`${r}Canvas`,Me),e.component(`${r}Scene`,Le);const{catalogue:a,extend:c}=K(e,r);e.provide("catalogue",a),e.provide("extend",c),e.provide("useTres",N());const{createComponentInstances:g}=J(r);g(a).forEach(([t,s])=>{e.component(t,s)}),window.__TRES__={app:e,version:Oe}}};h.CameraType=E,h.UseTresStateSymbol=be,h.default=xe,h.trasverseObjects=ne,h.useCamera=G,h.useCatalogue=K,h.useInstanceCreator=J,h.useLoader=Ce,h.useRenderLoop=T,h.useRenderer=re,h.useScene=Y,h.useTexture=Se,h.useTres=N,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(h,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):(h=typeof globalThis<"u"?globalThis:h||self,o(h.tres={},h.Vue,h.VueUseCore,h.Three))})(this,function(h,o,f,p){"use strict";function ge(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const te=ge(p);var ne=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(ne||{});const B={cameras:[]},he=45;let x;function K(){const{state:e,setState:t}=U();function r(g="Perspective",n){var i;if(g==="Perspective"){const{near:l,far:s,fov:u}=n||{near:.1,far:1e3,fov:he};x=new p.PerspectiveCamera(u,((i=e.aspectRatio)==null?void 0:i.value)||1,l,s),B.cameras.push(x)}else{const{left:l,right:s,top:u,bottom:m,near:P,far:y}=n||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};x=new p.OrthographicCamera(l,s,u,m,P,y),B.cameras.push(x)}return B.cameras.push(x),x}const a=o.computed(()=>B.cameras[0]);t("camera",a);function c(){a.value instanceof p.PerspectiveCamera&&e.aspectRatio&&(a.value.aspect=e.aspectRatio.value),a.value.updateProjectionMatrix()}function d(g){B.cameras.push(g),g instanceof p.PerspectiveCamera&&e.aspectRatio&&(g.aspect=e.aspectRatio.value),g.updateProjectionMatrix()}return e.aspectRatio&&o.watch(e.aspectRatio,c),{activeCamera:a,createCamera:r,updateCamera:c,pushCamera:d}}const re="[TresJS ▲ ■ ●] ";function I(){function e(a,c){console.error(`${re} ${a}`,c||"")}function t(a){console.warn(`${re} ${a}`)}function r(a,c){}return{logError:e,logWarning:t,logMessage:r}}const $=o.ref({...te,uuid:te.MathUtils.generateUUID()});delete $.value.Scene;let A;function J(e,t="Tres"){const{logError:r}=I();!A&&e&&(A=e);const{createComponentInstances:a}=X(t);return{extend:d=>{if(!d){r("No objects provided to extend catalogue");return}$.value=Object.assign($.value,d);const g=a(o.ref(d));A&&g.forEach(([n,i])=>{A._context.components[n]||A.component(n,i)})},catalogue:$}}const k=e=>typeof e<"u",we=e=>typeof e=="function",z=e=>!!e&&e.constructor===Array;function ye(e){return typeof e=="number"?[e,e,e]:e instanceof p.Vector3?[e.x,e.y,e.z]:e}function ve(e){return e instanceof p.Color?e:Array.isArray(e)?new p.Color(...e):new p.Color(e)}const Ce=["rotation","scale","position"];function X(e){const{logError:t}=I();function r(n,i){k(n)&&k(i)&&Object.entries(n).forEach(([l,s])=>{const u=l.replace(/(-\w)/g,m=>m[1].toUpperCase());i.setAttribute(u,new p.BufferAttribute(...s))})}function a(n,i){k(n)&&k(i)&&Object.entries(n).forEach(([l,s])=>{const u=l.replace(/(-\w)/g,m=>m[1].toUpperCase());if(!(u==="args"||s===void 0)){Ce.includes(u)&&s&&(s=ye(s)),n.ref&&(n.ref=i);try{if(i[u]&&k(i[u].set))i[u].set(...z(s)?s:[s]);else{if(s===""&&(s=!0),we(i[u])){if(l==="center"&&!s)return;i[u](...z(s)?s:[s]);return}i[u]=s}}catch(m){t(`There was an error setting ${u} property`,m)}}})}function c(n){var s,u;const i=/^Symbol\(Fragment\)$/g,l=/^Symbol\(Text\)$/g;if(i.test(n.type.toString()))return n.children.map(m=>c(m));if(l.test(n.type.toString()))return;{const m=n.type.name.replace(e,""),{catalogue:P}=J(),y=o.inject("catalogue")||P;let v;if(y)if((s=n.children)!=null&&s.default){const L=n.children.default().map(D=>c(D));v=new y.value[m](...L.flat().filter(Boolean))}else(u=n==null?void 0:n.props)!=null&&u.args?y!=null&&y.value[m]?v=new y.value[m](...n.props.args):t(`There is no ${m} in the catalogue`,y==null?void 0:y.value.uuid):v=new y.value[m];return n!=null&&n.props&&(m==="BufferGeometry"?r(n.props,v):a(n.props,v)),v}}function d(n,i,l){if(l.default&&(l!=null&&l.default())){const s=l.default().map(u=>c(u));if(n.name==="Group"){const u=new n;return s.forEach(m=>{u.add(m)}),u}else return new n(...s.flat().filter(Boolean))}else return i.args?new n(...i.args):new n}function g(n){return Object.entries(n.value).filter(([i,l])=>{var s,u;return(u=(s=l==null?void 0:l.prototype)==null?void 0:s.constructor)==null?void 0:u.toString().includes("class")}).map(([i,l])=>{const s=`${e}${i}`,u=o.defineComponent({name:s,setup(m,{slots:P,attrs:y,...v}){const{state:L}=U(),{onLoop:D}=V(),C=L.scene,W=L.raycaster,{pushCamera:O}=K();let S=d(l,y,P);a(y,S),(S instanceof p.PerspectiveCamera||S instanceof p.OrthographicCamera)&&O(S),S.isObject3D&&(C==null||C.add(S));let b=null,M=null;if(S instanceof p.Mesh){D(()=>{if(S&&W&&(C!=null&&C.children)){const q=W.intersectObjects(C==null?void 0:C.children);q.length>0?(M=q[0],(b===null||b.object.uuid!==(M==null?void 0:M.object.uuid))&&v.emit("pointer-enter",M),v.emit("pointer-move",M)):(M=null,b!==null&&v.emit("pointer-leave",b)),b=M}});const G=f.useEventListener(window,"click",()=>{v.emit("click",b)});o.onUnmounted(()=>{G()})}return C&&S instanceof p.Fog&&(C.fog=S),v.expose(S),()=>{}}});return[s,u]})}return{createComponentInstances:g,processProps:a,createInstanceFromVNode:c}}const ae=f.createEventHook(),oe=f.createEventHook(),Y=f.createEventHook(),_=new p.Clock;let N=0,R=0;const{pause:Se,resume:Me,isActive:Pe}=f.useRafFn(()=>{ae.trigger({delta:N,elapsed:R,clock:_}),oe.trigger({delta:N,elapsed:R,clock:_}),Y.trigger({delta:N,elapsed:R,clock:_})},{immediate:!1});Y.on(()=>{N=_.getDelta(),R=_.getElapsedTime()});function V(){return{onBeforeLoop:ae.on,onLoop:oe.on,onAfterLoop:Y.on,pause:Se,resume:Me,isActive:Pe}}const be=o.shallowRef(new p.Scene);function se(){return{scene:be}}function ie(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 Ue(e,t,r,a,c){const{logError:d}=I(),g=new e;c&&c(g),r&&r(g);const i=(Array.isArray(t)?t:[t]).map(l=>new Promise((s,u)=>{g.load(l,m=>{m.scene&&Object.assign(m,ie(m.scene)),s(m)},a,m=>u(d("[useLoader] - Failed to load resource",m)))}));return z(t)?await Promise.all(i):await i[0]}async function Le(e){const t=new p.LoadingManager,r=new p.TextureLoader(t),a=c=>new Promise((d,g)=>{r.load(c,n=>d(n),()=>null,()=>{g(new Error("[useTextures] - Failed to load texture"))})});if(z(e)){const c=await Promise.all(e.map(d=>a(d)));return e.length>1?c:c[0]}else{const{map:c,displacementMap:d,normalMap:g,roughnessMap:n,metalnessMap:i,aoMap:l}=e;return{map:c?await a(c):null,displacementMap:d?await a(d):null,normalMap:g?await a(g):null,roughnessMap:n?await a(n):null,metalnessMap:i?await a(i):null,aoMap:l?await a(l):null}}}const T=o.shallowReactive({});function U(){function e(r){return T[r]}function t(r,a){T[r]=a}return{state:T,...o.toRefs(T),getState:e,setState:t}}const Q=o.shallowRef(new p.Raycaster),F=o.ref(new p.Vector2),ce=o.ref(null);function le(){const{setState:e}=U();e("raycaster",Q.value),e("pointer",F),e("currentInstance",ce),o.provide("raycaster",Q),o.provide("pointer",F),o.provide("currentInstance",ce);function t(r){F.value.x=r.clientX/window.innerWidth*2-1,F.value.y=-(r.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),o.onUnmounted(()=>{window.removeEventListener("pointermove",t)}),{raycaster:Q,pointer:F}}const Z={realistic:{physicallyCorrectLights:!0,outputEncoding:p.sRGBEncoding,toneMapping:p.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:p.PCFSoftShadowMap}}},ue=(e,t)=>{for(const r of Object.keys(t))t[r]instanceof Object&&Object.assign(t[r],ue(e[r],t[r]));return Object.assign(e||{},t),e},w=o.shallowRef(),E=o.ref(!1);function fe(e,t,r){const{alpha:a=!0,antialias:c=!0,depth:d,logarithmicDepthBuffer:g,failIfMajorPerformanceCaveat:n,precision:i,premultipliedAlpha:l,stencil:s,shadows:u=!1,shadowMapType:m=p.PCFShadowMap,physicallyCorrectLights:P=!1,outputEncoding:y=p.LinearEncoding,toneMapping:v=p.NoToneMapping,toneMappingExposure:L=1,context:D=void 0,powerPreference:C="default",preserveDrawingBuffer:W=!1,clearColor:O,windowSize:S=!1,preset:b=void 0}=o.toRefs(r),{width:M,height:G}=f.resolveUnref(S)?f.useWindowSize():f.useElementSize(t),{logError:q}=I(),{pixelRatio:pe}=f.useDevicePixelRatio(),{pause:Ie,resume:Ae}=V(),H=o.computed(()=>M.value/G.value),de=()=>{w.value&&(w.value.setSize(M.value,G.value),w.value.setPixelRatio(Math.min(pe.value,2)))},me=()=>{if(!w.value)return;const j=f.resolveUnref(b);if(j){j in Z||q("Renderer Preset must be one of these: "+Object.keys(Z).join(", ")),ue(w.value,Z[j]);return}w.value.shadowMap.enabled=f.resolveUnref(u),w.value.shadowMap.type=f.resolveUnref(m),w.value.toneMapping=f.resolveUnref(v)||p.NoToneMapping,w.value.toneMappingExposure=f.resolveUnref(L),w.value.outputEncoding=f.resolveUnref(y)||p.LinearEncoding,O!=null&&O.value&&w.value.setClearColor(ve(f.resolveUnref(O))),w.value.physicallyCorrectLights=f.resolveUnref(P)},ke=()=>{const j=f.unrefElement(e);if(w.value||!j)return;w.value=new p.WebGLRenderer({canvas:j,alpha:f.resolveUnref(a),antialias:f.resolveUnref(c),context:f.resolveUnref(D),depth:f.resolveUnref(d),failIfMajorPerformanceCaveat:f.resolveUnref(n),logarithmicDepthBuffer:f.resolveUnref(g),powerPreference:f.resolveUnref(C),precision:f.resolveUnref(i),stencil:f.resolveUnref(s),preserveDrawingBuffer:f.resolveUnref(W),premultipliedAlpha:f.resolveUnref(l)});const{setState:ee}=U();ee("renderer",w.value),ee("clock",new p.Clock),ee("aspectRatio",H),me(),de(),Ae(),E.value=!0},_e=()=>{w.value&&(w.value.dispose(),w.value=void 0,E.value=!1,Ie())};return o.watch([H,pe],de),o.watch([u,m,y,P,v,L,O],me),o.watch(()=>[e,t],()=>{f.unrefElement(e)&&f.unrefElement(t)&&ke()},{immediate:!0,deep:!0}),{renderer:w,isReady:E,dispose:_e,aspectRatio:H}}const Oe=o.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Number,physicallyCorrectLights:Boolean,outputEncoding:Number,toneMapping:Number,toneMappingExposure:Number,context:Object,powerPreference:String,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:{type:Boolean,default:!1},preset:String},setup(e,{slots:t,attrs:r}){const{logError:a}=I(),c=o.ref(),d=o.ref(),{renderer:g,dispose:n,aspectRatio:i}=fe(c,d,e);return o.provide("aspect-ratio",i),o.provide("renderer",g),t.default&&!t.default().some(l=>l.type.name==="Scene")&&a("TresCanvas must contain a Scene component."),t.default&&!t.default().some(l=>{var s;return(s=l.type.name)==null?void 0:s.includes("Camera")})&&a("Scene must contain a Camera component."),o.onBeforeUnmount(()=>n()),()=>{if(t.default)return o.h("div",{ref:d,style:{position:"relative",width:"100%",height:"100vh",...r.style}},[o.h("canvas",{ref:c,style:{width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}}),t.default()])}}}),xe=o.defineComponent({name:"Scene",setup(e,{slots:t}){const{setState:r}=U(),{scene:a}=se(),c=o.inject("renderer"),{activeCamera:d}=K(),{raycaster:g,pointer:n}=le(),{onLoop:i}=V();return o.provide("local-scene",a),r("scene",a.value),i(()=>{g.value.setFromCamera(n.value,d.value),c!=null&&c.value&&(d!=null&&d.value)&&(a!=null&&a.value)&&c.value.render(a==null?void 0:a.value,d.value)}),()=>{if(t.default)return t.default()}}}),je=Symbol("UseTresState"),Be={install(e,t){const r=(t==null?void 0:t.prefix)||"Tres";e.component(`${r}Canvas`,Oe),e.component(`${r}Scene`,xe);const{catalogue:a,extend:c}=J(e,r);e.provide("catalogue",a),e.provide("extend",c),e.provide("useTres",U());const{createComponentInstances:d}=X(r);d(a).forEach(([n,i])=>{e.component(n,i)})}};h.CameraType=ne,h.UseTresStateSymbol=je,h.default=Be,h.trasverseObjects=ie,h.useCamera=K,h.useCatalogue=J,h.useInstanceCreator=X,h.useLoader=Ue,h.useRaycaster=le,h.useRenderLoop=V,h.useRenderer=fe,h.useScene=se,h.useTexture=Le,h.useTres=U,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/types/index.d.ts

@@ -1,35 +1,28 @@
-import { Object3D } from 'three'
-import { VNode, VNodeTypes } from 'vue'
-
-export type TresInstance = Object3D<Event> & { [key: string]: any }
-
-export type TresCatalogue = Record<string, any>
+import { Color, Intersection, Object3D, Vector2, Vector3, Event } from 'three';
+import { VNode, VNodeTypes } from 'vue';
+export type TresInstance = Object3D<Event> & {
+    [key: string]: any;
+};
+export type TresCatalogue = Record<string, any>;
 export type TresVNodeType = VNodeTypes & {
-  name?: string | Array<string>
-  __name?: string
-  setup?: (props: Readonly<any>) => void
-}
-export type TresVNode = VNode & { children?: Array<VNode | { default: any }>; type: TresVNodeType }
-export type TresAttributes = Record<string, any> & { args?: number[] }
-
-export type TresColor = string | number | Color | number[]
-
+    name?: string | Array<string>;
+    __name?: string;
+    setup?: (props: Readonly<any>) => void;
+};
+export type TresVNode = VNode & {
+    children?: Array<VNode | {
+        default: any;
+    }>;
+    type: TresVNodeType;
+};
+export type TresAttributes = Record<string, any> & {
+    args?: number[];
+};
+export type TresColor = string | number | Color | number[];
 export interface TresEvent extends Intersection<Object3D<Event>> {
-  object: Object3D
-  distance: number
-  face?: Face3
-  faceIndex?: number | undefined
-  point: Vector3
-  uv?: Vector2
-}
-
-declare global {
-  // Define the window interface, with type annotations for the properties and methods of the window object
-  interface Window {
-    // Define the location property, with a type of Location
-    __TRES__: {
-      app: App
-      version: string
-    }
-  }
+    object: Object3D;
+    distance: number;
+    faceIndex?: number | undefined;
+    point: Vector3;
+    uv?: Vector2;
 }

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export declare function toSetMethodName(key: string): string;
+export declare const merge: (target: any, source: any) => any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -16,6 +16,10 @@
       "import": "./dist/tres.js",
       "require": "./dist/tres.umd.cjs"
     },
+    "./types": {
+      "require": "./dist/index.d.ts",
+      "import": "./dist/index.d.ts"
+    },
     "./styles": "./dist/style.css",
     "./*": "./dist/tres.js"
   },
@@ -30,13 +34,15 @@
     "threejs-vue"
   ],
   "peerDependencies": {
-    "vue": "^3.2.47",
     "three": "latest",
-    "@vueuse/core": "^9.12.0"
+    "vue": "^3.2.47"
+  },
+  "dependencies": {
+    "@alvarosabu/utils": "^2.3.0",
+    "@vueuse/core": "^9.13.0"
   },
   "devDependencies": {
-    "@alvarosabu/utils": "^2.2.0",
-    "@tresjs/cientos": "^1.6.0",
+    "@tresjs/cientos": "^1.7.0",
     "@types/three": "latest",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.28.4",
@@ -45,14 +51,14 @@
     "happy-dom": "^8.2.6",
     "kolorist": "^1.7.0",
     "pathe": "^1.1.0",
-    "release-it": "^15.6.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.9.0",
-    "unplugin-vue-components": "^0.23.0",
-    "vite": "^4.1.1",
+    "three": "latest",
+    "vite": "^4.1.2",
     "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "^1.7.2",
+    "vite-plugin-dts": "2.0.0-beta.1",
     "vite-plugin-glsl": "^1.1.2",
+    "vite-plugin-inspect": "^0.7.15",
     "vite-plugin-require-transform": "^1.0.9",
     "vitest": "^0.28.4",
     "vue-demi": "^0.13.11"