@tresjs/core 2.0.0-beta.8 → 2.0.0-rc.0

package/README.md

@@ -1,13 +1,30 @@
-# @tresjs/core ▲ ■ ●
+![repo-banner](/public/repo-banner.png)
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/v/@tresjs/core/beta?color=%2382DBCA" alt="npm package"></a>
+  <a href="https://discord.gg/tfY9aSNT"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
+</p>
+
+# TresJS `@tresjs/core`
 
 > Declarative ThreeJS using Vue Components
 
 - 💡 Build 3D scene as they were Vue components
 - ⚡️ Powered by Vite
-- 🥰 It brings all the updated features of ThreeJS right awayregardless the version
+- 🥰 It brings all the updated features of ThreeJS right away regardless the version
 - 🦾 Fully Typed
 
-Tres (Spanish word for "three", pronounced `/tres/` ) is a way of creating ThreeJS scenes with Vue components in a declarative fashion. Think of it as a [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) or [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) but without the need of a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html).
+Tres (Spanish word for "three", pronounced `/tres/` ) is a way of creating ThreeJS scenes with Vue components in a declarative fashion.
+
+It's build on-top of a [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) and it's powered by Vite.
+
+The goal is to provide the Vue's community an easy way of building 3D scenes with Vue, always up to date with the latest ThreeJS features and with 0-to-none mantainance.
+
+## Installation
+
+```bash
+pnpm install @tresjs/core@beta three
+```
 
 ## Docs
 
@@ -19,10 +36,10 @@ Checkout the [docs](https://tresjs.org)
 
 ## Ecosystem
 
-| Package                     | Version                                                                                           |
-| --------------------------- | :------------------------------------------------------------------------------------------------ |
-| [Tres](packages/tres)       | ![tres version](https://img.shields.io/npm/v/@tresjs/core/alpha.svg?label=%20&color=%2382DBCA)    |
-| [Cientos](packages/cientos) | ![tres version](https://img.shields.io/npm/v/@tresjs/cientos/alpha.svg?label=%20&color=%23f19b00) |
+| Package                     | Version                                                                                          |
+| --------------------------- | :----------------------------------------------------------------------------------------------- |
+| [Tres](packages/tres)       | ![tres version](https://img.shields.io/npm/v/@tresjs/core/beta.svg?label=%20&color=%2382DBCA)    |
+| [Cientos](packages/cientos) | ![tres version](https://img.shields.io/npm/v/@tresjs/cientos/beta.svg?label=%20&color=%23f19b00) |
 
 ## Contribution
 

package/dist/components/TresCanvas.d.ts

@@ -1,4 +1,5 @@
 import { ShadowMapType, TextureEncoding, ToneMapping } from 'three';
+import { CameraType } from '../composables';
 import { RendererPresetsType } from '../composables/useRenderer/const';
 export interface TresCanvasProps {
     shadows?: boolean;
@@ -15,6 +16,7 @@ export interface TresCanvasProps {
     windowSize?: boolean;
     preset?: RendererPresetsType;
     disableRender?: boolean;
+    camera?: CameraType;
 }
 /**
  * Vue component for rendering a Tres component.

package/dist/components/TresScene.d.ts

@@ -1,4 +1,5 @@
 import { ShadowMapType, TextureEncoding, ToneMapping } from 'three';
+import { CameraType } from '../composables';
 import { RendererPresetsType } from '../composables/useRenderer/const';
 export interface TresSceneProps {
     shadows?: boolean;
@@ -15,6 +16,7 @@ export interface TresSceneProps {
     windowSize?: boolean;
     preset?: RendererPresetsType;
     disableRender?: boolean;
+    camera?: CameraType;
 }
 export declare const TresScene: import("vue").DefineComponent<TresSceneProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<TresSceneProps>, {}>;
 export default TresScene;

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

@@ -1,4 +1,4 @@
-import { MaybeComputedRef } from '@vueuse/core';
+import { MaybeRefOrGetter } from '@vueuse/core';
 import { WebGLRendererParameters, WebGLRenderer, ShadowMapType } from 'three';
 import type { TextureEncoding, ToneMapping } from 'three';
 import { TresColor } from '../../types';
@@ -9,7 +9,7 @@ export interface UseRendererOptions extends WebGLRendererParameters {
      *
      * @default false
      */
-    shadows?: MaybeComputedRef<boolean>;
+    shadows?: MaybeRefOrGetter<boolean>;
     /**
      * Set the shadow map type
      * Can be PCFShadowMap, PCFSoftShadowMap, BasicShadowMap, VSMShadowMap
@@ -17,7 +17,7 @@ export interface UseRendererOptions extends WebGLRendererParameters {
      *
      * @default PCFSoftShadowMap
      */
-    shadowMapType?: MaybeComputedRef<ShadowMapType>;
+    shadowMapType?: MaybeRefOrGetter<ShadowMapType>;
     /**
      * Whether to use physically correct lighting mode.
      * See the [lights / physical example](https://threejs.org/examples/#webgl_lights_physical).
@@ -25,34 +25,34 @@ export interface UseRendererOptions extends WebGLRendererParameters {
      * @default false
      * @deprecated Use {@link WebGLRenderer.useLegacyLights useLegacyLights} instead.
      */
-    physicallyCorrectLights?: MaybeComputedRef<boolean>;
+    physicallyCorrectLights?: MaybeRefOrGetter<boolean>;
     /**
      * Whether to use legacy lighting mode.
      *
-     * @type {MaybeComputedRef<boolean>}
+     * @type {MaybeRefOrGetter<boolean>}
      * @memberof UseRendererOptions
      */
-    useLegacyLights?: MaybeComputedRef<boolean>;
+    useLegacyLights?: MaybeRefOrGetter<boolean>;
     /**
      * Defines the output encoding of the renderer.
      * Can be LinearEncoding, sRGBEncoding
      *
      * @default LinearEncoding
      */
-    outputEncoding?: MaybeComputedRef<TextureEncoding>;
+    outputEncoding?: MaybeRefOrGetter<TextureEncoding>;
     /**
      * Defines the tone mapping used by the renderer.
      * Can be NoToneMapping, LinearToneMapping, ReinhardToneMapping, Uncharted2ToneMapping, CineonToneMapping, ACESFilmicToneMapping, CustomToneMapping
      *
      * @default NoToneMapping
      */
-    toneMapping?: MaybeComputedRef<ToneMapping>;
+    toneMapping?: MaybeRefOrGetter<ToneMapping>;
     /**
      * Defines the tone mapping exposure used by the renderer.
      *
      * @default 1
      */
-    toneMappingExposure?: MaybeComputedRef<number>;
+    toneMappingExposure?: MaybeRefOrGetter<number>;
     /**
      * The context used by the renderer.
      *
@@ -77,8 +77,8 @@ export interface UseRendererOptions extends WebGLRendererParameters {
      *
      * @default 0x000000
      */
-    clearColor?: MaybeComputedRef<TresColor>;
-    windowSize?: MaybeComputedRef<boolean | string>;
+    clearColor?: MaybeRefOrGetter<TresColor>;
+    windowSize?: MaybeRefOrGetter<boolean | string>;
     preset?: RendererPresetsType;
 }
 /**

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

@@ -95,6 +95,7 @@ export type UseTresReturn = {
     setState: (key: string, value: any) => void;
     aspectRatio: ComputedRef<number>;
 };
+export declare const TRES_CONTEXT_KEY: unique symbol;
 /**
  * The Tres state.
  *

package/dist/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-beta.8
+ * version: v2.0.0-rc.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { ref as S, watchEffect as ce, toRef as _e, shallowRef as ue, toRefs as fe, computed as le, watch as W, shallowReactive as de, provide as Se, inject as Oe, onUnmounted as pe, createRenderer as ke, defineComponent as me, onMounted as je, h as k } from "vue";
-import * as ve from "three";
-import { MathUtils as De, PerspectiveCamera as F, OrthographicCamera as Ie, Clock as ge, Color as H, sRGBEncoding as Be, ACESFilmicToneMapping as ze, PCFSoftShadowMap as Fe, PCFShadowMap as Ge, LinearEncoding as te, NoToneMapping as ae, WebGLRenderer as Ve, LoadingManager as Ue, TextureLoader as We, Raycaster as He, Vector2 as Ye, BufferAttribute as $e } from "three";
-import { createEventHook as q, useRafFn as Ne, resolveUnref as l, useWindowSize as qe, useElementSize as Ke, useDevicePixelRatio as Je, unrefElement as Y, isFunction as ne, useEventListener as Xe } from "@vueuse/core";
-const he = S({ uuid: De.generateUUID() }), we = (e) => void Object.assign(he.value, e);
+import { ref as R, watchEffect as le, toRef as _e, shallowRef as de, toRefs as me, computed as pe, watch as F, shallowReactive as ve, provide as Se, inject as Oe, onUnmounted as ge, createRenderer as ke, defineComponent as he, onMounted as je, h as k } from "vue";
+import * as we from "three";
+import { MathUtils as De, PerspectiveCamera as $, OrthographicCamera as Ie, Clock as be, Color as N, sRGBEncoding as Be, ACESFilmicToneMapping as ze, PCFSoftShadowMap as Ge, PCFShadowMap as Ve, LinearEncoding as ne, NoToneMapping as re, WebGLRenderer as Fe, LoadingManager as We, TextureLoader as He, Raycaster as Ue, Vector2 as Ye, BufferAttribute as $e } from "three";
+import { createEventHook as J, useRafFn as Ne, toValue as l, useWindowSize as qe, useElementSize as Ke, useDevicePixelRatio as Je, unrefElement as q, useEventListener as Xe } from "@vueuse/core";
+const ye = R({ uuid: De.generateUUID() }), Me = (e) => void Object.assign(ye.value, e);
 var Qe = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Qe || {});
 const Ze = 45;
 let _;
-function N() {
-  const { state: e, setState: t, aspectRatio: o } = D();
-  function a(i = "Perspective", c) {
+function xe() {
+  const { state: e, setState: t, aspectRatio: o } = S();
+  function a(i = "Perspective", s) {
     var u, f, m;
     if (i === "Perspective") {
-      const { near: d, far: C, fov: g } = c || {
+      const { near: v, far: h, fov: M } = s || {
         near: 0.1,
         far: 1e3,
         fov: Ze
       };
-      _ = new F(g, ((u = e.aspectRatio) == null ? void 0 : u.value) || window.innerWidth / window.innerHeight, d, C), (f = e.cameras) == null || f.push(_);
+      _ = new $(M, ((u = e.aspectRatio) == null ? void 0 : u.value) || window.innerWidth / window.innerHeight, v, h), (f = e.cameras) == null || f.push(_);
     } else {
-      const { left: d, right: C, top: g, bottom: P, near: w, far: p } = c || {
+      const { left: v, right: h, top: M, bottom: w, near: P, far: x } = s || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,71 +33,71 @@ function N() {
         near: 0.1,
         far: 1e3
       };
-      _ = new Ie(d, C, g, P, w, p), (m = e.cameras) == null || m.push(_);
+      _ = new Ie(v, h, M, w, P, x), (m = e.cameras) == null || m.push(_);
     }
     return e.camera = _, t("camera", e.camera), _;
   }
   function n() {
     var i;
-    e.camera instanceof F && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (i = e.camera) == null || i.updateProjectionMatrix();
+    e.camera instanceof $ && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (i = e.camera) == null || i.updateProjectionMatrix();
   }
   function r(i) {
-    var c;
-    (c = e.cameras) == null || c.push(i), i instanceof F && e.aspectRatio && (i.aspect = e.aspectRatio.value), i.updateProjectionMatrix(), t("camera", i);
+    var s;
+    (s = e.cameras) == null || s.push(i), i instanceof $ && e.aspectRatio && (i.aspect = e.aspectRatio.value), i.updateProjectionMatrix(), t("camera", i);
   }
-  function s() {
+  function c() {
     e.cameras = [];
   }
-  return ce(() => {
+  return le(() => {
     o != null && o.value && n();
   }), {
     activeCamera: _e(e, "camera"),
     createCamera: a,
     updateCamera: n,
     pushCamera: r,
-    clearCameras: s
+    clearCameras: c
   };
 }
-const be = q(), ye = q(), K = q(), j = new ge();
-let G = 0, V = 0;
+const Ee = J(), Ce = J(), X = J(), j = new be();
+let W = 0, H = 0;
 const { pause: et, resume: tt, isActive: at } = Ne(
   () => {
-    be.trigger({ delta: G, elapsed: V, clock: j }), ye.trigger({ delta: G, elapsed: V, clock: j }), K.trigger({ delta: G, elapsed: V, clock: j });
+    Ee.trigger({ delta: W, elapsed: H, clock: j }), Ce.trigger({ delta: W, elapsed: H, clock: j }), X.trigger({ delta: W, elapsed: H, clock: j });
   },
   { immediate: !1 }
 );
-K.on(() => {
-  G = j.getDelta(), V = j.getElapsedTime();
+X.on(() => {
+  W = j.getDelta(), H = j.getElapsedTime();
 });
-function Me() {
+function Re() {
   return {
-    onBeforeLoop: be.on,
-    onLoop: ye.on,
-    onAfterLoop: K.on,
+    onBeforeLoop: Ee.on,
+    onLoop: Ce.on,
+    onAfterLoop: X.on,
     pause: et,
     resume: tt,
     isActive: at
   };
 }
 function nt(e) {
-  return e instanceof H ? e : Array.isArray(e) ? new H(...e) : new H(e);
+  return e instanceof N ? e : Array.isArray(e) ? new N(...e) : new N(e);
 }
-const $ = {
+const K = {
   realistic: {
     outputEncoding: Be,
     toneMapping: ze,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: Fe
+      type: Ge
     }
   }
-}, xe = (e, t) => {
+}, Pe = (e, t) => {
   for (const o of Object.keys(t))
-    t[o] instanceof Object && Object.assign(t[o], xe(e[o], t[o]));
+    t[o] instanceof Object && Object.assign(t[o], Pe(e[o], t[o]));
   return Object.assign(e || {}, t), e;
 }, rt = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot", ot = /* @__PURE__ */ it(rt);
-function z(e) {
+function V(e) {
   return e.replace(/-([a-z])/g, (t, o) => o.toUpperCase());
 }
 function it(e, t) {
@@ -107,123 +107,122 @@ function it(e, t) {
   return t ? (n) => !!o[n.toLowerCase()] : (n) => !!o[n];
 }
 function st(e) {
-  var Z, ee;
-  const t = ue(), o = S(!1), {
+  var te, ae;
+  const t = de(), o = R(!1), {
     alpha: a = !0,
     antialias: n = !0,
     depth: r,
-    logarithmicDepthBuffer: s,
+    logarithmicDepthBuffer: c,
     failIfMajorPerformanceCaveat: i,
-    precision: c,
+    precision: s,
     premultipliedAlpha: u,
     stencil: f,
     shadows: m = !1,
-    shadowMapType: d = Ge,
-    physicallyCorrectLights: C = !1,
-    useLegacyLights: g = !1,
-    outputEncoding: P = te,
-    toneMapping: w = ae,
-    toneMappingExposure: p = 1,
+    shadowMapType: v = Ve,
+    useLegacyLights: h = !1,
+    outputEncoding: M = ne,
+    toneMapping: w = re,
+    toneMappingExposure: P = 1,
     context: x = void 0,
-    powerPreference: b = "default",
-    preserveDrawingBuffer: y = !1,
-    clearColor: M,
-    windowSize: E = !1,
-    preset: L = void 0
-  } = fe(e), { state: h, setState: T } = D(), { width: R, height: O } = l(E) == !0 || l(E) === "" || l(E) === "true" ? qe() : Ke(h.container), { logError: B, logWarning: Ce } = I(), { pixelRatio: J } = Je(), { pause: Pe, resume: Le } = Me(), U = le(() => R.value / O.value);
-  !l(E) && ((ee = (Z = h.container) == null ? void 0 : Z.value) == null ? void 0 : ee.offsetHeight) === 0 && Ce(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
+    powerPreference: U = "default",
+    preserveDrawingBuffer: T = !1,
+    clearColor: d,
+    windowSize: b = !1,
+    preset: y = void 0
+  } = me(e), { state: g, setState: L } = S(), { width: O, height: E } = l(b) == !0 || l(b) === "" || l(b) === "true" ? qe() : Ke(g.container), { logError: I, logWarning: B } = D(), { pixelRatio: C } = Je(), { pause: z, resume: G } = Re(), Y = pe(() => O.value / E.value);
+  !l(b) && ((ae = (te = g.container) == null ? void 0 : te.value) == null ? void 0 : ae.offsetHeight) === 0 && B(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
 You could set windowSize=true to force the canvas to be the size of the window.`);
-  const X = () => {
-    t.value && (t.value.setSize(R.value, O.value), t.value.setPixelRatio(Math.min(J.value, 2)));
-  }, Q = () => {
+  const Z = () => {
+    t.value && (t.value.setSize(O.value, E.value), t.value.setPixelRatio(Math.min(C.value, 2)));
+  }, ee = () => {
     if (!t.value)
       return;
-    const A = l(L);
+    const A = l(y);
     if (A) {
-      A in $ || B("Renderer Preset must be one of these: " + Object.keys($).join(", ")), xe(t.value, $[A]);
+      A in K || I("Renderer Preset must be one of these: " + Object.keys(K).join(", ")), Pe(t.value, K[A]);
       return;
     }
-    t.value.shadowMap.enabled = l(m), t.value.shadowMap.type = l(d), t.value.toneMapping = l(w) || ae, t.value.toneMappingExposure = l(p), t.value.outputEncoding = l(P) || te, M != null && M.value && t.value.setClearColor(nt(l(M))), t.value.useLegacyLights = l(g);
-  }, Te = () => {
-    const A = Y(h.canvas);
-    A && (t.value = new Ve({
+    t.value.shadowMap.enabled = l(m), t.value.shadowMap.type = l(v), t.value.toneMapping = l(w) || re, t.value.toneMappingExposure = l(P), t.value.outputEncoding = l(M) || ne, d != null && d.value && t.value.setClearColor(nt(l(d))), t.value.useLegacyLights = l(h);
+  }, Le = () => {
+    const A = q(g.canvas);
+    A && (t.value = new Fe({
       canvas: A,
       alpha: l(a),
       antialias: l(n),
       context: l(x),
       depth: l(r),
       failIfMajorPerformanceCaveat: l(i),
-      logarithmicDepthBuffer: l(s),
-      powerPreference: l(b),
-      precision: l(c),
+      logarithmicDepthBuffer: l(c),
+      powerPreference: l(U),
+      precision: l(s),
       stencil: l(f),
-      preserveDrawingBuffer: l(y),
+      preserveDrawingBuffer: l(T),
       premultipliedAlpha: l(u)
-    }), T("renderer", t.value), T("clock", new ge()), T("aspectRatio", U), Q(), X(), Le(), o.value = !0);
+    }), L("renderer", t.value), L("clock", new be()), L("aspectRatio", Y), ee(), Z(), G(), o.value = !0);
   }, Ae = () => {
-    t.value && (t.value.dispose(), t.value = void 0, o.value = !1, Pe());
+    t.value && (t.value.dispose(), t.value = void 0, o.value = !1, z());
   };
-  return W([U, J], X), W(
-    [m, d, P, g, w, p, M],
-    Q
-  ), W(
-    () => [h.canvas, h.container],
+  return F([Y, C], Z), F(
+    [m, v, M, h, w, P, d],
+    ee
+  ), F(
+    () => [g.canvas, g.container],
     () => {
-      Y(h.canvas) && Y(h.container) && Te();
+      q(g.canvas) && q(g.container) && Le();
     },
     { immediate: !0, deep: !0 }
   ), {
     renderer: t,
     isReady: o,
     dispose: Ae,
-    aspectRatio: U
+    aspectRatio: Y
   };
 }
-const Ee = (e) => !!e && e.constructor === Array;
-function ct(e) {
+const oe = (e) => typeof e == "function", ct = (e) => typeof e == "string", Te = (e) => !!e && e.constructor === Array;
+function ut(e) {
   const t = { nodes: {}, materials: {} };
   return e && e.traverse((o) => {
     o.name && (t.nodes[o.name] = o), o.material && !t.materials[o.material.name] && (t.materials[o.material.name] = o.material);
   }), t;
 }
 async function Et(e, t, o, a, n) {
-  const { logError: r } = I(), s = new e();
-  n && n(s), o && o(s);
-  const c = (Array.isArray(t) ? t : [t]).map(
+  const { logError: r } = D(), c = new e();
+  n && n(c), o && o(c);
+  const s = (Array.isArray(t) ? t : [t]).map(
     (u) => new Promise((f, m) => {
-      s.load(
+      c.load(
         u,
-        (d) => {
-          d.scene && Object.assign(d, ct(d.scene)), f(d);
+        (v) => {
+          v.scene && Object.assign(v, ut(v.scene)), f(v);
         },
         a,
-        (d) => m(r("[useLoader] - Failed to load resource", d))
+        (v) => m(r("[useLoader] - Failed to load resource", v))
       );
     })
   );
-  return Ee(t) ? await Promise.all(c) : await c[0];
+  return Te(t) ? await Promise.all(s) : await s[0];
 }
-async function Rt(e) {
-  const t = new Ue(), o = new We(t), a = (n) => new Promise((r, s) => {
+async function Ct(e) {
+  const t = new We(), o = new He(t), a = (n) => new Promise((r, c) => {
     o.load(
       n,
       (i) => r(i),
       () => null,
       () => {
-        s(new Error("[useTextures] - Failed to load texture"));
+        c(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (Ee(e)) {
+  if (Te(e)) {
     const n = await Promise.all(e.map((r) => a(r)));
     return e.length > 1 ? n : n[0];
   } else {
     const {
       map: n,
       displacementMap: r,
-      normalMap: s,
+      normalMap: c,
       roughnessMap: i,
-      metalnessMap: c,
+      metalnessMap: s,
       aoMap: u,
       alphaMap: f,
       matcap: m
@@ -231,29 +230,29 @@ async function Rt(e) {
     return {
       map: n ? await a(n) : null,
       displacementMap: r ? await a(r) : null,
-      normalMap: s ? await a(s) : null,
+      normalMap: c ? await a(c) : null,
       roughnessMap: i ? await a(i) : null,
-      metalnessMap: c ? await a(c) : null,
+      metalnessMap: s ? await a(s) : null,
       aoMap: u ? await a(u) : null,
       alphaMap: f ? await a(f) : null,
       matcap: m ? await a(m) : null
     };
   }
 }
-const v = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0e", "0f", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1a", "1b", "1c", "1d", "1e", "1f", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2a", "2b", "2c", "2d", "2e", "2f", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3a", "3b", "3c", "3d", "3e", "3f", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4a", "4b", "4c", "4d", "4e", "4f", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5a", "5b", "5c", "5d", "5e", "5f", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6a", "6b", "6c", "6d", "6e", "6f", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7a", "7b", "7c", "7d", "7e", "7f", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8a", "8b", "8c", "8d", "8e", "8f", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9a", "9b", "9c", "9d", "9e", "9f", "a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "aa", "ab", "ac", "ad", "ae", "af", "b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "ba", "bb", "bc", "bd", "be", "bf", "c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "ca", "cb", "cc", "cd", "ce", "cf", "d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9", "da", "db", "dc", "dd", "de", "df", "e0", "e1", "e2", "e3", "e4", "e5", "e6", "e7", "e8", "e9", "ea", "eb", "ec", "ed", "ee", "ef", "f0", "f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "fa", "fb", "fc", "fd", "fe", "ff"];
-function ut() {
+const p = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0e", "0f", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1a", "1b", "1c", "1d", "1e", "1f", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2a", "2b", "2c", "2d", "2e", "2f", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3a", "3b", "3c", "3d", "3e", "3f", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4a", "4b", "4c", "4d", "4e", "4f", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5a", "5b", "5c", "5d", "5e", "5f", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6a", "6b", "6c", "6d", "6e", "6f", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7a", "7b", "7c", "7d", "7e", "7f", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8a", "8b", "8c", "8d", "8e", "8f", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9a", "9b", "9c", "9d", "9e", "9f", "a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "aa", "ab", "ac", "ad", "ae", "af", "b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "ba", "bb", "bc", "bd", "be", "bf", "c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "ca", "cb", "cc", "cd", "ce", "cf", "d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9", "da", "db", "dc", "dd", "de", "df", "e0", "e1", "e2", "e3", "e4", "e5", "e6", "e7", "e8", "e9", "ea", "eb", "ec", "ed", "ee", "ef", "f0", "f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "fa", "fb", "fc", "fd", "fe", "ff"];
+function ft() {
   const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, o = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0;
-  return (v[e & 255] + v[e >> 8 & 255] + v[e >> 16 & 255] + v[e >> 24 & 255] + "-" + v[t & 255] + v[t >> 8 & 255] + "-" + v[t >> 16 & 15 | 64] + v[t >> 24 & 255] + "-" + v[o & 63 | 128] + v[o >> 8 & 255] + "-" + v[o >> 16 & 255] + v[o >> 24 & 255] + v[a & 255] + v[a >> 8 & 255] + v[a >> 16 & 255] + v[a >> 24 & 255]).toLowerCase();
+  return (p[e & 255] + p[e >> 8 & 255] + p[e >> 16 & 255] + p[e >> 24 & 255] + "-" + p[t & 255] + p[t >> 8 & 255] + "-" + p[t >> 16 & 15 | 64] + p[t >> 24 & 255] + "-" + p[o & 63 | 128] + p[o >> 8 & 255] + "-" + p[o >> 16 & 255] + p[o >> 24 & 255] + p[a & 255] + p[a >> 8 & 255] + p[a >> 16 & 255] + p[a >> 24 & 255]).toLowerCase();
 }
-const Re = Symbol();
-function ft() {
-  const e = de({
-    uuid: ut(),
+const Q = Symbol();
+function lt() {
+  const e = ve({
+    uuid: ft(),
     camera: void 0,
     cameras: [],
     scene: void 0,
     renderer: void 0,
-    aspectRatio: le(() => window.innerWidth / window.innerHeight)
+    aspectRatio: pe(() => window.innerWidth / window.innerHeight)
   });
   function t(n) {
     return e[n];
@@ -263,28 +262,28 @@ function ft() {
   }
   const a = {
     state: e,
-    ...fe(e),
+    ...me(e),
     getState: t,
     setState: o
   };
-  return Se(Re, a), a;
+  return Se(Q, a), a;
 }
-const D = () => Oe(Re, {
-  state: de({
+const S = () => Oe(Q, {
+  state: ve({
     camera: void 0,
     cameras: [],
     scene: void 0,
     renderer: void 0
   })
 });
-function lt() {
-  var s;
-  const e = ue(new He()), t = S(new Ye()), o = S(null), { setState: a, state: n } = D();
+function dt() {
+  var c;
+  const e = de(new Ue()), t = R(new Ye()), o = R(null), { setState: a, state: n } = S();
   a("raycaster", e.value), a("pointer", t), a("currentInstance", o);
   function r(i) {
     t.value.x = i.clientX / window.innerWidth * 2 - 1, t.value.y = -(i.clientY / window.innerHeight) * 2 + 1;
   }
-  return (s = n == null ? void 0 : n.renderer) == null || s.domElement.addEventListener("pointermove", r), pe(() => {
+  return (c = n == null ? void 0 : n.renderer) == null || c.domElement.addEventListener("pointermove", r), ge(() => {
     var i;
     (i = n == null ? void 0 : n.renderer) == null || i.domElement.removeEventListener("pointermove", r);
   }), {
@@ -292,13 +291,13 @@ function lt() {
     pointer: t
   };
 }
-const Ct = !0, re = "[TresJS ▲ ■ ●] ";
-function I() {
+const Rt = !0, ie = "[TresJS ▲ ■ ●] ";
+function D() {
   function e(a, n) {
-    console.error(`${re} ${a}`, n || "");
+    console.error(`${ie} ${a}`, n || "");
   }
   function t(a) {
-    console.warn(`${re} ${a}`);
+    console.warn(`${ie} ${a}`);
   }
   function o(a, n) {
   }
@@ -309,12 +308,12 @@ function I() {
   };
 }
 function Pt() {
-  const { logWarning: e } = I();
+  const { logWarning: e } = D();
   function t(a, n, r) {
-    let s = null;
+    let c = null;
     return a.traverse((i) => {
-      i[n] === r && (s = i);
-    }), s || e(`Child with ${n} '${r}' not found.`), s;
+      i[n] === r && (c = i);
+    }), c || e(`Child with ${n} '${r}' not found.`), c;
   }
   function o(a, n) {
     return t(a, "name", n);
@@ -324,50 +323,50 @@ function Pt() {
     seekByName: o
   };
 }
-const dt = /^on[^a-z]/, pt = (e) => dt.test(e);
-let oe = null;
-const ie = {
+const mt = /^on[^a-z]/, pt = (e) => mt.test(e);
+let se = null;
+const ce = {
   GEOMETRY_VIA_PROP: "tres__geometryViaProp",
   MATERIAL_VIA_PROP: "tres__materialViaProp"
-}, { logError: se } = I(), mt = {
+}, { logError: ue } = D(), vt = {
   createElement(e, t, o, a) {
-    var c, u;
+    var s, u;
     if (a || (a = {}), a.args || (a.args = []), e === "template" || ot(e))
       return null;
     let n = e.replace("Tres", ""), r;
     if (e === "primitive") {
-      (a == null ? void 0 : a.object) === void 0 && se("Tres primitives need a prop 'object'");
+      (a == null ? void 0 : a.object) === void 0 && ue("Tres primitives need a prop 'object'");
       const f = a.object;
       n = f.type, r = Object.assign(f, { type: n, attach: a.attach, primitive: !0 });
     } else {
-      const f = he.value[n];
-      f || se(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`), r = new f(...a.args);
+      const f = ye.value[n];
+      f || ue(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`), r = new f(...a.args);
     }
     if (r.isCamera) {
       a != null && a.position || r.position.set(3, 3, 3), a != null && a.lookAt || r.lookAt(0, 0, 0);
-      const { pushCamera: f } = N();
+      const { pushCamera: f } = xe();
       f(r);
     }
     (a == null ? void 0 : a.attach) === void 0 && (r.isMaterial ? r.attach = "material" : r.isBufferGeometry && (r.attach = "geometry"));
-    const { GEOMETRY_VIA_PROP: s, MATERIAL_VIA_PROP: i } = ie;
-    return r.isObject3D && ((c = a == null ? void 0 : a.material) != null && c.isMaterial && (r.userData[i] = !0), (u = a == null ? void 0 : a.geometry) != null && u.isBufferGeometry && (r.userData[s] = !0)), r.events = {}, r;
+    const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } = ce;
+    return r.isObject3D && ((s = a == null ? void 0 : a.material) != null && s.isMaterial && (r.userData[i] = !0), (u = a == null ? void 0 : a.geometry) != null && u.isBufferGeometry && (r.userData[c] = !0)), r.events = {}, r;
   },
   insert(e, t) {
-    var o, a;
-    if (((e == null ? void 0 : e.__vnode.type) === "TresGroup" || (e == null ? void 0 : e.__vnode.type) === "TresObject3D") && t === null && !((a = (o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.ctx) != null && a.asyncResolved)) {
-      oe = e;
+    var o, a, n, r;
+    if ((((o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.type) === "TresGroup" || ((a = e == null ? void 0 : e.__vnode) == null ? void 0 : a.type) === "TresObject3D") && t === null && !((r = (n = e == null ? void 0 : e.__vnode) == null ? void 0 : n.ctx) != null && r.asyncResolved)) {
+      se = e;
       return;
     }
-    t || (t = oe), e != null && e.isObject3D && (t != null && t.isObject3D) ? (t.add(e), e.dispatchEvent({ type: "added" })) : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[t == null ? void 0 : t.attach], t && (t[e.attach] = e));
+    t || (t = se), e != null && e.isObject3D && (t != null && t.isObject3D) ? (t.add(e), e.dispatchEvent({ type: "added" })) : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[t == null ? void 0 : t.attach], t && (t[e.attach] = e));
   },
   remove(e) {
     var t, o;
     if (e) {
       if (e.isObject3D) {
         const a = e, n = (r) => {
-          var c, u;
-          const { GEOMETRY_VIA_PROP: s, MATERIAL_VIA_PROP: i } = ie;
-          r.userData[i] || (c = r.material) == null || c.dispose(), r.userData[s] || (u = r.geometry) == null || u.dispose();
+          var s, u;
+          const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: i } = ce;
+          r.userData[i] || (s = r.material) == null || s.dispose(), r.userData[c] || (u = r.geometry) == null || u.dispose();
         };
         a.traverse((r) => n(r)), n(a);
       }
@@ -376,25 +375,27 @@ const ie = {
   },
   patchProp(e, t, o, a) {
     if (e) {
-      let n = e, r = t, s = z(r), i = n == null ? void 0 : n[s];
+      let n = e, r = t, c = V(r), i = n == null ? void 0 : n[c];
       if (n.type === "BufferGeometry") {
+        if (r === "args")
+          return;
         n.setAttribute(
-          z(r),
+          V(r),
           new $e(...a)
         );
         return;
       }
       if (r.includes("-") && i === void 0) {
         const u = r.split("-");
-        i = u.reduce((f, m) => f[z(m)], n), r = u.pop(), s = r.toLowerCase(), i != null && i.set || (n = u.reduce((f, m) => f[z(m)], n));
+        i = u.reduce((f, m) => f[V(m)], n), r = u.pop(), c = r.toLowerCase(), i != null && i.set || (n = u.reduce((f, m) => f[V(m)], n));
       }
       pt(r) && (e.events[r] = a);
-      let c = a;
-      if (c === "" && (c = !0), ne(i)) {
-        Array.isArray(c) ? e[s](...c) : e[s](c);
+      let s = a;
+      if (s === "" && (s = !0), oe(i)) {
+        Array.isArray(s) ? e[c](...s) : e[c](s);
         return;
       }
-      !(i != null && i.set) && !ne(i) ? n[s] = c : i.constructor === c.constructor && (i != null && i.copy) ? i == null || i.copy(c) : Array.isArray(c) ? i.set(...c) : !i.isColor && i.setScalar ? i.setScalar(c) : i.set(c);
+      !(i != null && i.set) && !oe(i) ? n[c] = s : i.constructor === s.constructor && (i != null && i.copy) ? i == null || i.copy(s) : Array.isArray(s) ? i.set(...s) : !i.isColor && i.setScalar ? i.setScalar(s) : i.set(s);
     }
   },
   parentNode(e) {
@@ -409,15 +410,15 @@ const ie = {
   setScopeId: () => void 0,
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
-}, { createApp: vt } = ke(mt), gt = (e) => {
-  const t = vt(o);
+}, { createApp: gt } = ke(vt), ht = (e) => {
+  const t = gt(o);
   function o() {
     return e && e.default ? e.default() : [];
   }
   return t;
 };
-we(ve);
-const { logWarning: ht } = I(), wt = me({
+Me(we);
+const { logWarning: fe } = D(), wt = he({
   name: "TresScene",
   props: [
     "shadows",
@@ -433,41 +434,50 @@ const { logWarning: ht } = I(), wt = me({
     "clearColor",
     "windowSize",
     "preset",
-    "disableRender"
+    "disableRender",
+    "camera"
   ],
   setup(e, { slots: t, expose: o }) {
-    e.physicallyCorrectLights === !0 && ht("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const a = S(), n = S(), r = new ve.Scene(), { setState: s } = D();
-    s("scene", r), s("canvas", n), s("container", a);
-    const { pushCamera: i } = N();
-    i(new F()), je(() => {
-      c();
-    }), pe(() => {
-      s("renderer", null);
+    e.physicallyCorrectLights === !0 && fe("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
+    const a = R(), n = R(), r = new we.Scene(), { setState: c } = S();
+    c("scene", r), c("canvas", n), c("container", a);
+    const i = R(), s = t && t.default && t.default();
+    s && (s == null ? void 0 : s.length) > 0 && (i.value = s.some((w) => ct(w.type) && w.type.includes("Camera")) || e.camera, i.value || fe("No camera found in the scene, please add one!")), je(() => {
+      v();
+    }), ge(() => {
+      c("renderer", null);
     });
-    function c() {
-      const { renderer: m } = st(e), { activeCamera: d } = N(), { onLoop: C } = Me(), { raycaster: g, pointer: P } = lt();
-      let w = null, p = null;
-      ce(() => {
-        d.value && g.value.setFromCamera(P.value, d.value);
-      }), C(() => {
-        var x, b, y, M, E, L, h, T, R, O;
-        if (d.value && e.disableRender === !0 && ((x = m.value) == null || x.render(r, d.value)), g.value) {
-          const B = g.value.intersectObjects(r.children);
-          B.length > 0 ? (p = B[0], w === null && ((M = (y = (b = p.object) == null ? void 0 : b.events) == null ? void 0 : y.onPointerEnter) == null || M.call(y, p)), (h = (L = (E = p.object) == null ? void 0 : E.events) == null ? void 0 : L.onPointerMove) == null || h.call(L, p)) : w !== null && ((O = (R = (T = p == null ? void 0 : p.object) == null ? void 0 : T.events) == null ? void 0 : R.onPointerLeave) == null || O.call(R, w), p = null), w = p;
+    const { activeCamera: u, pushCamera: f, clearCameras: m } = xe();
+    function v() {
+      const { renderer: w } = st(e);
+      e.camera && f(e.camera);
+      const { onLoop: P } = Re(), { raycaster: x, pointer: U } = dt();
+      let T = null, d = null;
+      le(() => {
+        u.value && x.value.setFromCamera(U.value, u.value);
+      }), P(() => {
+        var b, y, g, L, O, E, I, B, C, z;
+        if (u.value && e.disableRender !== !0 && e.disableRender !== "" && ((b = w.value) == null || b.render(r, u.value)), x.value) {
+          const G = x.value.intersectObjects(r.children);
+          G.length > 0 ? (d = G[0], T === null && ((L = (g = (y = d.object) == null ? void 0 : y.events) == null ? void 0 : g.onPointerEnter) == null || L.call(g, d)), (I = (E = (O = d.object) == null ? void 0 : O.events) == null ? void 0 : E.onPointerMove) == null || I.call(E, d)) : T !== null && ((z = (C = (B = d == null ? void 0 : d.object) == null ? void 0 : B.events) == null ? void 0 : C.onPointerLeave) == null || z.call(C, T), d = null), T = d;
         }
       }), Xe(n.value, "click", () => {
-        var x, b, y;
-        p !== null && ((y = (b = (x = p.object) == null ? void 0 : x.events) == null ? void 0 : b.onClick) == null || y.call(b, p));
+        var b, y, g;
+        d !== null && ((g = (y = (b = d.object) == null ? void 0 : b.events) == null ? void 0 : y.onClick) == null || g.call(y, d));
       });
     }
-    let u;
-    function f() {
-      u = gt(t), u.provide("useTres", D()), u.provide("extend", we), u.mount(r);
+    let h;
+    function M() {
+      h = ht(t), h.provide("useTres", S()), h.provide(Q, S()), h.provide("extend", Me), h.mount(r);
     }
-    return f(), o({
+    return M(), o({
       scene: r
-    }), () => k(
+    }), F(
+      () => e.camera,
+      (w) => {
+        w && (m(), f(w));
+      }
+    ), () => k(
       k(
         "div",
         {
@@ -510,7 +520,7 @@ const { logWarning: ht } = I(), wt = me({
       )
     );
   }
-}), bt = me({
+}), bt = he({
   name: "TresCanvas",
   props: [
     "shadows",
@@ -526,33 +536,35 @@ const { logWarning: ht } = I(), wt = me({
     "clearColor",
     "windowSize",
     "preset",
-    "disableRender"
+    "disableRender",
+    "camera"
   ],
   setup(e, { slots: t, expose: o }) {
-    const a = ft();
+    const a = lt();
     return o(a), () => k(wt, e, t);
   }
-}), Lt = {
+}), Tt = {
   install(e) {
     e.component("TresCanvas", bt);
   }
 };
 export {
   Qe as CameraType,
+  Q as TRES_CONTEXT_KEY,
   bt as TresCanvas,
-  he as catalogue,
-  Lt as default,
-  we as extend,
-  Ct as isProd,
-  ct as trasverseObjects,
-  N as useCamera,
+  ye as catalogue,
+  Tt as default,
+  Me as extend,
+  Rt as isProd,
+  ut as trasverseObjects,
+  xe as useCamera,
   Et as useLoader,
-  I as useLogger,
-  lt as useRaycaster,
-  Me as useRenderLoop,
+  D as useLogger,
+  dt as useRaycaster,
+  Re as useRenderLoop,
   st as useRenderer,
   Pt as useSeek,
-  Rt as useTexture,
-  D as useTres,
-  ft as useTresProvider
+  Ct as useTexture,
+  S as useTres,
+  lt as useTresProvider
 };

package/dist/tres.umd.cjs

@@ -1,9 +1,9 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-beta.8
+ * version: v2.0.0-rc.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(d,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],s):(d=typeof globalThis<"u"?globalThis:d||self,s(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,s,u,c){"use strict";function ge(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const J=ge(u),W=s.ref({uuid:u.MathUtils.generateUUID()}),N=e=>void Object.assign(W.value,e);var X=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(X||{});const he=45;let O;function z(){const{state:e,setState:t,aspectRatio:r}=A();function n(i="Perspective",l){var m,p,w;if(i==="Perspective"){const{near:v,far:k,fov:b}=l||{near:.1,far:1e3,fov:he};O=new u.PerspectiveCamera(b,((m=e.aspectRatio)==null?void 0:m.value)||window.innerWidth/window.innerHeight,v,k),(p=e.cameras)==null||p.push(O)}else{const{left:v,right:k,top:b,bottom:T,near:M,far:g}=l||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};O=new u.OrthographicCamera(v,k,b,T,M,g),(w=e.cameras)==null||w.push(O)}return e.camera=O,t("camera",e.camera),O}function a(){var i;e.camera instanceof u.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(i=e.camera)==null||i.updateProjectionMatrix()}function o(i){var l;(l=e.cameras)==null||l.push(i),i instanceof u.PerspectiveCamera&&e.aspectRatio&&(i.aspect=e.aspectRatio.value),i.updateProjectionMatrix(),t("camera",i)}function f(){e.cameras=[]}return s.watchEffect(()=>{r!=null&&r.value&&a()}),{activeCamera:s.toRef(e,"camera"),createCamera:n,updateCamera:a,pushCamera:o,clearCameras:f}}const Q=c.createEventHook(),Z=c.createEventHook(),Y=c.createEventHook(),I=new u.Clock;let F=0,G=0;const{pause:we,resume:be,isActive:ye}=c.useRafFn(()=>{Q.trigger({delta:F,elapsed:G,clock:I}),Z.trigger({delta:F,elapsed:G,clock:I}),Y.trigger({delta:F,elapsed:G,clock:I})},{immediate:!1});Y.on(()=>{F=I.getDelta(),G=I.getElapsedTime()});function $(){return{onBeforeLoop:Q.on,onLoop:Z.on,onAfterLoop:Y.on,pause:we,resume:be,isActive:ye}}function Me(e){return e instanceof u.Color?e:Array.isArray(e)?new u.Color(...e):new u.Color(e)}const q={realistic:{outputEncoding:u.sRGBEncoding,toneMapping:u.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:u.PCFSoftShadowMap}}},H=(e,t)=>{for(const r of Object.keys(t))t[r]instanceof Object&&Object.assign(t[r],H(e[r],t[r]));return Object.assign(e||{},t),e},Ce=Pe("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot");function V(e){return e.replace(/-([a-z])/g,(t,r)=>r.toUpperCase())}function Pe(e,t){const r=Object.create(null),n=e.split(",");for(let a=0;a<n.length;a++)r[n[a]]=!0;return t?a=>!!r[a.toLowerCase()]:a=>!!r[a]}function ee(e){var pe,ve;const t=s.shallowRef(),r=s.ref(!1),{alpha:n=!0,antialias:a=!0,depth:o,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:i,precision:l,premultipliedAlpha:m,stencil:p,shadows:w=!1,shadowMapType:v=u.PCFShadowMap,physicallyCorrectLights:k=!1,useLegacyLights:b=!1,outputEncoding:T=u.LinearEncoding,toneMapping:M=u.NoToneMapping,toneMappingExposure:g=1,context:_=void 0,powerPreference:C="default",preserveDrawingBuffer:P=!1,clearColor:L,windowSize:S=!1,preset:R=void 0}=s.toRefs(e),{state:y,setState:j}=A(),{width:x,height:B}=c.resolveUnref(S)==!0||c.resolveUnref(S)===""||c.resolveUnref(S)==="true"?c.useWindowSize():c.useElementSize(y.container),{logError:E,logWarning:Be}=U(),{pixelRatio:ue}=c.useDevicePixelRatio(),{pause:ze,resume:Fe}=$(),K=s.computed(()=>x.value/B.value);!c.resolveUnref(S)&&((ve=(pe=y.container)==null?void 0:pe.value)==null?void 0:ve.offsetHeight)===0&&Be(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
-You could set windowSize=true to force the canvas to be the size of the window.`);const de=()=>{t.value&&(t.value.setSize(x.value,B.value),t.value.setPixelRatio(Math.min(ue.value,2)))},me=()=>{if(!t.value)return;const D=c.resolveUnref(R);if(D){D in q||E("Renderer Preset must be one of these: "+Object.keys(q).join(", ")),H(t.value,q[D]);return}t.value.shadowMap.enabled=c.resolveUnref(w),t.value.shadowMap.type=c.resolveUnref(v),t.value.toneMapping=c.resolveUnref(M)||u.NoToneMapping,t.value.toneMappingExposure=c.resolveUnref(g),t.value.outputEncoding=c.resolveUnref(T)||u.LinearEncoding,L!=null&&L.value&&t.value.setClearColor(Me(c.resolveUnref(L))),t.value.useLegacyLights=c.resolveUnref(b)},Ge=()=>{const D=c.unrefElement(y.canvas);D&&(t.value=new u.WebGLRenderer({canvas:D,alpha:c.resolveUnref(n),antialias:c.resolveUnref(a),context:c.resolveUnref(_),depth:c.resolveUnref(o),failIfMajorPerformanceCaveat:c.resolveUnref(i),logarithmicDepthBuffer:c.resolveUnref(f),powerPreference:c.resolveUnref(C),precision:c.resolveUnref(l),stencil:c.resolveUnref(p),preserveDrawingBuffer:c.resolveUnref(P),premultipliedAlpha:c.resolveUnref(m)}),j("renderer",t.value),j("clock",new u.Clock),j("aspectRatio",K),me(),de(),Fe(),r.value=!0)},Ve=()=>{t.value&&(t.value.dispose(),t.value=void 0,r.value=!1,ze())};return s.watch([K,ue],de),s.watch([w,v,T,b,M,g,L],me),s.watch(()=>[y.canvas,y.container],()=>{c.unrefElement(y.canvas)&&c.unrefElement(y.container)&&Ge()},{immediate:!0,deep:!0}),{renderer:t,isReady:r,dispose:Ve,aspectRatio:K}}const te=e=>!!e&&e.constructor===Array;function ne(e){const t={nodes:{},materials:{}};return e&&e.traverse(r=>{r.name&&(t.nodes[r.name]=r),r.material&&!t.materials[r.material.name]&&(t.materials[r.material.name]=r.material)}),t}async function Le(e,t,r,n,a){const{logError:o}=U(),f=new e;a&&a(f),r&&r(f);const l=(Array.isArray(t)?t:[t]).map(m=>new Promise((p,w)=>{f.load(m,v=>{v.scene&&Object.assign(v,ne(v.scene)),p(v)},n,v=>w(o("[useLoader] - Failed to load resource",v)))}));return te(t)?await Promise.all(l):await l[0]}async function _e(e){const t=new u.LoadingManager,r=new u.TextureLoader(t),n=a=>new Promise((o,f)=>{r.load(a,i=>o(i),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(te(e)){const a=await Promise.all(e.map(o=>n(o)));return e.length>1?a:a[0]}else{const{map:a,displacementMap:o,normalMap:f,roughnessMap:i,metalnessMap:l,aoMap:m,alphaMap:p,matcap:w}=e;return{map:a?await n(a):null,displacementMap:o?await n(o):null,normalMap:f?await n(f):null,roughnessMap:i?await n(i):null,metalnessMap:l?await n(l):null,aoMap:m?await n(m):null,alphaMap:p?await n(p):null,matcap:w?await n(w):null}}}const h=["00","01","02","03","04","05","06","07","08","09","0a","0b","0c","0d","0e","0f","10","11","12","13","14","15","16","17","18","19","1a","1b","1c","1d","1e","1f","20","21","22","23","24","25","26","27","28","29","2a","2b","2c","2d","2e","2f","30","31","32","33","34","35","36","37","38","39","3a","3b","3c","3d","3e","3f","40","41","42","43","44","45","46","47","48","49","4a","4b","4c","4d","4e","4f","50","51","52","53","54","55","56","57","58","59","5a","5b","5c","5d","5e","5f","60","61","62","63","64","65","66","67","68","69","6a","6b","6c","6d","6e","6f","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e","8f","90","91","92","93","94","95","96","97","98","99","9a","9b","9c","9d","9e","9f","a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","aa","ab","ac","ad","ae","af","b0","b1","b2","b3","b4","b5","b6","b7","b8","b9","ba","bb","bc","bd","be","bf","c0","c1","c2","c3","c4","c5","c6","c7","c8","c9","ca","cb","cc","cd","ce","cf","d0","d1","d2","d3","d4","d5","d6","d7","d8","d9","da","db","dc","dd","de","df","e0","e1","e2","e3","e4","e5","e6","e7","e8","e9","ea","eb","ec","ed","ee","ef","f0","f1","f2","f3","f4","f5","f6","f7","f8","f9","fa","fb","fc","fd","fe","ff"];function Se(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,r=Math.random()*4294967295|0,n=Math.random()*4294967295|0;return(h[e&255]+h[e>>8&255]+h[e>>16&255]+h[e>>24&255]+"-"+h[t&255]+h[t>>8&255]+"-"+h[t>>16&15|64]+h[t>>24&255]+"-"+h[r&63|128]+h[r>>8&255]+"-"+h[r>>16&255]+h[r>>24&255]+h[n&255]+h[n>>8&255]+h[n>>16&255]+h[n>>24&255]).toLowerCase()}const ae=Symbol();function re(){const e=s.shallowReactive({uuid:Se(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:s.computed(()=>window.innerWidth/window.innerHeight)});function t(a){return e[a]}function r(a,o){e[a]=o}const n={state:e,...s.toRefs(e),getState:t,setState:r};return s.provide(ae,n),n}const A=()=>s.inject(ae,{state:s.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});function oe(){var f;const e=s.shallowRef(new u.Raycaster),t=s.ref(new u.Vector2),r=s.ref(null),{setState:n,state:a}=A();n("raycaster",e.value),n("pointer",t),n("currentInstance",r);function o(i){t.value.x=i.clientX/window.innerWidth*2-1,t.value.y=-(i.clientY/window.innerHeight)*2+1}return(f=a==null?void 0:a.renderer)==null||f.domElement.addEventListener("pointermove",o),s.onUnmounted(()=>{var i;(i=a==null?void 0:a.renderer)==null||i.domElement.removeEventListener("pointermove",o)}),{raycaster:e,pointer:t}}const xe=!0,ie="[TresJS ▲ ■ ●] ";function U(){function e(n,a){console.error(`${ie} ${n}`,a||"")}function t(n){console.warn(`${ie} ${n}`)}function r(n,a){}return{logError:e,logWarning:t,logMessage:r}}function Oe(){const{logWarning:e}=U();function t(n,a,o){let f=null;return n.traverse(i=>{i[a]===o&&(f=i)}),f||e(`Child with ${a} '${o}' not found.`),f}function r(n,a){return t(n,"name",a)}return{seek:t,seekByName:r}}const Ae=/^on[^a-z]/,Ue=e=>Ae.test(e);function We(e){}let se=null;const ce={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp"},{logError:fe}=U(),ke={createElement(e,t,r,n){var l,m;if(n||(n={}),n.args||(n.args=[]),e==="template"||Ce(e))return null;let a=e.replace("Tres",""),o;if(e==="primitive"){(n==null?void 0:n.object)===void 0&&fe("Tres primitives need a prop 'object'");const p=n.object;a=p.type,o=Object.assign(p,{type:a,attach:n.attach,primitive:!0})}else{const p=W.value[a];p||fe(`${a} is not defined on the THREE namespace. Use extend to add it to the catalog.`),o=new p(...n.args)}if(o.isCamera){n!=null&&n.position||o.position.set(3,3,3),n!=null&&n.lookAt||o.lookAt(0,0,0);const{pushCamera:p}=z();p(o)}(n==null?void 0:n.attach)===void 0&&(o.isMaterial?o.attach="material":o.isBufferGeometry&&(o.attach="geometry"));const{GEOMETRY_VIA_PROP:f,MATERIAL_VIA_PROP:i}=ce;return o.isObject3D&&((l=n==null?void 0:n.material)!=null&&l.isMaterial&&(o.userData[i]=!0),(m=n==null?void 0:n.geometry)!=null&&m.isBufferGeometry&&(o.userData[f]=!0)),o.events={},o},insert(e,t){var r,n;if(((e==null?void 0:e.__vnode.type)==="TresGroup"||(e==null?void 0:e.__vnode.type)==="TresObject3D")&&t===null&&!((n=(r=e==null?void 0:e.__vnode)==null?void 0:r.ctx)!=null&&n.asyncResolved)){se=e;return}t||(t=se),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"})):typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e))},remove(e){var t,r;if(e){if(e.isObject3D){const n=e,a=o=>{var l,m;const{GEOMETRY_VIA_PROP:f,MATERIAL_VIA_PROP:i}=ce;o.userData[i]||(l=o.material)==null||l.dispose(),o.userData[f]||(m=o.geometry)==null||m.dispose()};n.traverse(o=>a(o)),a(n)}(t=e.removeFromParent)==null||t.call(e),(r=e.dispose)==null||r.call(e)}},patchProp(e,t,r,n){if(e){let a=e,o=t,f=V(o),i=a==null?void 0:a[f];if(a.type==="BufferGeometry"){a.setAttribute(V(o),new u.BufferAttribute(...n));return}if(o.includes("-")&&i===void 0){const m=o.split("-");i=m.reduce((p,w)=>p[V(w)],a),o=m.pop(),f=o.toLowerCase(),i!=null&&i.set||(a=m.reduce((p,w)=>p[V(w)],a))}Ue(o)&&(e.events[o]=n);let l=n;if(l===""&&(l=!0),c.isFunction(i)){Array.isArray(l)?e[f](...l):e[f](l);return}!(i!=null&&i.set)&&!c.isFunction(i)?a[f]=l:i.constructor===l.constructor&&(i!=null&&i.copy)?i==null||i.copy(l):Array.isArray(l)?i.set(...l):!i.isColor&&i.setScalar?i.setScalar(l):i.set(l)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{createApp:Te}=s.createRenderer(ke),Re=e=>{const t=Te(r);function r(){return e&&e.default?e.default():[]}return t};N(J);const{logWarning:je}=U(),De=s.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender"],setup(e,{slots:t,expose:r}){e.physicallyCorrectLights===!0&&je("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const n=s.ref(),a=s.ref(),o=new J.Scene,{setState:f}=A();f("scene",o),f("canvas",a),f("container",n);const{pushCamera:i}=z();i(new u.PerspectiveCamera),s.onMounted(()=>{l()}),s.onUnmounted(()=>{f("renderer",null)});function l(){const{renderer:w}=ee(e),{activeCamera:v}=z(),{onLoop:k}=$(),{raycaster:b,pointer:T}=oe();let M=null,g=null;s.watchEffect(()=>{v.value&&b.value.setFromCamera(T.value,v.value)}),k(()=>{var _,C,P,L,S,R,y,j,x,B;if(v.value&&e.disableRender===!0&&((_=w.value)==null||_.render(o,v.value)),b.value){const E=b.value.intersectObjects(o.children);E.length>0?(g=E[0],M===null&&((L=(P=(C=g.object)==null?void 0:C.events)==null?void 0:P.onPointerEnter)==null||L.call(P,g)),(y=(R=(S=g.object)==null?void 0:S.events)==null?void 0:R.onPointerMove)==null||y.call(R,g)):M!==null&&((B=(x=(j=g==null?void 0:g.object)==null?void 0:j.events)==null?void 0:x.onPointerLeave)==null||B.call(x,M),g=null),M=g}}),c.useEventListener(a.value,"click",()=>{var _,C,P;g!==null&&((P=(C=(_=g.object)==null?void 0:_.events)==null?void 0:C.onClick)==null||P.call(C,g))})}let m;function p(){m=Re(t),m.provide("useTres",A()),m.provide("extend",N),m.mount(o)}return p(),r({scene:o}),()=>s.h(s.h("div",{ref:n,"data-scene":o.uuid,key:o.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[s.h("div",{style:{width:"100%",height:"100%"}},[s.h("canvas",{ref:a,"data-scene":o.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),le=s.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender"],setup(e,{slots:t,expose:r}){const n=re();return r(n),()=>s.h(De,e,t)}}),Ie={install(e){e.component("TresCanvas",le)}};d.CameraType=X,d.TresCanvas=le,d.catalogue=W,d.default=Ie,d.extend=N,d.isProd=xe,d.trasverseObjects=ne,d.useCamera=z,d.useLoader=Le,d.useLogger=U,d.useRaycaster=oe,d.useRenderLoop=$,d.useRenderer=ee,d.useSeek=Oe,d.useTexture=_e,d.useTres=A,d.useTresProvider=re,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(l,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],s):(l=typeof globalThis<"u"?globalThis:l||self,s(l.tres={},l.Vue,l.Three,l.VueUseCore))})(this,function(l,s,d,u){"use strict";function ye(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const a=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,a.get?a:{enumerable:!0,get:()=>e[i]})}}return t.default=e,Object.freeze(t)}const H=ye(d),Y=s.ref({uuid:d.MathUtils.generateUUID()}),$=e=>void Object.assign(Y.value,e);var ee=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(ee||{});const Me=45;let A;function q(){const{state:e,setState:t,aspectRatio:i}=_();function a(o="Perspective",c){var m,p,h;if(o==="Perspective"){const{near:w,far:y,fov:L}=c||{near:.1,far:1e3,fov:Me};A=new d.PerspectiveCamera(L,((m=e.aspectRatio)==null?void 0:m.value)||window.innerWidth/window.innerHeight,w,y),(p=e.cameras)==null||p.push(A)}else{const{left:w,right:y,top:L,bottom:M,near:V,far:S}=c||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};A=new d.OrthographicCamera(w,y,L,M,V,S),(h=e.cameras)==null||h.push(A)}return e.camera=A,t("camera",e.camera),A}function n(){var o;e.camera instanceof d.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(o=e.camera)==null||o.updateProjectionMatrix()}function r(o){var c;(c=e.cameras)==null||c.push(o),o instanceof d.PerspectiveCamera&&e.aspectRatio&&(o.aspect=e.aspectRatio.value),o.updateProjectionMatrix(),t("camera",o)}function f(){e.cameras=[]}return s.watchEffect(()=>{i!=null&&i.value&&n()}),{activeCamera:s.toRef(e,"camera"),createCamera:a,updateCamera:n,pushCamera:r,clearCameras:f}}const te=u.createEventHook(),ae=u.createEventHook(),K=u.createEventHook(),D=new d.Clock;let E=0,B=0;const{pause:Ce,resume:Pe,isActive:Le}=u.useRafFn(()=>{te.trigger({delta:E,elapsed:B,clock:D}),ae.trigger({delta:E,elapsed:B,clock:D}),K.trigger({delta:E,elapsed:B,clock:D})},{immediate:!1});K.on(()=>{E=D.getDelta(),B=D.getElapsedTime()});function X(){return{onBeforeLoop:te.on,onLoop:ae.on,onAfterLoop:K.on,pause:Ce,resume:Pe,isActive:Le}}function _e(e){return e instanceof d.Color?e:Array.isArray(e)?new d.Color(...e):new d.Color(e)}const J={realistic:{outputEncoding:d.sRGBEncoding,toneMapping:d.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:d.PCFSoftShadowMap}}},ne=(e,t)=>{for(const i of Object.keys(t))t[i]instanceof Object&&Object.assign(t[i],ne(e[i],t[i]));return Object.assign(e||{},t),e},Se=Oe("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot");function z(e){return e.replace(/-([a-z])/g,(t,i)=>i.toUpperCase())}function Oe(e,t){const i=Object.create(null),a=e.split(",");for(let n=0;n<a.length;n++)i[a[n]]=!0;return t?n=>!!i[n.toLowerCase()]:n=>!!i[n]}function re(e){var we,be;const t=s.shallowRef(),i=s.ref(!1),{alpha:a=!0,antialias:n=!0,depth:r,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:o,precision:c,premultipliedAlpha:m,stencil:p,shadows:h=!1,shadowMapType:w=d.PCFShadowMap,useLegacyLights:y=!1,outputEncoding:L=d.LinearEncoding,toneMapping:M=d.NoToneMapping,toneMappingExposure:V=1,context:S=void 0,powerPreference:Q="default",preserveDrawingBuffer:k=!1,clearColor:g,windowSize:C=!1,preset:P=void 0}=s.toRefs(e),{state:b,setState:R}=_(),{width:I,height:O}=u.toValue(C)==!0||u.toValue(C)===""||u.toValue(C)==="true"?u.useWindowSize():u.useElementSize(b.container),{logError:F,logWarning:U}=T(),{pixelRatio:x}=u.useDevicePixelRatio(),{pause:W,resume:N}=X(),Z=s.computed(()=>I.value/O.value);!u.toValue(C)&&((be=(we=b.container)==null?void 0:we.value)==null?void 0:be.offsetHeight)===0&&U(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
+You could set windowSize=true to force the canvas to be the size of the window.`);const ve=()=>{t.value&&(t.value.setSize(I.value,O.value),t.value.setPixelRatio(Math.min(x.value,2)))},he=()=>{if(!t.value)return;const j=u.toValue(P);if(j){j in J||F("Renderer Preset must be one of these: "+Object.keys(J).join(", ")),ne(t.value,J[j]);return}t.value.shadowMap.enabled=u.toValue(h),t.value.shadowMap.type=u.toValue(w),t.value.toneMapping=u.toValue(M)||d.NoToneMapping,t.value.toneMappingExposure=u.toValue(V),t.value.outputEncoding=u.toValue(L)||d.LinearEncoding,g!=null&&g.value&&t.value.setClearColor(_e(u.toValue(g))),t.value.useLegacyLights=u.toValue(y)},Fe=()=>{const j=u.unrefElement(b.canvas);j&&(t.value=new d.WebGLRenderer({canvas:j,alpha:u.toValue(a),antialias:u.toValue(n),context:u.toValue(S),depth:u.toValue(r),failIfMajorPerformanceCaveat:u.toValue(o),logarithmicDepthBuffer:u.toValue(f),powerPreference:u.toValue(Q),precision:u.toValue(c),stencil:u.toValue(p),preserveDrawingBuffer:u.toValue(k),premultipliedAlpha:u.toValue(m)}),R("renderer",t.value),R("clock",new d.Clock),R("aspectRatio",Z),he(),ve(),N(),i.value=!0)},Ue=()=>{t.value&&(t.value.dispose(),t.value=void 0,i.value=!1,W())};return s.watch([Z,x],ve),s.watch([h,w,L,y,M,V,g],he),s.watch(()=>[b.canvas,b.container],()=>{u.unrefElement(b.canvas)&&u.unrefElement(b.container)&&Fe()},{immediate:!0,deep:!0}),{renderer:t,isReady:i,dispose:Ue,aspectRatio:Z}}const ie=e=>typeof e=="function",xe=e=>typeof e=="string",oe=e=>!!e&&e.constructor===Array;function se(e){const t={nodes:{},materials:{}};return e&&e.traverse(i=>{i.name&&(t.nodes[i.name]=i),i.material&&!t.materials[i.material.name]&&(t.materials[i.material.name]=i.material)}),t}async function Ae(e,t,i,a,n){const{logError:r}=T(),f=new e;n&&n(f),i&&i(f);const c=(Array.isArray(t)?t:[t]).map(m=>new Promise((p,h)=>{f.load(m,w=>{w.scene&&Object.assign(w,se(w.scene)),p(w)},a,w=>h(r("[useLoader] - Failed to load resource",w)))}));return oe(t)?await Promise.all(c):await c[0]}async function Te(e){const t=new d.LoadingManager,i=new d.TextureLoader(t),a=n=>new Promise((r,f)=>{i.load(n,o=>r(o),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(oe(e)){const n=await Promise.all(e.map(r=>a(r)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:r,normalMap:f,roughnessMap:o,metalnessMap:c,aoMap:m,alphaMap:p,matcap:h}=e;return{map:n?await a(n):null,displacementMap:r?await a(r):null,normalMap:f?await a(f):null,roughnessMap:o?await a(o):null,metalnessMap:c?await a(c):null,aoMap:m?await a(m):null,alphaMap:p?await a(p):null,matcap:h?await a(h):null}}}const v=["00","01","02","03","04","05","06","07","08","09","0a","0b","0c","0d","0e","0f","10","11","12","13","14","15","16","17","18","19","1a","1b","1c","1d","1e","1f","20","21","22","23","24","25","26","27","28","29","2a","2b","2c","2d","2e","2f","30","31","32","33","34","35","36","37","38","39","3a","3b","3c","3d","3e","3f","40","41","42","43","44","45","46","47","48","49","4a","4b","4c","4d","4e","4f","50","51","52","53","54","55","56","57","58","59","5a","5b","5c","5d","5e","5f","60","61","62","63","64","65","66","67","68","69","6a","6b","6c","6d","6e","6f","70","71","72","73","74","75","76","77","78","79","7a","7b","7c","7d","7e","7f","80","81","82","83","84","85","86","87","88","89","8a","8b","8c","8d","8e","8f","90","91","92","93","94","95","96","97","98","99","9a","9b","9c","9d","9e","9f","a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","aa","ab","ac","ad","ae","af","b0","b1","b2","b3","b4","b5","b6","b7","b8","b9","ba","bb","bc","bd","be","bf","c0","c1","c2","c3","c4","c5","c6","c7","c8","c9","ca","cb","cc","cd","ce","cf","d0","d1","d2","d3","d4","d5","d6","d7","d8","d9","da","db","dc","dd","de","df","e0","e1","e2","e3","e4","e5","e6","e7","e8","e9","ea","eb","ec","ed","ee","ef","f0","f1","f2","f3","f4","f5","f6","f7","f8","f9","fa","fb","fc","fd","fe","ff"];function Ve(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,i=Math.random()*4294967295|0,a=Math.random()*4294967295|0;return(v[e&255]+v[e>>8&255]+v[e>>16&255]+v[e>>24&255]+"-"+v[t&255]+v[t>>8&255]+"-"+v[t>>16&15|64]+v[t>>24&255]+"-"+v[i&63|128]+v[i>>8&255]+"-"+v[i>>16&255]+v[i>>24&255]+v[a&255]+v[a>>8&255]+v[a>>16&255]+v[a>>24&255]).toLowerCase()}const G=Symbol();function ce(){const e=s.shallowReactive({uuid:Ve(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:s.computed(()=>window.innerWidth/window.innerHeight)});function t(n){return e[n]}function i(n,r){e[n]=r}const a={state:e,...s.toRefs(e),getState:t,setState:i};return s.provide(G,a),a}const _=()=>s.inject(G,{state:s.shallowReactive({camera:void 0,cameras:[],scene:void 0,renderer:void 0})});function ue(){var f;const e=s.shallowRef(new d.Raycaster),t=s.ref(new d.Vector2),i=s.ref(null),{setState:a,state:n}=_();a("raycaster",e.value),a("pointer",t),a("currentInstance",i);function r(o){t.value.x=o.clientX/window.innerWidth*2-1,t.value.y=-(o.clientY/window.innerHeight)*2+1}return(f=n==null?void 0:n.renderer)==null||f.domElement.addEventListener("pointermove",r),s.onUnmounted(()=>{var o;(o=n==null?void 0:n.renderer)==null||o.domElement.removeEventListener("pointermove",r)}),{raycaster:e,pointer:t}}const ke=!0,fe="[TresJS ▲ ■ ●] ";function T(){function e(a,n){console.error(`${fe} ${a}`,n||"")}function t(a){console.warn(`${fe} ${a}`)}function i(a,n){}return{logError:e,logWarning:t,logMessage:i}}function Re(){const{logWarning:e}=T();function t(a,n,r){let f=null;return a.traverse(o=>{o[n]===r&&(f=o)}),f||e(`Child with ${n} '${r}' not found.`),f}function i(a,n){return t(a,"name",n)}return{seek:t,seekByName:i}}const je=/^on[^a-z]/,De=e=>je.test(e);function Ne(e){}let le=null;const de={GEOMETRY_VIA_PROP:"tres__geometryViaProp",MATERIAL_VIA_PROP:"tres__materialViaProp"},{logError:me}=T(),Ie={createElement(e,t,i,a){var c,m;if(a||(a={}),a.args||(a.args=[]),e==="template"||Se(e))return null;let n=e.replace("Tres",""),r;if(e==="primitive"){(a==null?void 0:a.object)===void 0&&me("Tres primitives need a prop 'object'");const p=a.object;n=p.type,r=Object.assign(p,{type:n,attach:a.attach,primitive:!0})}else{const p=Y.value[n];p||me(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`),r=new p(...a.args)}if(r.isCamera){a!=null&&a.position||r.position.set(3,3,3),a!=null&&a.lookAt||r.lookAt(0,0,0);const{pushCamera:p}=q();p(r)}(a==null?void 0:a.attach)===void 0&&(r.isMaterial?r.attach="material":r.isBufferGeometry&&(r.attach="geometry"));const{GEOMETRY_VIA_PROP:f,MATERIAL_VIA_PROP:o}=de;return r.isObject3D&&((c=a==null?void 0:a.material)!=null&&c.isMaterial&&(r.userData[o]=!0),(m=a==null?void 0:a.geometry)!=null&&m.isBufferGeometry&&(r.userData[f]=!0)),r.events={},r},insert(e,t){var i,a,n,r;if((((i=e==null?void 0:e.__vnode)==null?void 0:i.type)==="TresGroup"||((a=e==null?void 0:e.__vnode)==null?void 0:a.type)==="TresObject3D")&&t===null&&!((r=(n=e==null?void 0:e.__vnode)==null?void 0:n.ctx)!=null&&r.asyncResolved)){le=e;return}t||(t=le),e!=null&&e.isObject3D&&(t!=null&&t.isObject3D)?(t.add(e),e.dispatchEvent({type:"added"})):typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e))},remove(e){var t,i;if(e){if(e.isObject3D){const a=e,n=r=>{var c,m;const{GEOMETRY_VIA_PROP:f,MATERIAL_VIA_PROP:o}=de;r.userData[o]||(c=r.material)==null||c.dispose(),r.userData[f]||(m=r.geometry)==null||m.dispose()};a.traverse(r=>n(r)),n(a)}(t=e.removeFromParent)==null||t.call(e),(i=e.dispose)==null||i.call(e)}},patchProp(e,t,i,a){if(e){let n=e,r=t,f=z(r),o=n==null?void 0:n[f];if(n.type==="BufferGeometry"){if(r==="args")return;n.setAttribute(z(r),new d.BufferAttribute(...a));return}if(r.includes("-")&&o===void 0){const m=r.split("-");o=m.reduce((p,h)=>p[z(h)],n),r=m.pop(),f=r.toLowerCase(),o!=null&&o.set||(n=m.reduce((p,h)=>p[z(h)],n))}De(r)&&(e.events[r]=a);let c=a;if(c===""&&(c=!0),ie(o)){Array.isArray(c)?e[f](...c):e[f](c);return}!(o!=null&&o.set)&&!ie(o)?n[f]=c:o.constructor===c.constructor&&(o!=null&&o.copy)?o==null||o.copy(c):Array.isArray(c)?o.set(...c):!o.isColor&&o.setScalar?o.setScalar(c):o.set(c)}},parentNode(e){return(e==null?void 0:e.parent)||null},createText:()=>void 0,createComment:()=>void 0,setText:()=>void 0,setElementText:()=>void 0,nextSibling:()=>void 0,querySelector:()=>void 0,setScopeId:()=>void 0,cloneNode:()=>void 0,insertStaticContent:()=>void 0},{createApp:Ee}=s.createRenderer(Ie),Be=e=>{const t=Ee(i);function i(){return e&&e.default?e.default():[]}return t};$(H);const{logWarning:pe}=T(),ze=s.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:i}){e.physicallyCorrectLights===!0&&pe("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=s.ref(),n=s.ref(),r=new H.Scene,{setState:f}=_();f("scene",r),f("canvas",n),f("container",a);const o=s.ref(),c=t&&t.default&&t.default();c&&(c==null?void 0:c.length)>0&&(o.value=c.some(M=>xe(M.type)&&M.type.includes("Camera"))||e.camera,o.value||pe("No camera found in the scene, please add one!")),s.onMounted(()=>{w()}),s.onUnmounted(()=>{f("renderer",null)});const{activeCamera:m,pushCamera:p,clearCameras:h}=q();function w(){const{renderer:M}=re(e);e.camera&&p(e.camera);const{onLoop:V}=X(),{raycaster:S,pointer:Q}=ue();let k=null,g=null;s.watchEffect(()=>{m.value&&S.value.setFromCamera(Q.value,m.value)}),V(()=>{var C,P,b,R,I,O,F,U,x,W;if(m.value&&e.disableRender!==!0&&e.disableRender!==""&&((C=M.value)==null||C.render(r,m.value)),S.value){const N=S.value.intersectObjects(r.children);N.length>0?(g=N[0],k===null&&((R=(b=(P=g.object)==null?void 0:P.events)==null?void 0:b.onPointerEnter)==null||R.call(b,g)),(F=(O=(I=g.object)==null?void 0:I.events)==null?void 0:O.onPointerMove)==null||F.call(O,g)):k!==null&&((W=(x=(U=g==null?void 0:g.object)==null?void 0:U.events)==null?void 0:x.onPointerLeave)==null||W.call(x,k),g=null),k=g}}),u.useEventListener(n.value,"click",()=>{var C,P,b;g!==null&&((b=(P=(C=g.object)==null?void 0:C.events)==null?void 0:P.onClick)==null||b.call(P,g))})}let y;function L(){y=Be(t),y.provide("useTres",_()),y.provide(G,_()),y.provide("extend",$),y.mount(r)}return L(),i({scene:r}),s.watch(()=>e.camera,M=>{M&&(h(),p(M))}),()=>s.h(s.h("div",{ref:a,"data-scene":r.uuid,key:r.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[s.h("div",{style:{width:"100%",height:"100%"}},[s.h("canvas",{ref:n,"data-scene":r.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),ge=s.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset","disableRender","camera"],setup(e,{slots:t,expose:i}){const a=ce();return i(a),()=>s.h(ze,e,t)}}),Ge={install(e){e.component("TresCanvas",ge)}};l.CameraType=ee,l.TRES_CONTEXT_KEY=G,l.TresCanvas=ge,l.catalogue=Y,l.default=Ge,l.extend=$,l.isProd=ke,l.trasverseObjects=se,l.useCamera=q,l.useLoader=Ae,l.useLogger=T,l.useRaycaster=ue,l.useRenderLoop=X,l.useRenderer=re,l.useSeek=Re,l.useTexture=Te,l.useTres=_,l.useTresProvider=ce,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/types/index.d.ts

@@ -55,9 +55,12 @@ export type TresAttributes = Record<string, any> & {
 export type TresVectorProp = Vector2 | Vector3 | number[] | number;
 export type TresColor = string | number | Color | number[];
 export interface TresEvent extends Intersection<Object3D<Event>> {
-    object: Object3D;
+    object: Object3D & {
+        events?: Record<string, any>;
+    };
     distance: number;
     faceIndex?: number | undefined;
     point: Vector3;
     uv?: Vector2;
+    events?: Record<string, any>;
 }

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-rc.0",
   "type": "module",
+  "packageManager": "pnpm@8.3.1",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
     "dist"
@@ -57,46 +58,46 @@
   },
   "dependencies": {
     "@alvarosabu/utils": "^2.3.0",
-    "@vueuse/core": "^9.13.0"
+    "@vueuse/core": "^10.1.2"
   },
   "devDependencies": {
-    "@tresjs/core": "2.0.0-beta.5",
     "@alvarosabu/prettier-config": "^1.3.0",
     "@huntersofbook/plausible-vue": "^1.0.0",
     "@release-it/conventional-changelog": "^5.1.1",
     "@stackblitz/sdk": "^1.9.0",
-    "@tresjs/cientos": "2.0.0-beta.1",
-    "@types/three": "latest",
-    "@typescript-eslint/eslint-plugin": "^5.58.0",
-    "@typescript-eslint/parser": "^5.58.0",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@tresjs/cientos": "2.0.0-beta.6",
+    "@tresjs/core": "2.0.0-beta.11",
+    "@types/three": "^0.151.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "@vitejs/plugin-vue": "^4.2.1",
     "@vitest/coverage-c8": "^0.30.1",
-    "@vitest/ui": "^0.29.2",
+    "@vitest/ui": "^0.30.1",
     "@vue/test-utils": "^2.3.2",
-    "eslint": "^8.38.0",
+    "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^9.11.0",
     "gsap": "^3.11.5",
-    "happy-dom": "^9.6.1",
-    "jsdom": "^21.1.1",
-    "kolorist": "^1.7.0",
+    "happy-dom": "^9.10.7",
+    "jsdom": "^22.0.0",
+    "kolorist": "^1.8.0",
     "pathe": "^1.1.0",
-    "prettier": "^2.8.7",
-    "release-it": "^15.10.1",
+    "prettier": "^2.8.8",
+    "release-it": "^15.10.3",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-visualizer": "^5.9.0",
-    "three": "^0.150.1",
-    "unocss": "^0.51.4",
+    "three": "^0.152.2",
+    "unocss": "^0.51.8",
     "unplugin": "^1.3.1",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.2.1",
+    "vite": "^4.3.4",
     "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "2.2.0",
-    "vite-plugin-inspect": "^0.7.22",
+    "vite-plugin-dts": "2.3.0",
+    "vite-plugin-inspect": "^0.7.24",
     "vite-plugin-require-transform": "^1.0.12",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-alpha.65",
+    "vitepress": "1.0.0-alpha.75",
     "vitest": "^0.30.1",
     "vue-demi": "^0.14.0"
   }