@tresjs/core 1.5.1 → 1.6.1

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

@@ -4,8 +4,8 @@ export declare enum CameraType {
     Perspective = "Perspective",
     Orthographic = "Orthographic"
 }
-export declare type Camera = PerspectiveCamera | OrthographicCamera;
-export declare type CameraState = {
+export type Camera = PerspectiveCamera | OrthographicCamera;
+export type CameraState = {
     cameras: Array<Camera>;
 };
 export interface PerspectiveCameraOptions {

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

@@ -2,12 +2,12 @@ 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;
 }
-export declare type LoaderProto<T> = new (...args: any) => TresLoader<T extends unknown ? any : T>;
-export declare type LoaderReturnType<T, L extends LoaderProto<T>> = T extends unknown ? Awaited<ReturnType<InstanceType<L>['loadAsync']>> : 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;
 export declare function trasverseObjects(object: Object3D): {
     [key: string]: any;
 };
-export declare type Extensions<T extends {
+export type Extensions<T extends {
     prototype: LoaderProto<any>;
 }> = (loader: T['prototype']) => void;
 export declare function useLoader<T extends LoaderProto<T>, U extends string | string[]>(Loader: T, url: U, extensions?: Extensions<T>, onProgress?: (event: ProgressEvent<EventTarget>) => void, cb?: (proto: TresLoader<T>) => void): Promise<U extends any[] ? LoaderReturnType<T, T>[] : LoaderReturnType<T, T>>;

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

@@ -0,0 +1,66 @@
+import { Raycaster, Vector2 } from 'three';
+export declare function useRaycaster(): {
+    raycaster: import("vue").ShallowRef<Raycaster>;
+    pointer: import("vue").Ref<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        readonly isVector2: true;
+        set: (x: number, y: number) => Vector2;
+        setScalar: (scalar: number) => Vector2;
+        setX: (x: number) => Vector2;
+        setY: (y: number) => Vector2;
+        setComponent: (index: number, value: number) => Vector2;
+        getComponent: (index: number) => number;
+        clone: () => Vector2;
+        copy: (v: Vector2) => Vector2;
+        add: (v: Vector2, w?: Vector2 | undefined) => Vector2;
+        addScalar: (s: number) => Vector2;
+        addVectors: (a: Vector2, b: Vector2) => Vector2;
+        addScaledVector: (v: Vector2, s: number) => Vector2;
+        sub: (v: Vector2) => Vector2;
+        subScalar: (s: number) => Vector2;
+        subVectors: (a: Vector2, b: Vector2) => Vector2;
+        multiply: (v: Vector2) => Vector2;
+        multiplyScalar: (scalar: number) => Vector2;
+        divide: (v: Vector2) => Vector2;
+        divideScalar: (s: number) => Vector2;
+        applyMatrix3: (m: import("three").Matrix3) => Vector2;
+        min: (v: Vector2) => Vector2;
+        max: (v: Vector2) => Vector2;
+        clamp: (min: Vector2, max: Vector2) => Vector2;
+        clampScalar: (min: number, max: number) => Vector2;
+        clampLength: (min: number, max: number) => Vector2;
+        floor: () => Vector2;
+        ceil: () => Vector2;
+        round: () => Vector2;
+        roundToZero: () => Vector2;
+        negate: () => Vector2;
+        dot: (v: Vector2) => number;
+        cross: (v: Vector2) => number;
+        lengthSq: () => number;
+        length: () => number;
+        lengthManhattan: () => number;
+        manhattanLength: () => number;
+        normalize: () => Vector2;
+        angle: () => number;
+        distanceTo: (v: Vector2) => number;
+        distanceToSquared: (v: Vector2) => number;
+        distanceToManhattan: (v: Vector2) => number;
+        manhattanDistanceTo: (v: Vector2) => number;
+        setLength: (length: number) => Vector2;
+        lerp: (v: Vector2, alpha: number) => Vector2;
+        lerpVectors: (v1: Vector2, v2: Vector2, alpha: number) => Vector2;
+        equals: (v: Vector2) => boolean;
+        fromArray: (array: number[] | ArrayLike<number>, offset?: number | undefined) => Vector2;
+        toArray: {
+            (array?: number[] | undefined, offset?: number | undefined): number[];
+            (array?: import("three").Vector2Tuple | undefined, offset?: 0 | undefined): import("three").Vector2Tuple;
+            (array: ArrayLike<number>, offset?: number | undefined): ArrayLike<number>;
+        };
+        fromBufferAttribute: (attribute: import("three").BufferAttribute, index: number) => Vector2;
+        rotateAround: (center: Vector2, angle: number) => Vector2;
+        random: () => Vector2;
+    }>;
+};

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

@@ -83,4 +83,4 @@ export declare function useRenderer(canvas: MaybeElementRef, container: MaybeEle
     dispose: () => void;
     aspectRatio: import("vue").ComputedRef<number>;
 };
-export declare type UseRendererReturn = ReturnType<typeof useRenderer>;
+export type UseRendererReturn = ReturnType<typeof useRenderer>;

package/dist/tres.js

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

package/dist/tres.umd.cjs

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

package/dist/types/index.d.ts

@@ -13,6 +13,16 @@ export type TresVNode = VNode & { children?: Array<VNode | { default: any }>; ty
 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 {

package/dist/utils/normalize.d.ts

@@ -1,5 +1,5 @@
 import { Vector3, Color } from 'three';
-export declare type SizeFlexibleParams = number[] | {
+export type SizeFlexibleParams = number[] | {
     width: number;
     height: number;
 };
@@ -12,6 +12,6 @@ export interface Vector2PropInterface {
 export interface Vector3PropInterface extends Vector2PropInterface {
     z?: number;
 }
-export declare type VectorFlexibleParams = Vector3 | number[] | Vector3PropInterface | number;
+export type VectorFlexibleParams = Vector3 | number[] | Vector3PropInterface | number;
 export declare function normalizeVectorFlexibleParam(value: VectorFlexibleParams): Array<number>;
 export declare function normalizeColor(value: Color | Array<number> | string | number): Color;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.5.1",
+  "version": "1.6.1",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -30,34 +30,35 @@
     "threejs-vue"
   ],
   "dependencies": {
-    "three": "^0.148.0",
-    "vue": "^3.2.45"
+    "three": "latest",
+    "vue": "^3.2.47"
   },
   "peerDependencies": {
-    "three": "latest"
+    "three": "latest",
+    "@vueuse/core": "^9.12.0"
   },
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
-    "@tresjs/cientos": "^1.5.0",
-    "@types/three": "^0.148.0",
+    "@tresjs/cientos": "^1.6.0",
+    "@types/three": "latest",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@vitest/coverage-c8": "^0.25.8",
-    "@vitest/ui": "^0.25.8",
-    "@vueuse/core": "^9.11.0",
-    "gl": "6.0.1",
-    "happy-dom": "^8.1.0",
-    "kolorist": "^1.6.0",
-    "pathe": "^1.0.0",
-    "release-it": "^15.5.1",
+    "@vitest/coverage-c8": "^0.28.4",
+    "@vitest/ui": "^0.28.4",
+    "@vueuse/core": "^9.12.0",
+    "gl": "6.0.2",
+    "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.8.3",
-    "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.0.4",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "unplugin-vue-components": "^0.23.0",
+    "vite": "^4.1.1",
     "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "^1.7.1",
-    "vite-plugin-glsl": "^1.1.0",
-    "vite-plugin-require-transform": "^1.0.4",
-    "vitest": "^0.25.8",
+    "vite-plugin-dts": "^1.7.2",
+    "vite-plugin-glsl": "^1.1.2",
+    "vite-plugin-require-transform": "^1.0.9",
+    "vitest": "^0.28.4",
     "vue-demi": "^0.13.11"
   },
   "scripts": {