@tresjs/core 0.3.0 → 0.4.0

package/dist/composables/useLogger.d.ts

@@ -1,6 +1,6 @@
 export declare const isProd: boolean;
 interface LoggerComposition {
-    logError: (message: string, error: Error) => void;
+    logError: (message: string, error?: Error | ErrorEvent) => void;
     logWarning: (message: string) => void;
     logMessage: (name: string, value: any) => void;
 }

package/dist/core/index.d.ts

@@ -1,9 +1,9 @@
-export * from './useCamera/useCamera';
-export * from './useCatalog/useCatalog';
-export * from './useInstanceCreator/useInstanceCreator';
-export * from './useLoop/useLoop';
-export * from './useRenderer/useRenderer';
-export * from './useScene/useScene';
-export * from './useLoader/useLoader';
-export * from './useTexture/useTexture';
+export * from './useCamera';
+export * from './useCatalog';
+export * from './useInstanceCreator';
+export * from './useRenderLoop/';
+export * from './useRenderer/';
+export * from './useScene/';
+export * from './useLoader';
+export * from './useTexture';
 export * from './useTres';

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

@@ -0,0 +1,15 @@
+import { EventHookOn, Fn } from '@vueuse/core';
+import { Ref } from 'vue';
+export interface RenderLoop {
+    delta: number;
+    elapsed: number;
+}
+export interface UseRenderLoopReturn {
+    onBeforeLoop: EventHookOn<RenderLoop>;
+    onLoop: EventHookOn<RenderLoop>;
+    onAfterLoop: EventHookOn<RenderLoop>;
+    pause: Fn;
+    resume: Fn;
+    isActive: Ref<boolean>;
+}
+export declare function useRenderLoop(): UseRenderLoopReturn;

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

@@ -0,0 +1,37 @@
+import { ShadowMapType, TextureEncoding, ToneMapping } from 'three';
+import { PropType } from 'vue';
+/**
+ * Vue component for rendering a Tres component.
+ */
+export declare const TresCanvas: import("vue").DefineComponent<{
+    shadows: BooleanConstructor;
+    shadowMapType: PropType<ShadowMapType>;
+    physicallyCorrectLights: BooleanConstructor;
+    outputEncoding: PropType<TextureEncoding>;
+    toneMapping: PropType<ToneMapping>;
+    toneMappingExposure: NumberConstructor;
+    context: PropType<WebGLRenderingContext>;
+    powerPreference: PropType<"high-performance" | "low-power" | "default">;
+    preserveDrawingBuffer: BooleanConstructor;
+    clearColor: StringConstructor;
+    windowSize: BooleanConstructor;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    shadows: BooleanConstructor;
+    shadowMapType: PropType<ShadowMapType>;
+    physicallyCorrectLights: BooleanConstructor;
+    outputEncoding: PropType<TextureEncoding>;
+    toneMapping: PropType<ToneMapping>;
+    toneMappingExposure: NumberConstructor;
+    context: PropType<WebGLRenderingContext>;
+    powerPreference: PropType<"high-performance" | "low-power" | "default">;
+    preserveDrawingBuffer: BooleanConstructor;
+    clearColor: StringConstructor;
+    windowSize: BooleanConstructor;
+}>>, {
+    shadows: boolean;
+    physicallyCorrectLights: boolean;
+    preserveDrawingBuffer: boolean;
+    windowSize: boolean;
+}>;

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

@@ -0,0 +1,81 @@
+import { MaybeComputedRef, MaybeElementRef } from '@vueuse/core';
+import { WebGLRendererParameters, WebGLRenderer, ShadowMapType } from 'three';
+import type { TextureEncoding, ToneMapping } from 'three';
+export interface UseRendererOptions extends WebGLRendererParameters {
+    /**
+     * Enable shadows in the Renderer
+     *
+     * @default false
+     */
+    shadows?: MaybeComputedRef<boolean>;
+    /**
+     * Set the shadow map type
+     *
+     * @default PCFSoftShadowMap
+     */
+    shadowMapType?: MaybeComputedRef<ShadowMapType>;
+    /**
+     * Whether to use physically correct lighting mode.
+     * See the [lights / physical example](https://threejs.org/examples/#webgl_lights_physical).
+     *
+     * @default false
+     */
+    physicallyCorrectLights?: MaybeComputedRef<boolean>;
+    /**
+     * Defines the output encoding of the renderer.
+     *
+     * @default LinearEncoding
+     */
+    outputEncoding?: MaybeComputedRef<TextureEncoding>;
+    /**
+     * Defines the tone mapping used by the renderer.
+     *
+     * @default NoToneMapping
+     */
+    toneMapping?: MaybeComputedRef<ToneMapping>;
+    /**
+     * Defines the tone mapping exposure used by the renderer.
+     *
+     * @default 1
+     */
+    toneMappingExposure?: MaybeComputedRef<number>;
+    /**
+     * The context used by the renderer.
+     *
+     * @default undefined
+     */
+    context?: WebGLRenderingContext | undefined;
+    /**
+     * Provides a hint to the user agent indicating what configuration of GPU is suitable for this WebGL context.
+     * Can be "high-performance", "low-power" or "default".
+     *
+     * @default "default"
+     */
+    powerPreference?: 'high-performance' | 'low-power' | 'default';
+    /**
+     * Whether to preserve the buffers until manually cleared or overwritten.
+     *
+     * @default false
+     */
+    preserveDrawingBuffer?: boolean;
+    /**
+     * The color value to use when clearing the canvas.
+     *
+     * @default 0x000000
+     */
+    clearColor?: MaybeComputedRef<string | number>;
+    windowSize?: MaybeComputedRef<boolean>;
+}
+/**
+ * Reactive Three.js WebGLRenderer instance
+ *
+ * @param canvas
+ * @param options
+ */
+export declare function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef, options: UseRendererOptions): {
+    renderer: import("vue").ShallowRef<WebGLRenderer | undefined>;
+    isReady: import("vue").Ref<boolean>;
+    dispose: () => void;
+    aspectRatio: import("vue").ComputedRef<number>;
+};
+export declare type UseRendererReturn = ReturnType<typeof useRenderer>;

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

@@ -0,0 +1,6 @@
+/**
+ * Vue component for rendering a Tres component.
+ */
+export declare const Scene: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;

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

@@ -0,0 +1,4 @@
+import { Scene } from 'three';
+export declare function useScene(): {
+    scene: import("vue").ShallowRef<Scene>;
+};

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import { App } from 'vue';
 export * from './core';
-export * as TresCanvas from './components/TresCanvas.vue';
 export * from './keys';
 export interface TresPlugin {
     [key: string]: any;

package/dist/tres.js

@@ -1,31 +1,31 @@
 /**
  * name: @tresjs/core
- * version: v0.3.0
+ * version: v0.4.0
  * (c) 2022
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { computed as v, watch as F, ref as L, defineComponent as J, reactive as ee, toRefs as te, useSlots as re, useAttrs as ne, provide as ae, onMounted as oe, onBeforeUnmount as se, openBlock as _, createElementBlock as j, normalizeStyle as V, unref as U, createElementVNode as ce, createBlock as ie, Suspense as le, withCtx as ue, renderSlot as W, createCommentVNode as D, Fragment as fe } from "vue";
-import * as pe from "three";
-import { PerspectiveCamera as B, OrthographicCamera as de, Vector3 as me, Color as A, Scene as ge, Clock as he, LoadingManager as we, TextureLoader as ye, WebGLRenderer as Ce, PCFSoftShadowMap as Me, sRGBEncoding as Se } from "three";
-import { useWindowSize as K } from "@vueuse/core";
-var E = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(E || {});
-const R = {
+import { computed as F, watch as R, inject as Q, defineComponent as _, shallowRef as $, ref as O, reactive as le, toRefs as fe, provide as T, onBeforeUnmount as me, h as G } from "vue";
+import { useWindowSize as X, createEventHook as U, useRafFn as de, useElementSize as ge, useDevicePixelRatio as he, unrefElement as A, resolveUnref as v } from "@vueuse/core";
+import * as we from "three";
+import { PerspectiveCamera as I, OrthographicCamera as Ce, Color as z, Vector3 as ve, Clock as Me, Scene as Se, LoadingManager as Y, TextureLoader as ye, PCFShadowMap as xe, LinearEncoding as Ee, NoToneMapping as Pe, WebGLRenderer as Le } from "three";
+var Re = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Re || {});
+const P = {
   cameras: []
-}, xe = 45;
-let x;
-function z() {
-  const { width: e, height: t } = K();
-  function u(o = "Perspective", a) {
-    if (o === "Perspective") {
-      const { near: p, far: g, fov: f } = a || {
+}, Te = 45;
+let y;
+function Z() {
+  const { width: e, height: t } = X();
+  function a(s = "Perspective", i) {
+    if (s === "Perspective") {
+      const { near: l, far: d, fov: m } = i || {
         near: 0.1,
         far: 1e3,
-        fov: xe
+        fov: Te
       };
-      x = new B(f, r.value, p, g), R.cameras.push(x);
+      y = new I(m, r.value, l, d), P.cameras.push(y);
     } else {
-      const { left: p, right: g, top: f, bottom: w, near: S, far: h } = a || {
+      const { left: l, right: d, top: m, bottom: h, near: M, far: S } = i || {
         left: -100,
         right: 100,
         top: 100,
@@ -33,328 +33,323 @@ function z() {
         near: 0.1,
         far: 1e3
       };
-      x = new de(p, g, f, w, S, h), R.cameras.push(x);
+      y = new Ce(l, d, m, h, M, S), P.cameras.push(y);
     }
-    return R.cameras.push(x), x;
+    return P.cameras.push(y), y;
   }
-  const r = v(() => e.value / t.value), n = v(() => R.cameras[0]);
-  function s() {
-    n.value instanceof B && (n.value.aspect = r.value), n.value.updateProjectionMatrix();
+  const r = F(() => e.value / t.value), n = F(() => P.cameras[0]);
+  function o() {
+    n.value instanceof I && (n.value.aspect = r.value), n.value.updateProjectionMatrix();
   }
-  function c(o) {
-    R.cameras.push(o), o instanceof B && (o.aspect = r.value), o.updateProjectionMatrix();
+  function p(s) {
+    const i = Q("camera");
+    s && i && (i.value = s), P.cameras.push(s), s instanceof I && (s.aspect = r.value), s.updateProjectionMatrix();
   }
-  return F(r, s), {
+  return R(r, o), {
     activeCamera: n,
-    createCamera: u,
-    updateCamera: s,
-    pushCamera: c
+    createCamera: a,
+    updateCamera: o,
+    pushCamera: p
   };
 }
-let I = { ...pe };
-function Re() {
+let b = { ...we };
+delete b.Scene;
+function be() {
   return {
     extend: (t) => {
-      I = Object.assign(I, t);
+      b = Object.assign(b, t);
     },
-    catalogue: I
+    catalogue: b
   };
 }
-const Pe = (e) => typeof e < "u", Q = (e) => !!e && e.constructor === Array;
-function X(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof me ? [e.x, e.y, e.z] : e;
+const Oe = (e) => typeof e < "u", k = (e) => !!e && e.constructor === Array;
+function je(e) {
+  return typeof e == "number" ? [e, e, e] : e instanceof ve ? [e.x, e.y, e.z] : e;
 }
-function Ee(e) {
-  return e instanceof A ? e : Array.isArray(e) ? new A(...e) : new A(e);
+function J(e) {
+  return e instanceof z ? e : Array.isArray(e) ? new z(...e) : new z(e);
 }
 const q = "[TresJS \u25B2 \u25A0 \u25CF] ";
-function $() {
+function ee() {
   function e(r, n) {
-    console.error(`${q} ${r}`, n);
+    console.error(`${q} ${r}`, n || "");
   }
   function t(r) {
     console.warn(`${q} ${r}`);
   }
-  function u(r, n) {
+  function a(r, n) {
   }
   return {
     logError: e,
     logWarning: t,
-    logMessage: u
+    logMessage: a
   };
 }
-const P = new ge(), k = L(!1);
-function b() {
-  const { logMessage: e } = $();
-  function t() {
-    P == null || P.clear(), k.value = !k.value, e("clear Scene", P);
-  }
-  return {
-    isSceneReset: k,
-    clearScene: t,
-    scene: P
-  };
-}
-const Te = ["rotation", "scale", "position"];
-function Le() {
-  const { catalogue: e } = Re(), { logMessage: t, logError: u } = $();
+const Be = ["rotation", "scale", "position"];
+function Ae() {
+  const { catalogue: e } = be(), { logMessage: t, logError: a } = ee();
   function r() {
-    return Object.entries(e).filter(([n, s]) => {
-      var c, o;
-      return (o = (c = s == null ? void 0 : s.prototype) == null ? void 0 : c.constructor) == null ? void 0 : o.toString().includes("class");
-    }).map(([n, s]) => {
-      const c = J({
+    return Object.entries(e).filter(([n, o]) => {
+      var p, s;
+      return (s = (p = o == null ? void 0 : o.prototype) == null ? void 0 : p.constructor) == null ? void 0 : s.toString().includes("class");
+    }).map(([n, o]) => {
+      const p = _({
         name: n,
-        setup(o, { slots: a, attrs: p, ...g }) {
+        setup(s, { slots: i, attrs: l, ...d }) {
           t(n, {
-            props: o,
-            slots: a,
-            attrs: p,
-            ctx: g
+            props: s,
+            slots: i,
+            attrs: l,
+            ctx: d
           });
-          let f;
-          const { scene: w } = b(), { pushCamera: S } = z();
-          function h() {
-            if ((a == null ? void 0 : a.default) && (a == null ? void 0 : a.default())) {
-              const M = a.default().map((i) => {
-                var m;
-                let y;
-                return (m = i == null ? void 0 : i.props) != null && m.args ? y = new e[i.type.name](...i.props.args) : y = new e[i.type.name](), i != null && i.props && d(i.props, y), y;
+          let m;
+          const { scene: h } = oe(), { pushCamera: M } = Z();
+          function S() {
+            if ((i == null ? void 0 : i.default) && (i == null ? void 0 : i.default())) {
+              const C = i.default().map((c) => {
+                var f;
+                let w;
+                return (f = c == null ? void 0 : c.props) != null && f.args ? w = new e[c.type.name](...c.props.args) : w = new e[c.type.name](), c != null && c.props && x(c.props, w), w;
               });
-              f = new s(...M);
+              m = new o(...C);
             } else
-              p.args ? f = new s(...p.args) : f = new s();
-            d(p, f), n === "PerspectiveCamera" || n === "OrtographicCamera" ? S(f) : w == null || w.add(f), t("Instance added", w), g.expose(f);
+              l.args ? m = new o(...l.args) : m = new o();
+            x(l, m), n === "PerspectiveCamera" || n === "OrtographicCamera" ? M(m) : h == null || h.value.add(m), t("Instance added", h), d.expose(m);
           }
-          function d(M, i) {
-            Object.entries(M).forEach(([y, m]) => {
-              const C = y.replace(/(-\w)/g, (O) => O[1].toUpperCase());
-              if (!(C === "args" || m === void 0)) {
-                Te.includes(y) && m && (m = X(m));
+          function x(C, c) {
+            Object.entries(C).forEach(([w, f]) => {
+              const g = w.replace(/(-\w)/g, (E) => E[1].toUpperCase());
+              if (!(g === "args" || f === void 0)) {
+                Be.includes(w) && f && (f = je(f));
                 try {
-                  i[C] && Pe(i[C].set) ? Q(m) ? i[C].set(...m) : i[C].set(m) : (m === "" && (m = !0), i[C] = m);
-                } catch (O) {
-                  u(`There was an error setting ${C} property`, O);
+                  c[g] && Oe(c[g].set) ? k(f) ? c[g].set(...f) : c[g].set(f) : (f === "" && (f = !0), c[g] = f);
+                } catch (E) {
+                  a(`There was an error setting ${g} property`, E);
                 }
               }
-            }), M.ref && (M.ref = i);
+            }), C.ref && (C.ref = c);
           }
-          return h(), () => {
+          return S(), () => {
           };
         }
       });
-      return [n, c];
+      return [n, p];
     });
   }
   return {
     createComponentInstances: r
   };
 }
-let G;
-function N(e, t, u) {
-  const r = new he(), { scene: n } = b(), s = () => {
-    const o = r.getElapsedTime(), a = r.getDelta();
-    n && (t && t(a, o), e(a, o), u && u(a, o)), G = requestAnimationFrame(s);
+const te = U(), ne = U(), re = U(), K = new Me(), { pause: Ie, resume: ze, isActive: De } = de(
+  () => {
+    const e = K.getElapsedTime(), t = K.getDelta();
+    te.trigger({ delta: t, elapsed: e }), ne.trigger({ delta: t, elapsed: e }), re.trigger({ delta: t, elapsed: e });
+  },
+  { immediate: !1 }
+);
+function ae() {
+  return {
+    onBeforeLoop: te.on,
+    onLoop: ne.on,
+    onAfterLoop: re.on,
+    pause: Ie,
+    resume: ze,
+    isActive: De
   };
-  s();
-  function c() {
-    cancelAnimationFrame(G);
-  }
+}
+const Fe = $(new Se());
+function oe() {
   return {
-    disposeLoop: c
+    scene: Fe
   };
 }
-function be() {
-  const e = new we(), t = L(e);
+function Ne() {
+  const e = new Y(), t = O(e);
   return { loadingManager: e, loadingManagerRef: t };
 }
-async function Ie(e) {
-  const { loadingManager: t } = be(), u = new ye(t), r = (n) => new Promise((s, c) => {
-    u.load(
+async function Ge(e) {
+  const t = new Y(), a = new ye(t), r = (n) => new Promise((o, p) => {
+    a.load(
       n,
-      (o) => s(o),
+      (s) => o(s),
       () => null,
       () => {
-        c(new Error("[useTextures] - Failed to load texture"));
+        p(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (Q(e)) {
-    const n = await Promise.all(e.map((s) => r(s)));
+  if (k(e)) {
+    const n = await Promise.all(e.map((o) => r(o)));
     return e.length > 1 ? n : n[0];
   } else {
-    const { map: n, displacementMap: s, normalMap: c, roughnessMap: o, metalnessMap: a, aoMap: p } = e;
+    const { map: n, displacementMap: o, normalMap: p, roughnessMap: s, metalnessMap: i, aoMap: l } = e;
     return {
       map: n ? await r(n) : null,
-      displacementMap: s ? await r(s) : null,
-      normalMap: c ? await r(c) : null,
-      roughnessMap: o ? await r(o) : null,
-      metalnessMap: a ? await r(a) : null,
-      aoMap: p ? await r(p) : null
+      displacementMap: o ? await r(o) : null,
+      normalMap: p ? await r(p) : null,
+      roughnessMap: s ? await r(s) : null,
+      metalnessMap: i ? await r(i) : null,
+      aoMap: l ? await r(l) : null
     };
   }
 }
-const T = ee({});
-function Y() {
-  function e(u) {
-    return T[u];
+const L = le({});
+function Je() {
+  function e(a) {
+    return L[a];
   }
-  function t(u, r) {
-    T[u] = r;
+  function t(a, r) {
+    L[a] = r;
   }
   return {
-    state: T,
-    ...te(T),
+    state: L,
+    ...fe(L),
     getState: e,
     setState: t
   };
 }
-let l, H;
-function Oe(e, t) {
-  const { width: u, height: r } = K(), { logMessage: n } = $(), s = v(() => u.value / r.value), { scene: c } = b(), { activeCamera: o } = z(), { setState: a } = Y();
-  a("scene", c), a("camera", o);
-  function p() {
-    l && (l.shadowMap.enabled = !0, l.shadowMap.type = Me);
-  }
-  function g() {
-    l && (l.setSize(u.value, r.value), l.setPixelRatio(Math.min(window.devicePixelRatio, 2)));
-  }
-  function f() {
-    l && (l.dispose(), l = null), n("disposeRenderer", l), H();
-  }
-  F(s, g);
-  function w() {
-    if (n("Render init", {
-      renderer: l,
-      canvas: e,
-      scene: c
-    }), !l && e.value && c) {
-      const h = {
-        canvas: e.value,
-        ...t
-      };
-      t != null && t.context && (h.context = t.context), l = new Ce(h), t != null && t.shadows && p(), l.physicallyCorrectLights = (t == null ? void 0 : t.physicallyCorrectLights) || !1, t != null && t.outputEncoding && (l.outputEncoding = t.outputEncoding), t != null && t.toneMapping && (l.toneMapping = t.toneMapping, l.toneMappingExposure = 1), g(), l.render(c, o.value), a("renderer", l), H = N(() => {
-        c && l && l.render(c, o.value);
-      }).disposeLoop;
-    }
-    a("loop", N);
-  }
-  function S(h) {
-    l && l.setClearColor(Ee(h));
-  }
-  return w(), {
-    renderer: l,
-    setClearColor: S,
-    updateRenderer: g,
-    disposeRenderer: f
+const u = $(), D = O(!1);
+function _e(e, t, a) {
+  const {
+    alpha: r = !1,
+    antialias: n,
+    depth: o,
+    logarithmicDepthBuffer: p,
+    failIfMajorPerformanceCaveat: s,
+    precision: i,
+    premultipliedAlpha: l,
+    stencil: d,
+    shadows: m = !1,
+    shadowMapType: h = xe,
+    physicallyCorrectLights: M = !1,
+    outputEncoding: S = Ee,
+    toneMapping: x = Pe,
+    toneMappingExposure: C = 1,
+    context: c = void 0,
+    powerPreference: w = "default",
+    preserveDrawingBuffer: f = !1,
+    clearColor: g = J("#000000"),
+    windowSize: E = !1
+  } = a, { width: j, height: B } = E ? X() : ge(t), { pixelRatio: V } = he(), { pause: se, resume: ie } = ae(), ce = F(() => j.value / B.value), W = () => {
+    !u.value || (u.value.setSize(j.value, B.value), u.value.setPixelRatio(V.value));
+  }, H = () => {
+    !u.value || (u.value.shadowMap.enabled = v(m), u.value.outputEncoding = v(S), u.value.shadowMap.type = v(h), u.value.physicallyCorrectLights = v(M), u.value.toneMapping = v(x), u.value.toneMappingExposure = v(C), u.value.setClearColor(J(v(g))));
+  }, ue = () => {
+    const N = A(e);
+    u.value || !N || (u.value = new Le({
+      canvas: N,
+      alpha: r,
+      antialias: n,
+      context: c,
+      depth: o,
+      failIfMajorPerformanceCaveat: s,
+      logarithmicDepthBuffer: p,
+      powerPreference: w,
+      precision: i,
+      stencil: d,
+      preserveDrawingBuffer: f,
+      premultipliedAlpha: l
+    }), H(), W(), ie(), D.value = !0);
+  }, pe = () => {
+    !u.value || (u.value.dispose(), u.value = void 0, D.value = !1, se());
+  };
+  return R([j, B, V], W), R(
+    () => [
+      m,
+      h,
+      S,
+      M,
+      x,
+      C,
+      g
+    ],
+    H
+  ), R(
+    () => [e, t],
+    () => {
+      A(e) && A(t) && ue();
+    },
+    { immediate: !0, deep: !0 }
+  ), {
+    renderer: u,
+    isReady: D,
+    dispose: pe,
+    aspectRatio: ce
   };
 }
-const Z = /* @__PURE__ */ J({
-  __name: "TresCanvas",
+const $e = _({
+  name: "TresCanvas",
   props: {
-    camera: null,
-    ortographic: { type: Boolean },
-    gl: null,
-    shadows: { type: Boolean, default: !1 },
-    physicallyCorrectLights: { type: Boolean, default: !1 },
-    outputEncoding: { default: Se },
-    alpha: { type: Boolean, default: !1 },
-    background: null,
-    async: { type: Boolean, default: !1 }
+    shadows: Boolean,
+    shadowMapType: Object,
+    physicallyCorrectLights: Boolean,
+    outputEncoding: Object,
+    toneMapping: Object,
+    toneMappingExposure: Number,
+    context: Object,
+    powerPreference: Object,
+    preserveDrawingBuffer: Boolean,
+    clearColor: String,
+    windowSize: Boolean
   },
-  setup(e) {
-    const t = e;
-    let u, r = () => {
-    };
-    const n = L(), s = L(!0), { scene: c, clearScene: o } = b(), a = re(), p = ne(), { createCamera: g } = z();
-    let f;
-    const w = Y();
-    ae("UseTresState", w.state);
-    const S = a.default ? a == null ? void 0 : a.default().some(
+  setup(e, { slots: t, attrs: a }) {
+    const { logError: r } = ee(), n = O(), o = O(), { renderer: p, dispose: s, aspectRatio: i } = _e(n, o, e), l = $();
+    return T("camera", l), T("renderer", p), T("aspect-ratio", i), t.default && !t.default().some((d) => d.type.name === "Scene") && r("TresCanvas must contain a Scene component."), t.default && !t.default().some(
       (d) => d.type.name === "PerspectiveCamera" || d.type.name === "OrtographicCamera"
-    ) : !1;
-    if (c && !S)
-      if (t.camera) {
-        const { position: d, ...M } = t.camera;
-        if (f = g(t.ortographic === !0 ? E.Orthographic : E.Perspective, M || {}), d) {
-          const i = X(d);
-          f.position.set(i[0], i[1], i[2]);
-        }
-        c.add(f);
-      } else
-        f = g(t.ortographic === !0 ? E.Orthographic : E.Perspective, {}), f.position.set(5, 5, 5), c.add(f);
-    F(t, () => {
-      u && (r(), o(), h());
-    });
-    function h() {
-      const d = Oe(n, {
-        antialias: !0,
-        physicallyCorrectLights: t.physicallyCorrectLights,
-        shadows: t.shadows,
-        context: t.gl || null,
-        alpha: t.alpha
-      });
-      u = d.renderer, r = d.disposeRenderer, t.background && d.setClearColor(t.background);
-    }
-    return oe(() => {
-      h();
-    }), se(() => {
-      o(), r();
-    }), (d, M) => {
-      var i, y, m, C;
-      return _(), j("div", {
-        id: "tres-container",
-        style: V({
-          position: "relative",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          overflow: "hidden",
-          width: ((y = (i = U(p)) == null ? void 0 : i.style) == null ? void 0 : y.width) || "100%",
-          height: "100%"
-        })
-      }, [
-        ce("canvas", {
-          ref_key: "canvasRef",
-          ref: n,
-          style: V({ width: ((C = (m = U(p)) == null ? void 0 : m.style) == null ? void 0 : C.width) || "100%", height: "100%", overflow: "hidden" })
-        }, null, 4),
-        e.async ? (_(), ie(le, { key: 0 }, {
-          default: ue(() => [
-            s.value ? W(d.$slots, "default", { key: 0 }) : D("", !0)
-          ]),
-          _: 3
-        })) : (_(), j(fe, { key: 1 }, [
-          s.value ? W(d.$slots, "default", { key: 0 }) : D("", !0)
-        ], 64))
-      ], 4);
+    ) && r("Scene must contain a Camera component."), me(() => s()), () => {
+      if (t.default)
+        return G(
+          "div",
+          {
+            ref: o,
+            style: {
+              position: "relative",
+              width: "100%",
+              height: "100vh",
+              ...a.style
+            }
+          },
+          [
+            G("canvas", {
+              ref: n,
+              style: { width: "100%", height: "100%", position: "absolute", top: 0, left: 0 }
+            }),
+            t.default()
+          ]
+        );
+    };
+  }
+}), Ue = _({
+  name: "Scene",
+  setup(e, { slots: t }) {
+    const { scene: a } = oe(), r = Q("renderer"), { activeCamera: n } = Z(), { onLoop: o } = ae();
+    return T("local-scene", a), o(() => {
+      (r == null ? void 0 : r.value) && (n == null ? void 0 : n.value) && (a == null ? void 0 : a.value) && r.value.render(a == null ? void 0 : a.value, n.value);
+    }), () => {
+      if (t.default)
+        return t.default();
     };
   }
-}), ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: Z
-}, Symbol.toStringTag, { value: "Module" })), ve = Symbol("UseTresState"), Fe = {
+}), qe = Symbol("UseTresState"), Ke = {
   install(e) {
-    e.component("TresCanvas", Z);
-    const { createComponentInstances: t } = Le();
+    e.component("TresCanvas", $e), e.component("Scene", Ue);
+    const { createComponentInstances: t } = Ae();
     t().forEach(([r, n]) => {
       e.component(r, n);
     });
   }
 };
 export {
-  E as CameraType,
-  ke as TresCanvas,
-  ve as UseTresStateSymbol,
-  Fe as default,
-  z as useCamera,
-  Re as useCatalog,
-  Le as useInstanceCreator,
-  be as useLoadingManager,
-  N as useLoop,
-  Oe as useRenderer,
-  b as useScene,
-  Ie as useTexture,
-  Y as useTres
+  Re as CameraType,
+  qe as UseTresStateSymbol,
+  Ke as default,
+  Z as useCamera,
+  be as useCatalog,
+  Ae as useInstanceCreator,
+  Ne as useLoadingManager,
+  ae as useRenderLoop,
+  _e as useRenderer,
+  oe as useScene,
+  Ge as useTexture,
+  Je as useTres
 };

package/dist/tres.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/core
- * version: v0.3.0
+ * version: v0.4.0
  * (c) 2022
  * description: Declarative ThreeJS using Vue Components
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(d,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("three"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","three","@vueuse/core"],n):(d=typeof globalThis<"u"?globalThis:d||self,n(d.tres={},d.Vue,d.Three,d.VueUseCore))})(this,function(d,n,m,$){"use strict";function Y(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const r=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,r.get?r:{enumerable:!0,get:()=>e[s]})}}return t.default=e,Object.freeze(t)}const Z=Y(m);var _=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(_||{});const x={cameras:[]},E=45;let L;function k(){const{width:e,height:t}=$.useWindowSize();function s(c="Perspective",o){if(c==="Perspective"){const{near:g,far:y,fov:p}=o||{near:.1,far:1e3,fov:E};L=new m.PerspectiveCamera(p,r.value,g,y),x.cameras.push(L)}else{const{left:g,right:y,top:p,bottom:S,near:O,far:w}=o||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};L=new m.OrthographicCamera(g,y,p,S,O,w),x.cameras.push(L)}return x.cameras.push(L),L}const r=n.computed(()=>e.value/t.value),a=n.computed(()=>x.cameras[0]);function i(){a.value instanceof m.PerspectiveCamera&&(a.value.aspect=r.value),a.value.updateProjectionMatrix()}function u(c){x.cameras.push(c),c instanceof m.PerspectiveCamera&&(c.aspect=r.value),c.updateProjectionMatrix()}return n.watch(r,i),{activeCamera:a,createCamera:s,updateCamera:i,pushCamera:u}}let z={...Z};function U(){return{extend:t=>{z=Object.assign(z,t)},catalogue:z}}const H=e=>typeof e<"u",q=e=>!!e&&e.constructor===Array;function W(e){return typeof e=="number"?[e,e,e]:e instanceof m.Vector3?[e.x,e.y,e.z]:e}function v(e){return e instanceof m.Color?e:Array.isArray(e)?new m.Color(...e):new m.Color(e)}const D="[TresJS \u25B2 \u25A0 \u25CF] ";function I(){function e(r,a){console.error(`${D} ${r}`,a)}function t(r){console.warn(`${D} ${r}`)}function s(r,a){}return{logError:e,logWarning:t,logMessage:s}}const B=new m.Scene,R=n.ref(!1);function j(){const{logMessage:e}=I();function t(){B==null||B.clear(),R.value=!R.value,e("clear Scene",B)}return{isSceneReset:R,clearScene:t,scene:B}}const ee=["rotation","scale","position"];function N(){const{catalogue:e}=U(),{logMessage:t,logError:s}=I();function r(){return Object.entries(e).filter(([a,i])=>{var u,c;return(c=(u=i==null?void 0:i.prototype)==null?void 0:u.constructor)==null?void 0:c.toString().includes("class")}).map(([a,i])=>{const u=n.defineComponent({name:a,setup(c,{slots:o,attrs:g,...y}){t(a,{props:c,slots:o,attrs:g,ctx:y});let p;const{scene:S}=j(),{pushCamera:O}=k();function w(){if((o==null?void 0:o.default)&&(o==null?void 0:o.default())){const b=o.default().map(f=>{var C;let M;return(C=f==null?void 0:f.props)!=null&&C.args?M=new e[f.type.name](...f.props.args):M=new e[f.type.name],f!=null&&f.props&&h(f.props,M),M});p=new i(...b)}else g.args?p=new i(...g.args):p=new i;h(g,p),a==="PerspectiveCamera"||a==="OrtographicCamera"?O(p):S==null||S.add(p),t("Instance added",S),y.expose(p)}function h(b,f){Object.entries(b).forEach(([M,C])=>{const P=M.replace(/(-\w)/g,F=>F[1].toUpperCase());if(!(P==="args"||C===void 0)){ee.includes(M)&&C&&(C=W(C));try{f[P]&&H(f[P].set)?q(C)?f[P].set(...C):f[P].set(C):(C===""&&(C=!0),f[P]=C)}catch(F){s(`There was an error setting ${P} property`,F)}}}),b.ref&&(b.ref=f)}return w(),()=>{}}});return[a,u]})}return{createComponentInstances:r}}let G;function A(e,t,s){const r=new m.Clock,{scene:a}=j(),i=()=>{const c=r.getElapsedTime(),o=r.getDelta();a&&(t&&t(o,c),e(o,c),s&&s(o,c)),G=requestAnimationFrame(i)};i();function u(){cancelAnimationFrame(G)}return{disposeLoop:u}}function J(){const e=new m.LoadingManager,t=n.ref(e);return{loadingManager:e,loadingManagerRef:t}}async function te(e){const{loadingManager:t}=J(),s=new m.TextureLoader(t),r=a=>new Promise((i,u)=>{s.load(a,c=>i(c),()=>null,()=>{u(new Error("[useTextures] - Failed to load texture"))})});if(q(e)){const a=await Promise.all(e.map(i=>r(i)));return e.length>1?a:a[0]}else{const{map:a,displacementMap:i,normalMap:u,roughnessMap:c,metalnessMap:o,aoMap:g}=e;return{map:a?await r(a):null,displacementMap:i?await r(i):null,normalMap:u?await r(u):null,roughnessMap:c?await r(c):null,metalnessMap:o?await r(o):null,aoMap:g?await r(g):null}}}const T=n.reactive({});function V(){function e(s){return T[s]}function t(s,r){T[s]=r}return{state:T,...n.toRefs(T),getState:e,setState:t}}let l,K;function Q(e,t){const{width:s,height:r}=$.useWindowSize(),{logMessage:a}=I(),i=n.computed(()=>s.value/r.value),{scene:u}=j(),{activeCamera:c}=k(),{setState:o}=V();o("scene",u),o("camera",c);function g(){l&&(l.shadowMap.enabled=!0,l.shadowMap.type=m.PCFSoftShadowMap)}function y(){l&&(l.setSize(s.value,r.value),l.setPixelRatio(Math.min(window.devicePixelRatio,2)))}function p(){l&&(l.dispose(),l=null),a("disposeRenderer",l),K()}n.watch(i,y);function S(){if(a("Render init",{renderer:l,canvas:e,scene:u}),!l&&e.value&&u){const w={canvas:e.value,...t};t!=null&&t.context&&(w.context=t.context),l=new m.WebGLRenderer(w),t!=null&&t.shadows&&g(),l.physicallyCorrectLights=(t==null?void 0:t.physicallyCorrectLights)||!1,t!=null&&t.outputEncoding&&(l.outputEncoding=t.outputEncoding),t!=null&&t.toneMapping&&(l.toneMapping=t.toneMapping,l.toneMappingExposure=1),y(),l.render(u,c.value),o("renderer",l),K=A(()=>{u&&l&&l.render(u,c.value)}).disposeLoop}o("loop",A)}function O(w){l&&l.setClearColor(v(w))}return S(),{renderer:l,setClearColor:O,updateRenderer:y,disposeRenderer:p}}const X=n.defineComponent({__name:"TresCanvas",props:{camera:null,ortographic:{type:Boolean},gl:null,shadows:{type:Boolean,default:!1},physicallyCorrectLights:{type:Boolean,default:!1},outputEncoding:{default:m.sRGBEncoding},alpha:{type:Boolean,default:!1},background:null,async:{type:Boolean,default:!1}},setup(e){const t=e;let s,r=()=>{};const a=n.ref(),i=n.ref(!0),{scene:u,clearScene:c}=j(),o=n.useSlots(),g=n.useAttrs(),{createCamera:y}=k();let p;const S=V();n.provide("UseTresState",S.state);const O=o.default?o==null?void 0:o.default().some(h=>h.type.name==="PerspectiveCamera"||h.type.name==="OrtographicCamera"):!1;if(u&&!O)if(t.camera){const{position:h,...b}=t.camera;if(p=y(t.ortographic===!0?_.Orthographic:_.Perspective,b||{}),h){const f=W(h);p.position.set(f[0],f[1],f[2])}u.add(p)}else p=y(t.ortographic===!0?_.Orthographic:_.Perspective,{}),p.position.set(5,5,5),u.add(p);n.watch(t,()=>{s&&(r(),c(),w())});function w(){const h=Q(a,{antialias:!0,physicallyCorrectLights:t.physicallyCorrectLights,shadows:t.shadows,context:t.gl||null,alpha:t.alpha});s=h.renderer,r=h.disposeRenderer,t.background&&h.setClearColor(t.background)}return n.onMounted(()=>{w()}),n.onBeforeUnmount(()=>{c(),r()}),(h,b)=>{var f,M,C,P;return n.openBlock(),n.createElementBlock("div",{id:"tres-container",style:n.normalizeStyle({position:"relative",top:0,left:0,right:0,bottom:0,overflow:"hidden",width:((M=(f=n.unref(g))==null?void 0:f.style)==null?void 0:M.width)||"100%",height:"100%"})},[n.createElementVNode("canvas",{ref_key:"canvasRef",ref:a,style:n.normalizeStyle({width:((P=(C=n.unref(g))==null?void 0:C.style)==null?void 0:P.width)||"100%",height:"100%",overflow:"hidden"})},null,4),e.async?(n.openBlock(),n.createBlock(n.Suspense,{key:0},{default:n.withCtx(()=>[i.value?n.renderSlot(h.$slots,"default",{key:0}):n.createCommentVNode("",!0)]),_:3})):(n.openBlock(),n.createElementBlock(n.Fragment,{key:1},[i.value?n.renderSlot(h.$slots,"default",{key:0}):n.createCommentVNode("",!0)],64))],4)}}}),ne=Object.freeze(Object.defineProperty({__proto__:null,default:X},Symbol.toStringTag,{value:"Module"})),re=Symbol("UseTresState"),ae={install(e){e.component("TresCanvas",X);const{createComponentInstances:t}=N();t().forEach(([r,a])=>{e.component(r,a)})}};d.CameraType=_,d.TresCanvas=ne,d.UseTresStateSymbol=re,d.default=ae,d.useCamera=k,d.useCatalog=U,d.useInstanceCreator=N,d.useLoadingManager=J,d.useLoop=A,d.useRenderer=Q,d.useScene=j,d.useTexture=te,d.useTres=V,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(u,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("@vueuse/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","three"],a):(u=typeof globalThis<"u"?globalThis:u||self,a(u.tres={},u.Vue,u.VueUseCore,u.Three))})(this,function(u,a,p,f){"use strict";function H(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const t=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,t.get?t:{enumerable:!0,get:()=>e[o]})}}return n.default=e,Object.freeze(n)}const ee=H(f);var F=(e=>(e.Perspective="Perspective",e.Orthographic="Orthographic",e))(F||{});const O={cameras:[]},ne=45;let b;function z(){const{width:e,height:n}=p.useWindowSize();function o(i="Perspective",c){if(i==="Perspective"){const{near:g,far:C,fov:w}=c||{near:.1,far:1e3,fov:ne};b=new f.PerspectiveCamera(w,t.value,g,C),O.cameras.push(b)}else{const{left:g,right:C,top:w,bottom:y,near:v,far:L}=c||{left:-100,right:100,top:100,bottom:-100,near:.1,far:1e3};b=new f.OrthographicCamera(g,C,w,y,v,L),O.cameras.push(b)}return O.cameras.push(b),b}const t=a.computed(()=>e.value/n.value),r=a.computed(()=>O.cameras[0]);function s(){r.value instanceof f.PerspectiveCamera&&(r.value.aspect=t.value),r.value.updateProjectionMatrix()}function m(i){const c=a.inject("camera");i&&c&&(c.value=i),O.cameras.push(i),i instanceof f.PerspectiveCamera&&(i.aspect=t.value),i.updateProjectionMatrix()}return a.watch(t,s),{activeCamera:r,createCamera:o,updateCamera:s,pushCamera:m}}let _={...ee};delete _.Scene;function R(){return{extend:n=>{_=Object.assign(_,n)},catalogue:_}}const te=e=>typeof e<"u",V=e=>!!e&&e.constructor===Array;function re(e){return typeof e=="number"?[e,e,e]:e instanceof f.Vector3?[e.x,e.y,e.z]:e}function $(e){return e instanceof f.Color?e:Array.isArray(e)?new f.Color(...e):new f.Color(e)}const W="[TresJS \u25B2 \u25A0 \u25CF] ";function q(){function e(t,r){console.error(`${W} ${t}`,r||"")}function n(t){console.warn(`${W} ${t}`)}function o(t,r){}return{logError:e,logWarning:n,logMessage:o}}const ae=["rotation","scale","position"];function N(){const{catalogue:e}=R(),{logMessage:n,logError:o}=q();function t(){return Object.entries(e).filter(([r,s])=>{var m,i;return(i=(m=s==null?void 0:s.prototype)==null?void 0:m.constructor)==null?void 0:i.toString().includes("class")}).map(([r,s])=>{const m=a.defineComponent({name:r,setup(i,{slots:c,attrs:g,...C}){n(r,{props:i,slots:c,attrs:g,ctx:C});let w;const{scene:y}=I(),{pushCamera:v}=z();function L(){if((c==null?void 0:c.default)&&(c==null?void 0:c.default())){const P=c.default().map(l=>{var h;let S;return(h=l==null?void 0:l.props)!=null&&h.args?S=new e[l.type.name](...l.props.args):S=new e[l.type.name],l!=null&&l.props&&j(l.props,S),S});w=new s(...P)}else g.args?w=new s(...g.args):w=new s;j(g,w),r==="PerspectiveCamera"||r==="OrtographicCamera"?v(w):y==null||y.value.add(w),n("Instance added",y),C.expose(w)}function j(P,l){Object.entries(P).forEach(([S,h])=>{const M=S.replace(/(-\w)/g,x=>x[1].toUpperCase());if(!(M==="args"||h===void 0)){ae.includes(S)&&h&&(h=re(h));try{l[M]&&te(l[M].set)?V(h)?l[M].set(...h):l[M].set(h):(h===""&&(h=!0),l[M]=h)}catch(x){o(`There was an error setting ${M} property`,x)}}}),P.ref&&(P.ref=l)}return L(),()=>{}}});return[r,m]})}return{createComponentInstances:t}}const k=p.createEventHook(),G=p.createEventHook(),J=p.createEventHook(),K=new f.Clock,{pause:oe,resume:se,isActive:ie}=p.useRafFn(()=>{const e=K.getElapsedTime(),n=K.getDelta();k.trigger({delta:n,elapsed:e}),G.trigger({delta:n,elapsed:e}),J.trigger({delta:n,elapsed:e})},{immediate:!1});function B(){return{onBeforeLoop:k.on,onLoop:G.on,onAfterLoop:J.on,pause:oe,resume:se,isActive:ie}}const ce=a.shallowRef(new f.Scene);function I(){return{scene:ce}}function ue(){const e=new f.LoadingManager,n=a.ref(e);return{loadingManager:e,loadingManagerRef:n}}async function le(e){const n=new f.LoadingManager,o=new f.TextureLoader(n),t=r=>new Promise((s,m)=>{o.load(r,i=>s(i),()=>null,()=>{m(new Error("[useTextures] - Failed to load texture"))})});if(V(e)){const r=await Promise.all(e.map(s=>t(s)));return e.length>1?r:r[0]}else{const{map:r,displacementMap:s,normalMap:m,roughnessMap:i,metalnessMap:c,aoMap:g}=e;return{map:r?await t(r):null,displacementMap:s?await t(s):null,normalMap:m?await t(m):null,roughnessMap:i?await t(i):null,metalnessMap:c?await t(c):null,aoMap:g?await t(g):null}}}const U=a.reactive({});function pe(){function e(o){return U[o]}function n(o,t){U[o]=t}return{state:U,...a.toRefs(U),getState:e,setState:n}}const d=a.shallowRef(),T=a.ref(!1);function Q(e,n,o){const{alpha:t=!1,antialias:r,depth:s,logarithmicDepthBuffer:m,failIfMajorPerformanceCaveat:i,precision:c,premultipliedAlpha:g,stencil:C,shadows:w=!1,shadowMapType:y=f.PCFShadowMap,physicallyCorrectLights:v=!1,outputEncoding:L=f.LinearEncoding,toneMapping:j=f.NoToneMapping,toneMappingExposure:P=1,context:l=void 0,powerPreference:S="default",preserveDrawingBuffer:h=!1,clearColor:M=$("#000000"),windowSize:x=!1}=o,{width:A,height:D}=x?p.useWindowSize():p.useElementSize(n),{pixelRatio:X}=p.useDevicePixelRatio(),{pause:he,resume:we}=B(),Ce=a.computed(()=>A.value/D.value),Y=()=>{!d.value||(d.value.setSize(A.value,D.value),d.value.setPixelRatio(X.value))},Z=()=>{!d.value||(d.value.shadowMap.enabled=p.resolveUnref(w),d.value.outputEncoding=p.resolveUnref(L),d.value.shadowMap.type=p.resolveUnref(y),d.value.physicallyCorrectLights=p.resolveUnref(v),d.value.toneMapping=p.resolveUnref(j),d.value.toneMappingExposure=p.resolveUnref(P),d.value.setClearColor($(p.resolveUnref(M))))},Me=()=>{const E=p.unrefElement(e);d.value||!E||(d.value=new f.WebGLRenderer({canvas:E,alpha:t,antialias:r,context:l,depth:s,failIfMajorPerformanceCaveat:i,logarithmicDepthBuffer:m,powerPreference:S,precision:c,stencil:C,preserveDrawingBuffer:h,premultipliedAlpha:g}),Z(),Y(),we(),T.value=!0)},ye=()=>{!d.value||(d.value.dispose(),d.value=void 0,T.value=!1,he())};return a.watch([A,D,X],Y),a.watch(()=>[w,y,L,v,j,P,M],Z),a.watch(()=>[e,n],()=>{p.unrefElement(e)&&p.unrefElement(n)&&Me()},{immediate:!0,deep:!0}),{renderer:d,isReady:T,dispose:ye,aspectRatio:Ce}}const fe=a.defineComponent({name:"TresCanvas",props:{shadows:Boolean,shadowMapType:Object,physicallyCorrectLights:Boolean,outputEncoding:Object,toneMapping:Object,toneMappingExposure:Number,context:Object,powerPreference:Object,preserveDrawingBuffer:Boolean,clearColor:String,windowSize:Boolean},setup(e,{slots:n,attrs:o}){const{logError:t}=q(),r=a.ref(),s=a.ref(),{renderer:m,dispose:i,aspectRatio:c}=Q(r,s,e),g=a.shallowRef();return a.provide("camera",g),a.provide("renderer",m),a.provide("aspect-ratio",c),n.default&&!n.default().some(C=>C.type.name==="Scene")&&t("TresCanvas must contain a Scene component."),n.default&&!n.default().some(C=>C.type.name==="PerspectiveCamera"||C.type.name==="OrtographicCamera")&&t("Scene must contain a Camera component."),a.onBeforeUnmount(()=>i()),()=>{if(n.default)return a.h("div",{ref:s,style:{position:"relative",width:"100%",height:"100vh",...o.style}},[a.h("canvas",{ref:r,style:{width:"100%",height:"100%",position:"absolute",top:0,left:0}}),n.default()])}}}),de=a.defineComponent({name:"Scene",setup(e,{slots:n}){const{scene:o}=I(),t=a.inject("renderer"),{activeCamera:r}=z(),{onLoop:s}=B();return a.provide("local-scene",o),s(()=>{(t==null?void 0:t.value)&&(r==null?void 0:r.value)&&(o==null?void 0:o.value)&&t.value.render(o==null?void 0:o.value,r.value)}),()=>{if(n.default)return n.default()}}}),me=Symbol("UseTresState"),ge={install(e){e.component("TresCanvas",fe),e.component("Scene",de);const{createComponentInstances:n}=N();n().forEach(([t,r])=>{e.component(t,r)})}};u.CameraType=F,u.UseTresStateSymbol=me,u.default=ge,u.useCamera=z,u.useCatalog=R,u.useInstanceCreator=N,u.useLoadingManager=ue,u.useRenderLoop=B,u.useRenderer=Q,u.useScene=I,u.useTexture=le,u.useTres=pe,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -38,7 +38,7 @@
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
     "@histoire/plugin-vue": "0.11.7",
-    "@tresjs/cientos": "^0.2.0",
+    "@tresjs/cientos": "^0.3.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitest/coverage-c8": "^0.25.1",
     "@vitest/ui": "^0.25.1",

package/dist/components/TresCanvas.vue.d.ts

@@ -1,124 +0,0 @@
-import { TextureEncoding, WebGLRenderer } from 'three';
-import { CameraType, PerspectiveCameraOptions, Camera } from '../core/useCamera/useCamera';
-import { VectorFlexibleParams } from '../utils/normalize';
-export interface CanvasCameraOptions extends PerspectiveCameraOptions {
-    position: VectorFlexibleParams;
-}
-declare const _sfc_main: import("vue").DefineComponent<{
-    camera: {
-        type: ObjectConstructor;
-        required: false;
-    };
-    ortographic: {
-        type: BooleanConstructor;
-        required: false;
-    };
-    gl: {
-        type: null;
-        required: false;
-    };
-    shadows: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    physicallyCorrectLights: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    outputEncoding: {
-        type: null;
-        required: false;
-        default: TextureEncoding;
-    };
-    alpha: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    background: {
-        type: StringConstructor;
-        required: false;
-    };
-    async: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-}, {
-    props: any;
-    renderer: WebGLRenderer | null;
-    disposeRenderer: () => void;
-    canvasRef: import("vue").Ref<any>;
-    renderComponent: import("vue").Ref<boolean>;
-    scene: import("three").Scene | null;
-    clearScene: () => void;
-    slots: Readonly<{
-        [name: string]: import("vue").Slot | undefined;
-    }>;
-    attrs: {
-        [x: string]: unknown;
-    };
-    createCamera: (cameraType?: CameraType | undefined, options?: PerspectiveCameraOptions | import('../core/useCamera/useCamera').OrthographicCameraOptions | undefined) => Camera;
-    camera: Camera;
-    tres: {
-        getState: (key: string) => any;
-        setState: (key: string, value: any) => void;
-        camera?: import("vue").Ref<Camera | undefined> | undefined;
-        renderer?: import("vue").Ref<WebGLRenderer | undefined> | undefined;
-        state: import("../core").TresState;
-    };
-    thereIsCameraAlready: boolean;
-    setupRenderer: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    camera: {
-        type: ObjectConstructor;
-        required: false;
-    };
-    ortographic: {
-        type: BooleanConstructor;
-        required: false;
-    };
-    gl: {
-        type: null;
-        required: false;
-    };
-    shadows: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    physicallyCorrectLights: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    outputEncoding: {
-        type: null;
-        required: false;
-        default: TextureEncoding;
-    };
-    alpha: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    background: {
-        type: StringConstructor;
-        required: false;
-    };
-    async: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-}>>, {
-    ortographic: boolean;
-    shadows: boolean;
-    physicallyCorrectLights: boolean;
-    outputEncoding: any;
-    alpha: boolean;
-    async: boolean;
-}>;
-export default _sfc_main;

package/dist/core/useLoop/useLoop.d.ts

@@ -1,4 +0,0 @@
-export declare type TresLoop = (delta: number, elapsedTime: number) => void;
-export declare function useLoop(cb: TresLoop, beforeCb?: TresLoop, afterCb?: TresLoop): {
-    disposeLoop: () => void;
-};

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

@@ -1,18 +0,0 @@
-import { Ref } from 'vue';
-import { TextureEncoding, ToneMapping, WebGLRenderer, WebGLRendererParameters, Color } from 'three';
-export interface RendererOptions extends WebGLRendererParameters {
-    shadows?: boolean;
-    controls?: boolean;
-    physicallyCorrectLights?: boolean;
-    outputEncoding?: TextureEncoding;
-    toneMapping?: ToneMapping;
-    context?: WebGLRenderingContext | undefined;
-    powerPreference?: string;
-    preserveDrawingBuffer?: boolean;
-}
-export declare function useRenderer(canvas: Ref<HTMLCanvasElement>, options?: RendererOptions): {
-    renderer: WebGLRenderer | null;
-    setClearColor: (color: Color | string | number) => void;
-    updateRenderer: () => void;
-    disposeRenderer: () => void;
-};

package/dist/core/useScene/useScene.d.ts

@@ -1,6 +0,0 @@
-import { Scene } from 'three';
-export declare function useScene(): {
-    isSceneReset: import("vue").Ref<boolean>;
-    clearScene: () => void;
-    scene: Scene | null;
-};