@tresjs/core 1.5.0 → 1.6.0

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/useRenderLoop/index.d.ts

@@ -1,8 +1,10 @@
 import { EventHookOn, Fn } from '@vueuse/core';
 import { Ref } from 'vue';
+import { Clock } from 'three';
 export interface RenderLoop {
     delta: number;
     elapsed: number;
+    clock: Clock;
 }
 export interface UseRenderLoopReturn {
     onBeforeLoop: EventHookOn<RenderLoop>;

package/dist/tres.js

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

@@ -9,10 +9,20 @@ export type TresVNodeType = VNodeTypes & {
   __name?: string
   setup?: (props: Readonly<any>) => void
 }
-export type TresVNode = VNode & { children?: Array<VNode>; type: TresVNodeType }
+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 {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -38,26 +38,24 @@
   },
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
-    "@histoire/plugin-vue": "0.11.7",
-    "@tresjs/cientos": "^1.4.0",
+    "@tresjs/cientos": "^1.6.0",
     "@types/three": "^0.148.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.25.8",
     "@vitest/ui": "^0.25.8",
-    "@vueuse/core": "^9.7.0",
+    "@vueuse/core": "^9.11.0",
     "gl": "6.0.1",
     "happy-dom": "^8.1.0",
-    "histoire": "0.11.9",
     "kolorist": "^1.6.0",
     "pathe": "^1.0.0",
     "release-it": "^15.5.1",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.8.3",
     "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.0.3",
+    "vite": "^4.0.4",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "^1.7.1",
-    "vite-plugin-glsl": "^1.0.1",
+    "vite-plugin-glsl": "^1.1.0",
     "vite-plugin-require-transform": "^1.0.4",
     "vitest": "^0.25.8",
     "vue-demi": "^0.13.11"
@@ -70,9 +68,6 @@
     "test:ci": "vitest run",
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage",
-    "story:dev": "histoire dev",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   }