@tresjs/core 2.0.0-alpha.5 → 2.0.0-beta.0

package/README.md

@@ -9,32 +9,65 @@
 
 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).
 
-## Setup
+## Docs
+
+Checkout the [docs](https://tresjs.org)
+
+## Demos
+
+- [Stackblitz Collection](https://stackblitz.com/@alvarosabu/collections/tresjs)
+
+## 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) |
+
+## Contribution
+
+We are open to contributions, please read the [contributing guide](/CONTRIBUTING.md) to get started.
+
+### Setup
 
 ```
 pnpm install --shamefully-hoist
 ```
 
-## Dev
+### Playground
 
-To run the small playground without Histoire use
+To run the small playground
 
 ```
-pnpm run dev
+pnpm run playground
 ```
 
-## Histoire
+### Build lib
 
-All local demos will be inside [Histoire](https://histoire.dev/) stories.
+To build the core as library mode just use
 
 ```
-pnpm run story:dev
+pnpm run build
 ```
 
-## Build lib
+### Docs
 
-To build the core as library mode just use
+To run de docs in dev mode
 
+```bash
+pnpm run docs:dev
 ```
-pnpm run build
+
+To build them
+
+```bash
+pnpm run docs:build
 ```
+
+## License
+
+[MIT](/LICENSE)
+
+## Sponsors
+
+Be the first to support this project [here](https://github.com/sponsors/alvarosabu) ☺️

package/dist/components/TresCanvas.d.ts

@@ -15,5 +15,8 @@ export interface TresCanvasProps {
     windowSize?: boolean;
     preset?: RendererPresetsType;
 }
+/**
+ * Vue component for rendering a Tres component.
+ */
 export declare const TresCanvas: import("vue").DefineComponent<TresCanvasProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<TresCanvasProps>, {}>;
 export default TresCanvas;

package/dist/components/TresScene.d.ts

@@ -0,0 +1,19 @@
+import { ShadowMapType, TextureEncoding, ToneMapping } from 'three';
+import { RendererPresetsType } from '../composables/useRenderer/const';
+export interface TresSceneProps {
+    shadows?: boolean;
+    shadowMapType?: ShadowMapType;
+    physicallyCorrectLights?: boolean;
+    useLegacyLights?: boolean;
+    outputEncoding?: TextureEncoding;
+    toneMapping?: ToneMapping;
+    toneMappingExposure?: number;
+    context?: WebGLRenderingContext;
+    powerPreference?: 'high-performance' | 'low-power' | 'default';
+    preserveDrawingBuffer?: boolean;
+    clearColor?: string;
+    windowSize?: boolean;
+    preset?: RendererPresetsType;
+}
+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/const.d.ts

@@ -1,11 +1,11 @@
 export declare const rendererPresets: {
     realistic: {
-        outputEncoding: import("three").TextureEncoding;
-        toneMapping: import("three").ToneMapping;
+        outputEncoding: 3001;
+        toneMapping: 4;
         toneMappingExposure: number;
         shadowMap: {
             enabled: boolean;
-            type: import("three").ShadowMapType;
+            type: 2;
         };
     };
 };

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

@@ -1,4 +1,4 @@
-import { MaybeComputedRef, MaybeElementRef } from '@vueuse/core';
+import { MaybeComputedRef } from '@vueuse/core';
 import { WebGLRendererParameters, WebGLRenderer, ShadowMapType } from 'three';
 import type { TextureEncoding, ToneMapping } from 'three';
 import { TresColor } from '../../types';
@@ -85,10 +85,9 @@ export interface UseRendererOptions extends WebGLRendererParameters {
  * Reactive Three.js WebGLRenderer instance
  *
  * @param canvas
- * @param container
  * @param {UseRendererOptions} [options]
  */
-export declare function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef, options: UseRendererOptions): {
+export declare function useRenderer(options: UseRendererOptions): {
     renderer: import("vue").ShallowRef<WebGLRenderer | undefined>;
     isReady: import("vue").Ref<boolean>;
     dispose: () => void;

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

@@ -89,6 +89,12 @@ export interface TresState {
     }) | null;
     [key: string]: any;
 }
+export type UseTresReturn = {
+    state: TresState;
+    getState: (key: string) => void;
+    setState: (key: string, value: any) => void;
+    aspectRatio: ComputedRef<number>;
+};
 /**
  * The Tres state.
  *
@@ -97,7 +103,7 @@ export interface TresState {
  * @export
  * @return {*} {TresState, getState, setState}
  */
-export declare function useTres(): {
+export declare function useTresProvider(): {
     getState: (key: string) => any;
     setState: (key: string, value: any) => void;
     camera?: import("vue").Ref<Camera | undefined> | undefined;
@@ -114,3 +120,4 @@ export declare function useTres(): {
     }) | null | undefined> | undefined;
     state: TresState;
 };
+export declare const useTres: () => UseTresReturn;

package/dist/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-alpha.5
+ * version: v2.0.0-beta.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { ref as M, watchEffect as Ee, toRef as xe, shallowRef as ne, toRefs as ae, computed as re, watch as O, shallowReactive as Pe, createRenderer as Se, defineComponent as Te, onUnmounted as Re, h as S } from "vue";
-import * as oe from "three";
-import { MathUtils as Ae, PerspectiveCamera as F, OrthographicCamera as ke, Clock as ie, Color as I, sRGBEncoding as Oe, ACESFilmicToneMapping as je, PCFSoftShadowMap as Be, PCFShadowMap as _e, LinearEncoding as Y, NoToneMapping as Q, WebGLRenderer as De, LoadingManager as Fe, TextureLoader as Ie, Raycaster as We, Vector2 as ze, Mesh as He, BufferAttribute as $e } from "three";
-import { createEventHook as G, useRafFn as Ge, resolveUnref as c, useWindowSize as Ne, useElementSize as Ue, useDevicePixelRatio as Ve, unrefElement as W, useEventListener as qe, isFunction as Z } from "@vueuse/core";
-const $ = M({ uuid: Ae.generateUUID() }), se = (e) => void Object.assign($.value, e);
-var Je = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Je || {});
-const Ke = 45;
-let y;
-function ue() {
-  const { state: e, setState: t, aspectRatio: o } = L();
-  function r(a = "Perspective", s) {
-    var l, p, d;
-    if (a === "Perspective") {
-      const { near: m, far: w, fov: v } = s || {
+import { ref as M, watchEffect as oe, toRef as Re, shallowRef as ie, toRefs as se, computed as ce, watch as z, shallowReactive as ke, provide as Ae, inject as Oe, createRenderer as je, defineComponent as ue, onMounted as _e, onUnmounted as Be, h as E } from "vue";
+import * as fe from "three";
+import { MathUtils as De, PerspectiveCamera as O, OrthographicCamera as ze, Clock as le, Color as W, sRGBEncoding as We, ACESFilmicToneMapping as Fe, PCFSoftShadowMap as Ie, PCFShadowMap as He, LinearEncoding as ee, NoToneMapping as te, WebGLRenderer as Ue, LoadingManager as $e, TextureLoader as Ge, Raycaster as Ne, Vector2 as Ve, Mesh as qe, BufferAttribute as Ye } from "three";
+import { createEventHook as $, useRafFn as Ke, resolveUnref as f, useWindowSize as Xe, useElementSize as Je, useDevicePixelRatio as Qe, unrefElement as F, useEventListener as Ze, isFunction as ne } from "@vueuse/core";
+const H = M({ uuid: De.generateUUID() }), de = (e) => void Object.assign(H.value, e);
+var et = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(et || {});
+const tt = 45;
+let x;
+function U() {
+  const { state: e, setState: t, aspectRatio: r } = T();
+  function a(o = "Perspective", c) {
+    var u, l, p;
+    if (o === "Perspective") {
+      const { near: d, far: w, fov: v } = c || {
         near: 0.1,
         far: 1e3,
-        fov: Ke
+        fov: tt
       };
-      y = new F(v, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, m, w), (p = e.cameras) == null || p.push(y);
+      x = new O(v, ((u = e.aspectRatio) == null ? void 0 : u.value) || window.innerWidth / window.innerHeight, d, w), (l = e.cameras) == null || l.push(x);
     } else {
-      const { left: m, right: w, top: v, bottom: g, near: x, far: P } = s || {
+      const { left: d, right: w, top: v, bottom: b, near: g, far: P } = c || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,306 +33,333 @@ function ue() {
         near: 0.1,
         far: 1e3
       };
-      y = new ke(m, w, v, g, x, P), (d = e.cameras) == null || d.push(y);
+      x = new ze(d, w, v, b, g, P), (p = e.cameras) == null || p.push(x);
     }
-    return e.camera = y, t("camera", e.camera), y;
+    return e.camera = x, t("camera", e.camera), x;
   }
   function n() {
-    var a;
-    e.camera instanceof F && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (a = e.camera) == null || a.updateProjectionMatrix();
+    var o;
+    e.camera instanceof O && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (o = e.camera) == null || o.updateProjectionMatrix();
   }
-  function i(a) {
-    var s;
-    (s = e.cameras) == null || s.push(a), a instanceof F && e.aspectRatio && (a.aspect = e.aspectRatio.value), a.updateProjectionMatrix(), t("camera", a);
+  function i(o) {
+    var c;
+    (c = e.cameras) == null || c.push(o), o instanceof O && e.aspectRatio && (o.aspect = e.aspectRatio.value), o.updateProjectionMatrix(), t("camera", o);
   }
-  function u() {
+  function s() {
     e.cameras = [];
   }
-  return Ee(() => {
-    o != null && o.value && n();
+  return oe(() => {
+    r != null && r.value && n();
   }), {
-    activeCamera: xe(e, "camera"),
-    createCamera: r,
+    activeCamera: Re(e, "camera"),
+    createCamera: a,
     updateCamera: n,
     pushCamera: i,
-    clearCameras: u
+    clearCameras: s
   };
 }
-const ce = G(), le = G(), N = G(), b = new ie();
-let j = 0, B = 0;
-const { pause: Xe, resume: Ye, isActive: Qe } = Ge(
+const pe = $(), me = $(), G = $(), S = new le();
+let j = 0, _ = 0;
+const { pause: nt, resume: at, isActive: rt } = Ke(
   () => {
-    ce.trigger({ delta: j, elapsed: B, clock: b }), le.trigger({ delta: j, elapsed: B, clock: b }), N.trigger({ delta: j, elapsed: B, clock: b });
+    pe.trigger({ delta: j, elapsed: _, clock: S }), me.trigger({ delta: j, elapsed: _, clock: S }), G.trigger({ delta: j, elapsed: _, clock: S });
   },
   { immediate: !1 }
 );
-N.on(() => {
-  j = b.getDelta(), B = b.getElapsedTime();
+G.on(() => {
+  j = S.getDelta(), _ = S.getElapsedTime();
 });
-function U() {
+function N() {
   return {
-    onBeforeLoop: ce.on,
-    onLoop: le.on,
-    onAfterLoop: N.on,
-    pause: Xe,
-    resume: Ye,
-    isActive: Qe
+    onBeforeLoop: pe.on,
+    onLoop: me.on,
+    onAfterLoop: G.on,
+    pause: nt,
+    resume: at,
+    isActive: rt
   };
 }
-function Ze(e) {
-  return e instanceof I ? e : Array.isArray(e) ? new I(...e) : new I(e);
+function ot(e) {
+  return e instanceof W ? e : Array.isArray(e) ? new W(...e) : new W(e);
 }
-const z = {
+const I = {
   realistic: {
-    outputEncoding: Oe,
-    toneMapping: je,
+    outputEncoding: We,
+    toneMapping: Fe,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: Be
+      type: Ie
     }
   }
-}, fe = (e, t) => {
-  for (const o of Object.keys(t))
-    t[o] instanceof Object && Object.assign(t[o], fe(e[o], t[o]));
+}, ve = (e, t) => {
+  for (const r of Object.keys(t))
+    t[r] instanceof Object && Object.assign(t[r], ve(e[r], t[r]));
   return Object.assign(e || {}, t), e;
-}, et = "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", tt = /* @__PURE__ */ nt(et);
-function T(e) {
-  return e.replace(/-([a-z])/g, (t, o) => o.toUpperCase());
+}, it = "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", st = /* @__PURE__ */ ct(it);
+function R(e) {
+  return e.replace(/-([a-z])/g, (t, r) => r.toUpperCase());
 }
-function nt(e, t) {
-  const o = /* @__PURE__ */ Object.create(null), r = e.split(",");
-  for (let n = 0; n < r.length; n++)
-    o[r[n]] = !0;
-  return t ? (n) => !!o[n.toLowerCase()] : (n) => !!o[n];
+function ct(e, t) {
+  const r = /* @__PURE__ */ Object.create(null), a = e.split(",");
+  for (let n = 0; n < a.length; n++)
+    r[a[n]] = !0;
+  return t ? (n) => !!r[n.toLowerCase()] : (n) => !!r[n];
 }
-const f = ne(), H = M(!1);
-function at(e, t, o) {
-  const {
-    alpha: r = !0,
+function ut(e) {
+  var Q, Z;
+  const t = ie(), r = M(!1), {
+    alpha: a = !0,
     antialias: n = !0,
     depth: i,
-    logarithmicDepthBuffer: u,
-    failIfMajorPerformanceCaveat: a,
-    precision: s,
-    premultipliedAlpha: l,
-    stencil: p,
-    shadows: d = !1,
-    shadowMapType: m = _e,
+    logarithmicDepthBuffer: s,
+    failIfMajorPerformanceCaveat: o,
+    precision: c,
+    premultipliedAlpha: u,
+    stencil: l,
+    shadows: p = !1,
+    shadowMapType: d = He,
     physicallyCorrectLights: w = !1,
     useLegacyLights: v = !1,
-    outputEncoding: g = Y,
-    toneMapping: x = Q,
+    outputEncoding: b = ee,
+    toneMapping: g = te,
     toneMappingExposure: P = 1,
-    context: me = void 0,
-    powerPreference: ve = "default",
-    preserveDrawingBuffer: ge = !1,
-    clearColor: C,
-    windowSize: we = !1,
-    preset: he = void 0
-  } = ae(o), { setState: _ } = L(), { width: V, height: q } = c(we) ? Ne() : Ue(t), { logError: ye } = E(), { pixelRatio: J } = Ve(), { pause: Me, resume: Ce } = U(), D = re(() => V.value / q.value), K = () => {
-    f.value && (f.value.setSize(V.value, q.value), f.value.setPixelRatio(Math.min(J.value, 2)));
-  }, X = () => {
-    if (!f.value)
+    context: be = void 0,
+    powerPreference: ye = "default",
+    preserveDrawingBuffer: xe = !1,
+    clearColor: L,
+    windowSize: V = !1,
+    preset: Me = void 0
+  } = se(e), { state: h, setState: B } = T(), { width: q, height: Y } = f(V) ? Xe() : Je(h.container), { logError: Ce, logWarning: Le } = C(), { pixelRatio: K } = Qe(), { pause: Ee, resume: Se } = N(), D = ce(() => q.value / Y.value);
+  !f(V) && ((Z = (Q = h.container) == null ? void 0 : Q.value) == null ? void 0 : Z.offsetHeight) === 0 && Le(`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(q.value, Y.value), t.value.setPixelRatio(Math.min(K.value, 2)));
+  }, J = () => {
+    if (!t.value)
       return;
-    const h = c(he);
-    if (h) {
-      h in z || ye("Renderer Preset must be one of these: " + Object.keys(z).join(", ")), fe(f.value, z[h]);
+    const y = f(Me);
+    if (y) {
+      y in I || Ce("Renderer Preset must be one of these: " + Object.keys(I).join(", ")), ve(t.value, I[y]);
       return;
     }
-    f.value.shadowMap.enabled = c(d), f.value.shadowMap.type = c(m), f.value.toneMapping = c(x) || Q, f.value.toneMappingExposure = c(P), f.value.outputEncoding = c(g) || Y, C != null && C.value && f.value.setClearColor(Ze(c(C))), f.value.useLegacyLights = c(v);
-  }, be = () => {
-    const h = W(e);
-    h && (f.value = new De({
-      canvas: h,
-      alpha: c(r),
-      antialias: c(n),
-      context: c(me),
-      depth: c(i),
-      failIfMajorPerformanceCaveat: c(a),
-      logarithmicDepthBuffer: c(u),
-      powerPreference: c(ve),
-      precision: c(s),
-      stencil: c(p),
-      preserveDrawingBuffer: c(ge),
-      premultipliedAlpha: c(l)
-    }), _("renderer", f.value), _("clock", new ie()), _("aspectRatio", D), X(), K(), Ce(), H.value = !0);
-  }, Le = () => {
-    f.value && (f.value.dispose(), f.value = void 0, H.value = !1, Me());
+    t.value.shadowMap.enabled = f(p), t.value.shadowMap.type = f(d), t.value.toneMapping = f(g) || te, t.value.toneMappingExposure = f(P), t.value.outputEncoding = f(b) || ee, L != null && L.value && t.value.setClearColor(ot(f(L))), t.value.useLegacyLights = f(v);
+  }, Te = () => {
+    const y = F(h.canvas);
+    y && (t.value = new Ue({
+      canvas: y,
+      alpha: f(a),
+      antialias: f(n),
+      context: f(be),
+      depth: f(i),
+      failIfMajorPerformanceCaveat: f(o),
+      logarithmicDepthBuffer: f(s),
+      powerPreference: f(ye),
+      precision: f(c),
+      stencil: f(l),
+      preserveDrawingBuffer: f(xe),
+      premultipliedAlpha: f(u)
+    }), B("renderer", t.value), B("clock", new le()), B("aspectRatio", D), J(), X(), Se(), r.value = !0);
+  }, Pe = () => {
+    t.value && (t.value.dispose(), t.value = void 0, r.value = !1, Ee());
   };
-  return O([D, J], K), O(
-    [d, m, g, v, x, P, C],
-    X
-  ), O(
-    () => [e, t],
+  return z([D, K], X), z(
+    [p, d, b, v, g, P, L],
+    J
+  ), z(
+    () => [h.canvas, h.container],
     () => {
-      W(e) && W(t) && be();
+      F(h.canvas) && F(h.container) && Te();
     },
     { immediate: !0, deep: !0 }
   ), {
-    renderer: f,
-    isReady: H,
-    dispose: Le,
+    renderer: t,
+    isReady: r,
+    dispose: Pe,
     aspectRatio: D
   };
 }
-const pe = (e) => !!e && e.constructor === Array;
-function rt(e) {
+const ge = (e) => !!e && e.constructor === Array;
+function ft(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);
+  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 wt(e, t, o, r, n) {
-  const { logError: i } = E(), u = new e();
-  n && n(u), o && o(u);
-  const s = (Array.isArray(t) ? t : [t]).map(
-    (l) => new Promise((p, d) => {
-      u.load(
-        l,
-        (m) => {
-          m.scene && Object.assign(m, rt(m.scene)), p(m);
+async function Et(e, t, r, a, n) {
+  const { logError: i } = C(), s = new e();
+  n && n(s), r && r(s);
+  const c = (Array.isArray(t) ? t : [t]).map(
+    (u) => new Promise((l, p) => {
+      s.load(
+        u,
+        (d) => {
+          d.scene && Object.assign(d, ft(d.scene)), l(d);
         },
-        r,
-        (m) => d(i("[useLoader] - Failed to load resource", m))
+        a,
+        (d) => p(i("[useLoader] - Failed to load resource", d))
       );
     })
   );
-  return pe(t) ? await Promise.all(s) : await s[0];
+  return ge(t) ? await Promise.all(c) : await c[0];
 }
-async function ht(e) {
-  const t = new Fe(), o = new Ie(t), r = (n) => new Promise((i, u) => {
-    o.load(
+async function St(e) {
+  const t = new $e(), r = new Ge(t), a = (n) => new Promise((i, s) => {
+    r.load(
       n,
-      (a) => i(a),
+      (o) => i(o),
       () => null,
       () => {
-        u(new Error("[useTextures] - Failed to load texture"));
+        s(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (pe(e)) {
-    const n = await Promise.all(e.map((i) => r(i)));
+  if (ge(e)) {
+    const n = await Promise.all(e.map((i) => a(i)));
     return e.length > 1 ? n : n[0];
   } else {
-    const { map: n, displacementMap: i, normalMap: u, roughnessMap: a, metalnessMap: s, aoMap: l } = e;
+    const {
+      map: n,
+      displacementMap: i,
+      normalMap: s,
+      roughnessMap: o,
+      metalnessMap: c,
+      aoMap: u,
+      alphaMap: l,
+      matcap: p
+    } = e;
     return {
-      map: n ? await r(n) : null,
-      displacementMap: i ? await r(i) : null,
-      normalMap: u ? await r(u) : null,
-      roughnessMap: a ? await r(a) : null,
-      metalnessMap: s ? await r(s) : null,
-      aoMap: l ? await r(l) : null
+      map: n ? await a(n) : null,
+      displacementMap: i ? await a(i) : null,
+      normalMap: s ? await a(s) : null,
+      roughnessMap: o ? await a(o) : null,
+      metalnessMap: c ? await a(c) : null,
+      aoMap: u ? await a(u) : null,
+      alphaMap: l ? await a(l) : null,
+      matcap: p ? await a(p) : null
     };
   }
 }
-const ot = {
-  camera: void 0,
-  cameras: [],
-  scene: void 0,
-  renderer: void 0,
-  aspectRatio: re(() => window.innerWidth / window.innerHeight)
-}, R = Pe(ot);
-function L() {
-  function e(o) {
-    return R[o];
+const m = ["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 lt() {
+  const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, r = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0;
+  return (m[e & 255] + m[e >> 8 & 255] + m[e >> 16 & 255] + m[e >> 24 & 255] + "-" + m[t & 255] + m[t >> 8 & 255] + "-" + m[t >> 16 & 15 | 64] + m[t >> 24 & 255] + "-" + m[r & 63 | 128] + m[r >> 8 & 255] + "-" + m[r >> 16 & 255] + m[r >> 24 & 255] + m[a & 255] + m[a >> 8 & 255] + m[a >> 16 & 255] + m[a >> 24 & 255]).toLowerCase();
+}
+const he = Symbol();
+function dt() {
+  const e = ke({
+    uuid: lt(),
+    camera: void 0,
+    cameras: [],
+    scene: void 0,
+    renderer: void 0,
+    aspectRatio: ce(() => window.innerWidth / window.innerHeight)
+  });
+  function t(n) {
+    return e[n];
   }
-  function t(o, r) {
-    R[o] = r;
+  function r(n, i) {
+    e[n] = i;
   }
-  return {
-    state: R,
-    ...ae(R),
-    getState: e,
-    setState: t
+  const a = {
+    state: e,
+    ...se(e),
+    getState: t,
+    setState: r
   };
+  return Ae(he, a), a;
 }
-const ee = ne(new We()), A = M(new ze()), it = M(null);
-function de() {
-  const { setState: e } = L();
-  e("raycaster", ee.value), e("pointer", A), e("currentInstance", it);
-  function t(o) {
-    A.value.x = o.clientX / window.innerWidth * 2 - 1, A.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
+const T = () => {
+  const e = Oe(he), { logError: t } = C();
+  return e || t("useTres must be used together with useTresProvider"), e;
+}, ae = ie(new Ne()), k = M(new Ve()), pt = M(null);
+function we() {
+  const { setState: e } = T();
+  e("raycaster", ae.value), e("pointer", k), e("currentInstance", pt);
+  function t(r) {
+    k.value.x = r.clientX / window.innerWidth * 2 - 1, k.value.y = -(r.clientY / window.innerHeight) * 2 + 1;
   }
   return window.addEventListener("pointermove", t), {
-    raycaster: ee,
-    pointer: A
+    raycaster: ae,
+    pointer: k
   };
 }
-const yt = !0, te = "[TresJS ▲ ■ ●] ";
-function E() {
-  function e(r, n) {
-    console.error(`${te} ${r}`, n || "");
+const Tt = !0, re = "[TresJS ▲ ■ ●] ";
+function C() {
+  function e(a, n) {
+    console.error(`${re} ${a}`, n || "");
   }
-  function t(r) {
-    console.warn(`${te} ${r}`);
+  function t(a) {
+    console.warn(`${re} ${a}`);
   }
-  function o(r, n) {
+  function r(a, n) {
   }
   return {
     logError: e,
     logWarning: t,
-    logMessage: o
+    logMessage: r
   };
 }
-function Mt() {
-  const { logWarning: e } = E();
-  function t(r, n, i) {
-    let u = null;
-    return r.traverse((a) => {
-      a[n] === i && (u = a);
-    }), u || e(`Child with ${n} '${i}' not found.`), u;
+function Pt() {
+  const { logWarning: e } = C();
+  function t(a, n, i) {
+    let s = null;
+    return a.traverse((o) => {
+      o[n] === i && (s = o);
+    }), s || e(`Child with ${n} '${i}' not found.`), s;
   }
-  function o(r, n) {
-    return t(r, "name", n);
+  function r(a, n) {
+    return t(a, "name", n);
   }
   return {
     seek: t,
-    seekByName: o
+    seekByName: r
   };
 }
-const { logWarning: st } = E();
-function ut(e) {
+const { logWarning: mt } = C();
+function vt(e) {
   for (const t in e)
     if (t.indexOf("on") === 0)
       return !0;
   return !1;
 }
-let k = null;
-const ct = {
-  createElement(e, t, o, r) {
-    if (e === "template" || tt(e))
+let A = null;
+const gt = {
+  createElement(e, t, r, a) {
+    if (e === "template" || st(e))
       return null;
     let n;
-    if (r === null && (r = {}), r != null && r.args ? n = new $.value[e.replace("Tres", "")](...r.args) : n = new $.value[e.replace("Tres", "")](), n.isCamera) {
-      (!(r != null && r.position) || r != null && r.position.every((u) => u == 0)) && st(
+    if (a === null && (a = {}), a != null && a.args ? n = new H.value[e.replace("Tres", "")](...a.args) : n = new H.value[e.replace("Tres", "")](), n.isCamera) {
+      (!(a != null && a.position) || a != null && a.position.every((s) => s == 0)) && mt(
         // eslint-disable-next-line max-len
         "Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗"
       );
-      const { pushCamera: i } = ue();
+      const { pushCamera: i } = U();
       i(n);
     }
-    return (r == null ? void 0 : r.attach) === void 0 && (n.isMaterial ? n.attach = "material" : n.isBufferGeometry && (n.attach = "geometry")), n;
+    return (a == null ? void 0 : a.attach) === void 0 && (n.isMaterial ? n.attach = "material" : n.isBufferGeometry && (n.attach = "geometry")), n;
   },
-  insert(e, t, o) {
-    if (k === null && t.isScene && (k = t), t === null && (t = k), t != null && t.isObject3D && (e != null && e.isObject3D)) {
-      const a = o ? t.children.indexOf(o) : 0;
-      e.parent = t, t.children.splice(a, 0, e), e.dispatchEvent({ type: "added" });
+  insert(e, t, r) {
+    if (A === null && t.isScene && (A = t), t === null && (t = A), t != null && t.isObject3D && (e != null && e.isObject3D)) {
+      const s = r ? t.children.indexOf(r) : 0;
+      e.parent = t, t.children.splice(s, 0, e), e.dispatchEvent({ type: "added" });
     } else
       typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[t == null ? void 0 : t.attach], t && (t[e.attach] = e));
-    const { onLoop: r } = U();
+    const { onLoop: a } = N();
     let n = null, i = null;
-    const { raycaster: u } = de();
-    e && e instanceof He && ut(e) && (r(() => {
-      var a, s, l;
-      if (t != null && t.children && e && u) {
-        const p = u.value.intersectObjects(t.children);
-        p.length > 0 && p[0].object.uuid === e.uuid ? (i = p[0], (n === null || n.object.uuid !== (i == null ? void 0 : i.object.uuid)) && ((a = e.onPointerEnter) == null || a.call(e, i)), (s = e.onPointerMove) == null || s.call(e, i)) : (i = null, n !== null && ((l = e.onPointerLeave) == null || l.call(e, n))), n = i;
-      }
-    }), qe(window, "click", () => {
-      var a;
-      i !== null && ((a = e.onClick) == null || a.call(e, i));
-    }));
+    if (e && e instanceof qe && vt(e)) {
+      const { raycaster: s } = we();
+      a(() => {
+        var o, c, u;
+        if (t != null && t.children && e && s) {
+          const l = s.value.intersectObjects(t.children);
+          l.length > 0 && l[0].object.uuid === e.uuid ? (i = l[0], (n === null || n.object.uuid !== (i == null ? void 0 : i.object.uuid)) && ((o = e.onPointerEnter) == null || o.call(e, i)), (c = e.onPointerMove) == null || c.call(e, i)) : (i = null, n !== null && ((u = e.onPointerLeave) == null || u.call(e, n))), n = i;
+        }
+      }), Ze(window, "click", () => {
+        var o;
+        i !== null && ((o = e.onClick) == null || o.call(e, i));
+      });
+    }
   },
   remove(e) {
     if (!e)
@@ -340,24 +367,28 @@ const ct = {
     const t = e.parentNode;
     t && t.removeChild(e);
   },
-  patchProp(e, t, o, r) {
+  patchProp(e, t, r, a) {
     if (e) {
       let n = e, i = t;
-      const u = T(i);
-      let a = n == null ? void 0 : n[u];
-      if (e.parent || (e.parent = k), n.type === "BufferGeometry" && (i = i.split("-").pop(), n.setAttribute(
-        T(i),
-        new $e(...r)
-      )), i.includes("-") && a === void 0) {
-        const l = i.split("-");
-        a = l.reduce((p, d) => p[T(d)], n), i = l.pop(), a != null && a.set || (n = l.reduce((p, d) => p[T(d)], n));
+      const s = R(i);
+      let o = n == null ? void 0 : n[s];
+      if (e.parent || (e.parent = A), n.type === "BufferGeometry") {
+        n.setAttribute(
+          R(i),
+          new Ye(...a)
+        );
+        return;
+      }
+      if (i.includes("-") && o === void 0) {
+        const u = i.split("-");
+        o = u.reduce((l, p) => l[R(p)], n), i = u.pop(), o != null && o.set || (n = u.reduce((l, p) => l[R(p)], n));
       }
-      let s = r;
-      if (s === "" && (s = !0), Z(a)) {
-        Array.isArray(s) ? e[u](...s) : e[u](s);
+      let c = a;
+      if (c === "" && (c = !0), ne(o)) {
+        Array.isArray(c) ? e[s](...c) : e[s](c);
         return;
       }
-      !(a != null && a.set) && !Z(a) ? n[u] = s : a.constructor === s.constructor && (a != null && a.copy) ? a == null || a.copy(s) : Array.isArray(s) ? a.set(...s) : !a.isColor && a.setScalar ? a.setScalar(s) : a.set(s);
+      !(o != null && o.set) && !ne(o) ? n[s] = 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) {
@@ -372,16 +403,16 @@ const ct = {
   setScopeId: () => void 0,
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
-}, { createApp: lt } = Se(ct), ft = (e) => {
-  const t = lt(o);
-  function o() {
+}, { createApp: ht } = je(gt), wt = (e) => {
+  const t = ht(r);
+  function r() {
     return e && e.default ? e.default() : [];
   }
   return t;
 };
-se(oe);
-const { logWarning: pt } = E(), dt = Te({
-  name: "TresCanvas",
+de(fe);
+const { logWarning: bt } = C(), yt = ue({
+  name: "TresScene",
   props: [
     "shadows",
     "shadowMapType",
@@ -397,31 +428,36 @@ const { logWarning: pt } = E(), dt = Te({
     "windowSize",
     "preset"
   ],
-  setup(e, { slots: t, expose: o }) {
-    e.physicallyCorrectLights === !0 && pt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const r = M(), n = M(), i = new oe.Scene(), { setState: u } = L();
-    u("scene", i), Re(() => {
-      u("renderer", null);
+  setup(e, { slots: t, expose: r }) {
+    e.physicallyCorrectLights === !0 && bt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
+    const a = M(), n = M(), i = new fe.Scene(), { setState: s } = T();
+    s("scene", i), s("canvas", n), s("container", a);
+    const { pushCamera: o } = U();
+    o(new O()), _e(() => {
+      c();
+    }), Be(() => {
+      s("renderer", null);
     });
-    function a() {
-      const { renderer: p } = at(n, r, e), { activeCamera: d } = ue(), { onLoop: m } = U(), { raycaster: w, pointer: v } = de();
-      m(() => {
+    function c() {
+      const { renderer: p } = ut(e), { activeCamera: d } = U(), { onLoop: w } = N(), { raycaster: v, pointer: b } = we();
+      oe(() => {
+        d.value && v.value.setFromCamera(b.value, d.value);
+      }), w(() => {
         var g;
-        d.value && (w.value.setFromCamera(v.value, d.value), (g = p.value) == null || g.render(i, d.value));
+        d.value && ((g = p.value) == null || g.render(i, d.value));
       });
     }
-    O(n, a);
-    let s;
+    let u;
     function l() {
-      s = ft(t), s.provide("useTres", L()), s.provide("extend", se), s.mount(i);
+      u = wt(t), u.provide("useTres", T()), u.provide("extend", de), u.mount(i);
     }
-    return l(), o({
+    return l(), r({
       scene: i
-    }), () => S(
-      S(
+    }), () => E(
+      E(
         "div",
         {
-          ref: r,
+          ref: a,
           "data-scene": i.uuid,
           key: i.uuid,
           style: {
@@ -433,7 +469,7 @@ const { logWarning: pt } = E(), dt = Te({
           }
         },
         [
-          S(
+          E(
             "div",
             {
               style: {
@@ -442,7 +478,7 @@ const { logWarning: pt } = E(), dt = Te({
               }
             },
             [
-              S("canvas", {
+              E("canvas", {
                 ref: n,
                 "data-scene": i.uuid,
                 style: {
@@ -460,26 +496,47 @@ const { logWarning: pt } = E(), dt = Te({
       )
     );
   }
-}), Ct = {
+}), xt = ue({
+  name: "TresCanvas",
+  props: [
+    "shadows",
+    "shadowMapType",
+    "physicallyCorrectLights",
+    "useLegacyLights",
+    "outputEncoding",
+    "toneMapping",
+    "toneMappingExposure",
+    "context",
+    "powerPreference",
+    "preserveDrawingBuffer",
+    "clearColor",
+    "windowSize",
+    "preset"
+  ],
+  setup(e, { slots: t }) {
+    return dt(), () => E(yt, e, t);
+  }
+}), Rt = {
   install(e) {
-    e.component("TresCanvas", dt);
+    e.component("TresCanvas", xt);
   }
 };
 export {
-  Je as CameraType,
-  dt as TresCanvas,
-  $ as catalogue,
-  Ct as default,
-  se as extend,
-  yt as isProd,
-  rt as trasverseObjects,
-  ue as useCamera,
-  wt as useLoader,
-  E as useLogger,
-  de as useRaycaster,
-  U as useRenderLoop,
-  at as useRenderer,
-  Mt as useSeek,
-  ht as useTexture,
-  L as useTres
+  et as CameraType,
+  xt as TresCanvas,
+  H as catalogue,
+  Rt as default,
+  de as extend,
+  Tt as isProd,
+  ft as trasverseObjects,
+  U as useCamera,
+  Et as useLoader,
+  C as useLogger,
+  we as useRaycaster,
+  N as useRenderLoop,
+  ut as useRenderer,
+  Pt as useSeek,
+  St as useTexture,
+  T as useTres,
+  dt as useTresProvider
 };

package/dist/tres.umd.cjs

@@ -1,8 +1,9 @@
 /**
  * name: @tresjs/core
- * version: v2.0.0-alpha.5
+ * version: v2.0.0-beta.0
  * (c) 2023
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(p,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],l):(p=typeof globalThis<"u"?globalThis:p||self,l(p.tres={},p.Vue,p.Three,p.VueUseCore))})(this,function(p,l,f,u){"use strict";function se(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const V=se(f),O=l.ref({uuid:f.MathUtils.generateUUID()}),I=e=>void Object.assign(O.value,e);var J=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(J||{});const ue=45;let C;function W(){const{state:e,setState:t,aspectRatio:a}=M();function r(o="Perspective",s){var d,v,g;if(o==="Perspective"){const{near:h,far:L,fov:w}=s||{near:.1,far:1e3,fov:ue};C=new f.PerspectiveCamera(w,((d=e.aspectRatio)==null?void 0:d.value)||window.innerWidth/window.innerHeight,h,L),(v=e.cameras)==null||v.push(C)}else{const{left:h,right:L,top:w,bottom:y,near:B,far:F}=s||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};C=new f.OrthographicCamera(h,L,w,y,B,F),(g=e.cameras)==null||g.push(C)}return e.camera=C,t("camera",e.camera),C}function n(){var o;e.camera instanceof f.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(o=e.camera)==null||o.updateProjectionMatrix()}function i(o){var s;(s=e.cameras)==null||s.push(o),o instanceof f.PerspectiveCamera&&e.aspectRatio&&(o.aspect=e.aspectRatio.value),o.updateProjectionMatrix(),t("camera",o)}function c(){e.cameras=[]}return l.watchEffect(()=>{a!=null&&a.value&&n()}),{activeCamera:l.toRef(e,"camera"),createCamera:r,updateCamera:n,pushCamera:i,clearCameras:c}}const K=u.createEventHook(),X=u.createEventHook(),z=u.createEventHook(),S=new f.Clock;let U=0,A=0;const{pause:le,resume:ce,isActive:fe}=u.useRafFn(()=>{K.trigger({delta:U,elapsed:A,clock:S}),X.trigger({delta:U,elapsed:A,clock:S}),z.trigger({delta:U,elapsed:A,clock:S})},{immediate:!1});z.on(()=>{U=S.getDelta(),A=S.getElapsedTime()});function j(){return{onBeforeLoop:K.on,onLoop:X.on,onAfterLoop:z.on,pause:le,resume:ce,isActive:fe}}function pe(e){return e instanceof f.Color?e:Array.isArray(e)?new f.Color(...e):new f.Color(e)}const R={realistic:{outputEncoding:f.sRGBEncoding,toneMapping:f.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:f.PCFSoftShadowMap}}},Y=(e,t)=>{for(const a of Object.keys(t))t[a]instanceof Object&&Object.assign(t[a],Y(e[a],t[a]));return Object.assign(e||{},t),e},de=me("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 x(e){return e.replace(/-([a-z])/g,(t,a)=>a.toUpperCase())}function me(e,t){const a=Object.create(null),r=e.split(",");for(let n=0;n<r.length;n++)a[r[n]]=!0;return t?n=>!!a[n.toLowerCase()]:n=>!!a[n]}const m=l.shallowRef(),N=l.ref(!1);function Q(e,t,a){const{alpha:r=!0,antialias:n=!0,depth:i,logarithmicDepthBuffer:c,failIfMajorPerformanceCaveat:o,precision:s,premultipliedAlpha:d,stencil:v,shadows:g=!1,shadowMapType:h=f.PCFShadowMap,physicallyCorrectLights:L=!1,useLegacyLights:w=!1,outputEncoding:y=f.LinearEncoding,toneMapping:B=f.NoToneMapping,toneMappingExposure:F=1,context:Ue=void 0,powerPreference:Ae="default",preserveDrawingBuffer:je=!1,clearColor:k,windowSize:xe=!1,preset:_e=void 0}=l.toRefs(a),{setState:$}=M(),{width:ne,height:ae}=u.resolveUnref(xe)?u.useWindowSize():u.useElementSize(t),{logError:Te}=b(),{pixelRatio:re}=u.useDevicePixelRatio(),{pause:De,resume:Be}=j(),q=l.computed(()=>ne.value/ae.value),oe=()=>{m.value&&(m.value.setSize(ne.value,ae.value),m.value.setPixelRatio(Math.min(re.value,2)))},ie=()=>{if(!m.value)return;const P=u.resolveUnref(_e);if(P){P in R||Te("Renderer Preset must be one of these: "+Object.keys(R).join(", ")),Y(m.value,R[P]);return}m.value.shadowMap.enabled=u.resolveUnref(g),m.value.shadowMap.type=u.resolveUnref(h),m.value.toneMapping=u.resolveUnref(B)||f.NoToneMapping,m.value.toneMappingExposure=u.resolveUnref(F),m.value.outputEncoding=u.resolveUnref(y)||f.LinearEncoding,k!=null&&k.value&&m.value.setClearColor(pe(u.resolveUnref(k))),m.value.useLegacyLights=u.resolveUnref(w)},Fe=()=>{const P=u.unrefElement(e);P&&(m.value=new f.WebGLRenderer({canvas:P,alpha:u.resolveUnref(r),antialias:u.resolveUnref(n),context:u.resolveUnref(Ue),depth:u.resolveUnref(i),failIfMajorPerformanceCaveat:u.resolveUnref(o),logarithmicDepthBuffer:u.resolveUnref(c),powerPreference:u.resolveUnref(Ae),precision:u.resolveUnref(s),stencil:u.resolveUnref(v),preserveDrawingBuffer:u.resolveUnref(je),premultipliedAlpha:u.resolveUnref(d)}),$("renderer",m.value),$("clock",new f.Clock),$("aspectRatio",q),ie(),oe(),Be(),N.value=!0)},Ie=()=>{m.value&&(m.value.dispose(),m.value=void 0,N.value=!1,De())};return l.watch([q,re],oe),l.watch([g,h,y,w,B,F,k],ie),l.watch(()=>[e,t],()=>{u.unrefElement(e)&&u.unrefElement(t)&&Fe()},{immediate:!0,deep:!0}),{renderer:m,isReady:N,dispose:Ie,aspectRatio:q}}const Z=e=>!!e&&e.constructor===Array;function E(e){const t={nodes:{},materials:{}};return e&&e.traverse(a=>{a.name&&(t.nodes[a.name]=a),a.material&&!t.materials[a.material.name]&&(t.materials[a.material.name]=a.material)}),t}async function ve(e,t,a,r,n){const{logError:i}=b(),c=new e;n&&n(c),a&&a(c);const s=(Array.isArray(t)?t:[t]).map(d=>new Promise((v,g)=>{c.load(d,h=>{h.scene&&Object.assign(h,E(h.scene)),v(h)},r,h=>g(i("[useLoader] - Failed to load resource",h)))}));return Z(t)?await Promise.all(s):await s[0]}async function ge(e){const t=new f.LoadingManager,a=new f.TextureLoader(t),r=n=>new Promise((i,c)=>{a.load(n,o=>i(o),()=>null,()=>{c(new Error("[useTextures] - Failed to load texture"))})});if(Z(e)){const n=await Promise.all(e.map(i=>r(i)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:i,normalMap:c,roughnessMap:o,metalnessMap:s,aoMap:d}=e;return{map:n?await r(n):null,displacementMap:i?await r(i):null,normalMap:c?await r(c):null,roughnessMap:o?await r(o):null,metalnessMap:s?await r(s):null,aoMap:d?await r(d):null}}}const he={camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:l.computed(()=>window.innerWidth/window.innerHeight)},_=l.shallowReactive(he);function M(){function e(a){return _[a]}function t(a,r){_[a]=r}return{state:_,...l.toRefs(_),getState:e,setState:t}}const H=l.shallowRef(new f.Raycaster),T=l.ref(new f.Vector2),we=l.ref(null);function G(){const{setState:e}=M();e("raycaster",H.value),e("pointer",T),e("currentInstance",we);function t(a){T.value.x=a.clientX/window.innerWidth*2-1,T.value.y=-(a.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),{raycaster:H,pointer:T}}const ye=!0,ee="[TresJS ▲ ■ ●] ";function b(){function e(r,n){console.error(`${ee} ${r}`,n||"")}function t(r){console.warn(`${ee} ${r}`)}function a(r,n){}return{logError:e,logWarning:t,logMessage:a}}function Ce(){const{logWarning:e}=b();function t(r,n,i){let c=null;return r.traverse(o=>{o[n]===i&&(c=o)}),c||e(`Child with ${n} '${i}' not found.`),c}function a(r,n){return t(r,"name",n)}return{seek:t,seekByName:a}}const{logWarning:Me}=b();function be(e){for(const t in e)if(t.indexOf("on")===0)return!0;return!1}function ze(e){}let D=null;const Le={createElement(e,t,a,r){if(e==="template"||de(e))return null;let n;if(r===null&&(r={}),r!=null&&r.args?n=new O.value[e.replace("Tres","")](...r.args):n=new O.value[e.replace("Tres","")],n.isCamera){(!(r!=null&&r.position)||r!=null&&r.position.every(c=>c==0))&&Me("Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗");const{pushCamera:i}=W();i(n)}return(r==null?void 0:r.attach)===void 0&&(n.isMaterial?n.attach="material":n.isBufferGeometry&&(n.attach="geometry")),n},insert(e,t,a){if(D===null&&t.isScene&&(D=t),t===null&&(t=D),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const o=a?t.children.indexOf(a):0;e.parent=t,t.children.splice(o,0,e),e.dispatchEvent({type:"added"})}else typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e));const{onLoop:r}=j();let n=null,i=null;const{raycaster:c}=G();e&&e instanceof f.Mesh&&be(e)&&(r(()=>{var o,s,d;if(t!=null&&t.children&&e&&c){const v=c.value.intersectObjects(t.children);v.length>0&&v[0].object.uuid===e.uuid?(i=v[0],(n===null||n.object.uuid!==(i==null?void 0:i.object.uuid))&&((o=e.onPointerEnter)==null||o.call(e,i)),(s=e.onPointerMove)==null||s.call(e,i)):(i=null,n!==null&&((d=e.onPointerLeave)==null||d.call(e,n))),n=i}}),u.useEventListener(window,"click",()=>{var o;i!==null&&((o=e.onClick)==null||o.call(e,i))}))},remove(e){if(!e)return;const t=e.parentNode;t&&t.removeChild(e)},patchProp(e,t,a,r){if(e){let n=e,i=t;const c=x(i);let o=n==null?void 0:n[c];if(e.parent||(e.parent=D),n.type==="BufferGeometry"&&(i=i.split("-").pop(),n.setAttribute(x(i),new f.BufferAttribute(...r))),i.includes("-")&&o===void 0){const d=i.split("-");o=d.reduce((v,g)=>v[x(g)],n),i=d.pop(),o!=null&&o.set||(n=d.reduce((v,g)=>v[x(g)],n))}let s=r;if(s===""&&(s=!0),u.isFunction(o)){Array.isArray(s)?e[c](...s):e[c](s);return}!(o!=null&&o.set)&&!u.isFunction(o)?n[c]=s:o.constructor===s.constructor&&(o!=null&&o.copy)?o==null||o.copy(s):Array.isArray(s)?o.set(...s):!o.isColor&&o.setScalar?o.setScalar(s):o.set(s)}},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:Pe}=l.createRenderer(Le),Se=e=>{const t=Pe(a);function a(){return e&&e.default?e.default():[]}return t};I(V);const{logWarning:ke}=b(),te=l.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:a}){e.physicallyCorrectLights===!0&&ke("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const r=l.ref(),n=l.ref(),i=new V.Scene,{setState:c}=M();c("scene",i),l.onUnmounted(()=>{c("renderer",null)});function o(){const{renderer:v}=Q(n,r,e),{activeCamera:g}=W(),{onLoop:h}=j(),{raycaster:L,pointer:w}=G();h(()=>{var y;g.value&&(L.value.setFromCamera(w.value,g.value),(y=v.value)==null||y.render(i,g.value))})}l.watch(n,o);let s;function d(){s=Se(t),s.provide("useTres",M()),s.provide("extend",I),s.mount(i)}return d(),a({scene:i}),()=>l.h(l.h("div",{ref:r,"data-scene":i.uuid,key:i.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[l.h("div",{style:{width:"100%",height:"100%"}},[l.h("canvas",{ref:n,"data-scene":i.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),Oe={install(e){e.component("TresCanvas",te)}};p.CameraType=J,p.TresCanvas=te,p.catalogue=O,p.default=Oe,p.extend=I,p.isProd=ye,p.trasverseObjects=E,p.useCamera=W,p.useLoader=ve,p.useLogger=b,p.useRaycaster=G,p.useRenderLoop=j,p.useRenderer=Q,p.useSeek=Ce,p.useTexture=ge,p.useTres=M,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(d,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],i):(d=typeof globalThis<"u"?globalThis:d||self,i(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,i,l,c){"use strict";function le(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const q=le(l),U=i.ref({uuid:l.MathUtils.generateUUID()}),W=e=>void Object.assign(U.value,e);var V=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(V||{});const de=45;let M;function A(){const{state:e,setState:t,aspectRatio:r}=L();function a(o="Perspective",u){var p,m,h;if(o==="Perspective"){const{near:g,far:x,fov:w}=u||{near:.1,far:1e3,fov:de};M=new l.PerspectiveCamera(w,((p=e.aspectRatio)==null?void 0:p.value)||window.innerWidth/window.innerHeight,g,x),(m=e.cameras)==null||m.push(M)}else{const{left:g,right:x,top:w,bottom:S,near:y,far:F}=u||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};M=new l.OrthographicCamera(g,x,w,S,y,F),(h=e.cameras)==null||h.push(M)}return e.camera=M,t("camera",e.camera),M}function n(){var o;e.camera instanceof l.PerspectiveCamera&&e.aspectRatio&&(e.camera.aspect=e.aspectRatio.value),(o=e.camera)==null||o.updateProjectionMatrix()}function s(o){var u;(u=e.cameras)==null||u.push(o),o instanceof l.PerspectiveCamera&&e.aspectRatio&&(o.aspect=e.aspectRatio.value),o.updateProjectionMatrix(),t("camera",o)}function f(){e.cameras=[]}return i.watchEffect(()=>{r!=null&&r.value&&n()}),{activeCamera:i.toRef(e,"camera"),createCamera:a,updateCamera:n,pushCamera:s,clearCameras:f}}const Y=c.createEventHook(),K=c.createEventHook(),I=c.createEventHook(),k=new l.Clock;let T=0,j=0;const{pause:pe,resume:me,isActive:ge}=c.useRafFn(()=>{Y.trigger({delta:T,elapsed:j,clock:k}),K.trigger({delta:T,elapsed:j,clock:k}),I.trigger({delta:T,elapsed:j,clock:k})},{immediate:!1});I.on(()=>{T=k.getDelta(),j=k.getElapsedTime()});function _(){return{onBeforeLoop:Y.on,onLoop:K.on,onAfterLoop:I.on,pause:pe,resume:me,isActive:ge}}function ve(e){return e instanceof l.Color?e:Array.isArray(e)?new l.Color(...e):new l.Color(e)}const R={realistic:{outputEncoding:l.sRGBEncoding,toneMapping:l.ACESFilmicToneMapping,toneMappingExposure:3,shadowMap:{enabled:!0,type:l.PCFSoftShadowMap}}},X=(e,t)=>{for(const r of Object.keys(t))t[r]instanceof Object&&Object.assign(t[r],X(e[r],t[r]));return Object.assign(e||{},t),e},he=we("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 D(e){return e.replace(/-([a-z])/g,(t,r)=>r.toUpperCase())}function we(e,t){const r=Object.create(null),a=e.split(",");for(let n=0;n<a.length;n++)r[a[n]]=!0;return t?n=>!!r[n.toLowerCase()]:n=>!!r[n]}function J(e){var fe,ue;const t=i.shallowRef(),r=i.ref(!1),{alpha:a=!0,antialias:n=!0,depth:s,logarithmicDepthBuffer:f,failIfMajorPerformanceCaveat:o,precision:u,premultipliedAlpha:p,stencil:m,shadows:h=!1,shadowMapType:g=l.PCFShadowMap,physicallyCorrectLights:x=!1,useLegacyLights:w=!1,outputEncoding:S=l.LinearEncoding,toneMapping:y=l.NoToneMapping,toneMappingExposure:F=1,context:_e=void 0,powerPreference:De="default",preserveDrawingBuffer:ze=!1,clearColor:O,windowSize:ae=!1,preset:Be=void 0}=i.toRefs(e),{state:C,setState:G}=L(),{width:re,height:oe}=c.resolveUnref(ae)?c.useWindowSize():c.useElementSize(C.container),{logError:Fe,logWarning:We}=b(),{pixelRatio:se}=c.useDevicePixelRatio(),{pause:Ie,resume:Re}=_(),$=i.computed(()=>re.value/oe.value);!c.resolveUnref(ae)&&((ue=(fe=C.container)==null?void 0:fe.value)==null?void 0:ue.offsetHeight)===0&&We(`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 ie=()=>{t.value&&(t.value.setSize(re.value,oe.value),t.value.setPixelRatio(Math.min(se.value,2)))},ce=()=>{if(!t.value)return;const P=c.resolveUnref(Be);if(P){P in R||Fe("Renderer Preset must be one of these: "+Object.keys(R).join(", ")),X(t.value,R[P]);return}t.value.shadowMap.enabled=c.resolveUnref(h),t.value.shadowMap.type=c.resolveUnref(g),t.value.toneMapping=c.resolveUnref(y)||l.NoToneMapping,t.value.toneMappingExposure=c.resolveUnref(F),t.value.outputEncoding=c.resolveUnref(S)||l.LinearEncoding,O!=null&&O.value&&t.value.setClearColor(ve(c.resolveUnref(O))),t.value.useLegacyLights=c.resolveUnref(w)},Ne=()=>{const P=c.unrefElement(C.canvas);P&&(t.value=new l.WebGLRenderer({canvas:P,alpha:c.resolveUnref(a),antialias:c.resolveUnref(n),context:c.resolveUnref(_e),depth:c.resolveUnref(s),failIfMajorPerformanceCaveat:c.resolveUnref(o),logarithmicDepthBuffer:c.resolveUnref(f),powerPreference:c.resolveUnref(De),precision:c.resolveUnref(u),stencil:c.resolveUnref(m),preserveDrawingBuffer:c.resolveUnref(ze),premultipliedAlpha:c.resolveUnref(p)}),G("renderer",t.value),G("clock",new l.Clock),G("aspectRatio",$),ce(),ie(),Re(),r.value=!0)},Ge=()=>{t.value&&(t.value.dispose(),t.value=void 0,r.value=!1,Ie())};return i.watch([$,se],ie),i.watch([h,g,S,w,y,F,O],ce),i.watch(()=>[C.canvas,C.container],()=>{c.unrefElement(C.canvas)&&c.unrefElement(C.container)&&Ne()},{immediate:!0,deep:!0}),{renderer:t,isReady:r,dispose:Ge,aspectRatio:$}}const Q=e=>!!e&&e.constructor===Array;function Z(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 be(e,t,r,a,n){const{logError:s}=b(),f=new e;n&&n(f),r&&r(f);const u=(Array.isArray(t)?t:[t]).map(p=>new Promise((m,h)=>{f.load(p,g=>{g.scene&&Object.assign(g,Z(g.scene)),m(g)},a,g=>h(s("[useLoader] - Failed to load resource",g)))}));return Q(t)?await Promise.all(u):await u[0]}async function ye(e){const t=new l.LoadingManager,r=new l.TextureLoader(t),a=n=>new Promise((s,f)=>{r.load(n,o=>s(o),()=>null,()=>{f(new Error("[useTextures] - Failed to load texture"))})});if(Q(e)){const n=await Promise.all(e.map(s=>a(s)));return e.length>1?n:n[0]}else{const{map:n,displacementMap:s,normalMap:f,roughnessMap:o,metalnessMap:u,aoMap:p,alphaMap:m,matcap:h}=e;return{map:n?await a(n):null,displacementMap:s?await a(s):null,normalMap:f?await a(f):null,roughnessMap:o?await a(o):null,metalnessMap:u?await a(u):null,aoMap:p?await a(p):null,alphaMap:m?await a(m):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 Ce(){const e=Math.random()*4294967295|0,t=Math.random()*4294967295|0,r=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[r&63|128]+v[r>>8&255]+"-"+v[r>>16&255]+v[r>>24&255]+v[a&255]+v[a>>8&255]+v[a>>16&255]+v[a>>24&255]).toLowerCase()}const E=Symbol();function H(){const e=i.shallowReactive({uuid:Ce(),camera:void 0,cameras:[],scene:void 0,renderer:void 0,aspectRatio:i.computed(()=>window.innerWidth/window.innerHeight)});function t(n){return e[n]}function r(n,s){e[n]=s}const a={state:e,...i.toRefs(e),getState:t,setState:r};return i.provide(E,a),a}const L=()=>{const e=i.inject(E),{logError:t}=b();return e||t("useTres must be used together with useTresProvider"),e},ee=i.shallowRef(new l.Raycaster),z=i.ref(new l.Vector2),Me=i.ref(null);function N(){const{setState:e}=L();e("raycaster",ee.value),e("pointer",z),e("currentInstance",Me);function t(r){z.value.x=r.clientX/window.innerWidth*2-1,z.value.y=-(r.clientY/window.innerHeight)*2+1}return window.addEventListener("pointermove",t),{raycaster:ee,pointer:z}}const Le=!0,te="[TresJS ▲ ■ ●] ";function b(){function e(a,n){console.error(`${te} ${a}`,n||"")}function t(a){console.warn(`${te} ${a}`)}function r(a,n){}return{logError:e,logWarning:t,logMessage:r}}function xe(){const{logWarning:e}=b();function t(a,n,s){let f=null;return a.traverse(o=>{o[n]===s&&(f=o)}),f||e(`Child with ${n} '${s}' not found.`),f}function r(a,n){return t(a,"name",n)}return{seek:t,seekByName:r}}const{logWarning:Se}=b();function Pe(e){for(const t in e)if(t.indexOf("on")===0)return!0;return!1}function qe(e){}let B=null;const ke={createElement(e,t,r,a){if(e==="template"||he(e))return null;let n;if(a===null&&(a={}),a!=null&&a.args?n=new U.value[e.replace("Tres","")](...a.args):n=new U.value[e.replace("Tres","")],n.isCamera){(!(a!=null&&a.position)||a!=null&&a.position.every(f=>f==0))&&Se("Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗");const{pushCamera:s}=A();s(n)}return(a==null?void 0:a.attach)===void 0&&(n.isMaterial?n.attach="material":n.isBufferGeometry&&(n.attach="geometry")),n},insert(e,t,r){if(B===null&&t.isScene&&(B=t),t===null&&(t=B),t!=null&&t.isObject3D&&(e!=null&&e.isObject3D)){const f=r?t.children.indexOf(r):0;e.parent=t,t.children.splice(f,0,e),e.dispatchEvent({type:"added"})}else typeof(e==null?void 0:e.attach)=="string"&&(e.__previousAttach=e[t==null?void 0:t.attach],t&&(t[e.attach]=e));const{onLoop:a}=_();let n=null,s=null;if(e&&e instanceof l.Mesh&&Pe(e)){const{raycaster:f}=N();a(()=>{var o,u,p;if(t!=null&&t.children&&e&&f){const m=f.value.intersectObjects(t.children);m.length>0&&m[0].object.uuid===e.uuid?(s=m[0],(n===null||n.object.uuid!==(s==null?void 0:s.object.uuid))&&((o=e.onPointerEnter)==null||o.call(e,s)),(u=e.onPointerMove)==null||u.call(e,s)):(s=null,n!==null&&((p=e.onPointerLeave)==null||p.call(e,n))),n=s}}),c.useEventListener(window,"click",()=>{var o;s!==null&&((o=e.onClick)==null||o.call(e,s))})}},remove(e){if(!e)return;const t=e.parentNode;t&&t.removeChild(e)},patchProp(e,t,r,a){if(e){let n=e,s=t;const f=D(s);let o=n==null?void 0:n[f];if(e.parent||(e.parent=B),n.type==="BufferGeometry"){n.setAttribute(D(s),new l.BufferAttribute(...a));return}if(s.includes("-")&&o===void 0){const p=s.split("-");o=p.reduce((m,h)=>m[D(h)],n),s=p.pop(),o!=null&&o.set||(n=p.reduce((m,h)=>m[D(h)],n))}let u=a;if(u===""&&(u=!0),c.isFunction(o)){Array.isArray(u)?e[f](...u):e[f](u);return}!(o!=null&&o.set)&&!c.isFunction(o)?n[f]=u:o.constructor===u.constructor&&(o!=null&&o.copy)?o==null||o.copy(u):Array.isArray(u)?o.set(...u):!o.isColor&&o.setScalar?o.setScalar(u):o.set(u)}},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:Oe}=i.createRenderer(ke),Ue=e=>{const t=Oe(r);function r(){return e&&e.default?e.default():[]}return t};W(q);const{logWarning:Ae}=b(),Te=i.defineComponent({name:"TresScene",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t,expose:r}){e.physicallyCorrectLights===!0&&Ae("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");const a=i.ref(),n=i.ref(),s=new q.Scene,{setState:f}=L();f("scene",s),f("canvas",n),f("container",a);const{pushCamera:o}=A();o(new l.PerspectiveCamera),i.onMounted(()=>{u()}),i.onUnmounted(()=>{f("renderer",null)});function u(){const{renderer:h}=J(e),{activeCamera:g}=A(),{onLoop:x}=_(),{raycaster:w,pointer:S}=N();i.watchEffect(()=>{g.value&&w.value.setFromCamera(S.value,g.value)}),x(()=>{var y;g.value&&((y=h.value)==null||y.render(s,g.value))})}let p;function m(){p=Ue(t),p.provide("useTres",L()),p.provide("extend",W),p.mount(s)}return m(),r({scene:s}),()=>i.h(i.h("div",{ref:a,"data-scene":s.uuid,key:s.uuid,style:{position:"relative",width:"100%",height:"100%",pointerEvents:"auto",touchAction:"none"}},[i.h("div",{style:{width:"100%",height:"100%"}},[i.h("canvas",{ref:n,"data-scene":s.uuid,style:{display:"block",width:"100%",height:"100%",position:e.windowSize?"fixed":"absolute",top:0,left:0}})])]))}}),ne=i.defineComponent({name:"TresCanvas",props:["shadows","shadowMapType","physicallyCorrectLights","useLegacyLights","outputEncoding","toneMapping","toneMappingExposure","context","powerPreference","preserveDrawingBuffer","clearColor","windowSize","preset"],setup(e,{slots:t}){return H(),()=>i.h(Te,e,t)}}),je={install(e){e.component("TresCanvas",ne)}};d.CameraType=V,d.TresCanvas=ne,d.catalogue=U,d.default=je,d.extend=W,d.isProd=Le,d.trasverseObjects=Z,d.useCamera=A,d.useLoader=be,d.useLogger=b,d.useRaycaster=N,d.useRenderLoop=_,d.useRenderer=J,d.useSeek=xe,d.useTexture=ye,d.useTres=L,d.useTresProvider=H,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/utils/normalize.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-beta.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -40,7 +40,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "playground": "cd playground && nr dev",
+    "playground": "cd playground && npm run dev",
     "test": "vitest",
     "test:ci": "vitest run",
     "test:ui": "vitest --ui",
@@ -56,11 +56,13 @@
     "vue": "^3.2.47"
   },
   "dependencies": {
+    "-": "^0.0.1",
     "@alvarosabu/utils": "^2.3.0",
     "@vueuse/core": "^9.13.0"
   },
   "devDependencies": {
     "@alvarosabu/prettier-config": "^1.2.0",
+    "@huntersofbook/plausible-vue": "^1.0.0",
     "@release-it/conventional-changelog": "^5.1.1",
     "@stackblitz/sdk": "^1.8.1",
     "@tresjs/cientos": "2.0.0-alpha.5",
@@ -87,10 +89,10 @@
     "three": "latest",
     "unocss": "^0.48.0",
     "unplugin": "^1.3.1",
+    "unplugin-vue-components": "^0.24.1",
     "vite": "^4.1.4",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.1.0",
-    "vite-plugin-glsl": "^1.1.2",
     "vite-plugin-inspect": "^0.7.16",
     "vite-plugin-require-transform": "^1.0.9",
     "vite-svg-loader": "^4.0.0",