@tresjs/core - npm Package Compare versions

Comparing version 2.4.2 to 3.0.0

dist/components/TresCanvas.vue.d.ts

@@ -0,16 +1,13 @@
+import type { PropType as __PropType } from 'vue';
+import { WebGLRendererParameters, type ColorSpace, type ShadowMapType, type ToneMapping } from 'three';
 import type { TresCamera } from '../types/';
 import type { RendererPresetsType } from '../composables/useRenderer/const';
-import type { ColorSpace, ShadowMapType, ToneMapping } from 'three';
-export interface TresCanvasProps {
+export interface TresCanvasProps extends Omit<WebGLRendererParameters, 'canvas'> {
     shadows?: boolean;
+    clearColor?: string;
+    toneMapping?: ToneMapping;
     shadowMapType?: ShadowMapType;
-    physicallyCorrectLights?: boolean;
     useLegacyLights?: boolean;
     outputColorSpace?: ColorSpace;
-    toneMapping?: ToneMapping;
     toneMappingExposure?: number;
-    context?: WebGLRenderingContext;
-    powerPreference?: 'high-performance' | 'low-power' | 'default';
-    preserveDrawingBuffer?: boolean;
-    clearColor?: string;
     windowSize?: boolean;
@@ -21,128 +18,213 @@ preset?: RendererPresetsType;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+declare const _sfc_main: import("vue").DefineComponent<{
     shadows: {
-        type: import("vue").PropType<boolean>;
+        type: __PropType<boolean | undefined>;
+        required: false;
     };
+    clearColor: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    toneMapping: {
+        type: __PropType<ToneMapping | undefined>;
+        required: false;
+    };
     shadowMapType: {
-        type: import("vue").PropType<ShadowMapType>;
+        type: __PropType<ShadowMapType | undefined>;
+        required: false;
     };
-    physicallyCorrectLights: {
-        type: import("vue").PropType<boolean>;
-    };
     useLegacyLights: {
-        type: import("vue").PropType<boolean>;
+        type: __PropType<boolean | undefined>;
+        required: false;
     };
     outputColorSpace: {
-        type: import("vue").PropType<ColorSpace>;
+        type: __PropType<ColorSpace | undefined>;
+        required: false;
     };
-    toneMapping: {
-        type: import("vue").PropType<ToneMapping>;
-    };
     toneMappingExposure: {
-        type: import("vue").PropType<number>;
+        type: __PropType<number | undefined>;
+        required: false;
     };
+    windowSize: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    preset: {
+        type: __PropType<"realistic" | undefined>;
+        required: false;
+    };
+    disableRender: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    camera: {
+        type: __PropType<TresCamera | undefined>;
+        required: false;
+    };
     context: {
-        type: import("vue").PropType<WebGLRenderingContext>;
+        type: __PropType<WebGLRenderingContext | undefined>;
+        required: false;
     };
-    powerPreference: {
-        type: import("vue").PropType<"high-performance" | "low-power" | "default">;
+    precision: {
+        type: __PropType<string | undefined>;
+        required: false;
     };
-    preserveDrawingBuffer: {
-        type: import("vue").PropType<boolean>;
+    alpha: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+        default: boolean;
     };
-    clearColor: {
-        type: import("vue").PropType<string>;
+    premultipliedAlpha: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
     };
-    windowSize: {
-        type: import("vue").PropType<boolean>;
+    antialias: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+        default: boolean;
     };
-    preset: {
-        type: import("vue").PropType<"realistic">;
+    stencil: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+        default: boolean;
     };
-    disableRender: {
-        type: import("vue").PropType<boolean>;
+    preserveDrawingBuffer: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+        default: boolean;
     };
-    camera: {
-        type: import("vue").PropType<TresCamera>;
+    powerPreference: {
+        type: __PropType<string | undefined>;
+        required: false;
     };
-}, {
-    getState: (key: string) => any;
-    setState: (key: string, value: any) => void;
-    camera?: import("vue").Ref<import("../composables").Camera | undefined> | undefined;
-    cameras?: import("vue").Ref<import("../composables").Camera[] | undefined> | undefined;
-    aspectRatio?: import("vue").Ref<import("vue").ComputedRef<number> | undefined> | undefined;
-    renderer?: import("vue").Ref<import("three").WebGLRenderer | undefined> | undefined;
-    scene?: import("vue").Ref<import("three").Scene | undefined> | undefined;
-    raycaster?: import("vue").Ref<import("three").Raycaster | undefined> | undefined;
-    clock?: import("vue").Ref<import("three").Clock | undefined> | undefined;
-    pointer?: import("vue").Ref<import("three").Vector2 | undefined> | undefined;
-    currentInstance?: import("vue").Ref<any> | undefined;
-    controls?: import("vue").Ref<(import("three").EventDispatcher<import("three").Event> & {
-        enabled: boolean;
-    }) | null | undefined> | undefined;
-    canvas?: import("vue").Ref<import("vue").Ref<HTMLElement> | undefined> | undefined;
-    pointerEventHandler?: import("vue").Ref<{
-        registerObject: (object: import("three").Object3D<import("three").Event> & {
-            onClick?: ((intersection: import("three").Intersection<import("three").Object3D<import("three").Event>>, event: PointerEvent) => void) | undefined;
-            onPointerEnter?: ((intersection: import("three").Intersection<import("three").Object3D<import("three").Event>>, event: PointerEvent) => void) | undefined;
-            onPointerMove?: ((intersection: import("three").Intersection<import("three").Object3D<import("three").Event>>, event: PointerEvent) => void) | undefined;
-            onPointerLeave?: ((object: import("three").Object3D<import("three").Event>, event: PointerEvent) => void) | undefined;
-        }) => void;
-        deregisterObject: (object: import("three").Object3D<import("three").Event>) => void;
-    } | undefined> | undefined;
-    state: import("../composables").TresState;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    shadows: {
-        type: import("vue").PropType<boolean>;
+    depth: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+        default: boolean;
     };
-    shadowMapType: {
-        type: import("vue").PropType<ShadowMapType>;
+    logarithmicDepthBuffer: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
     };
-    physicallyCorrectLights: {
-        type: import("vue").PropType<boolean>;
+    failIfMajorPerformanceCaveat: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
     };
-    useLegacyLights: {
-        type: import("vue").PropType<boolean>;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    shadows: {
+        type: __PropType<boolean | undefined>;
+        required: false;
     };
-    outputColorSpace: {
-        type: import("vue").PropType<ColorSpace>;
+    clearColor: {
+        type: __PropType<string | undefined>;
+        required: false;
     };
     toneMapping: {
-        type: import("vue").PropType<ToneMapping>;
+        type: __PropType<ToneMapping | undefined>;
+        required: false;
     };
-    toneMappingExposure: {
-        type: import("vue").PropType<number>;
+    shadowMapType: {
+        type: __PropType<ShadowMapType | undefined>;
+        required: false;
     };
-    context: {
-        type: import("vue").PropType<WebGLRenderingContext>;
+    useLegacyLights: {
+        type: __PropType<boolean | undefined>;
+        required: false;
     };
-    powerPreference: {
-        type: import("vue").PropType<"high-performance" | "low-power" | "default">;
+    outputColorSpace: {
+        type: __PropType<ColorSpace | undefined>;
+        required: false;
     };
-    preserveDrawingBuffer: {
-        type: import("vue").PropType<boolean>;
+    toneMappingExposure: {
+        type: __PropType<number | undefined>;
+        required: false;
     };
-    clearColor: {
-        type: import("vue").PropType<string>;
-    };
     windowSize: {
-        type: import("vue").PropType<boolean>;
+        type: __PropType<boolean | undefined>;
+        required: false;
     };
     preset: {
-        type: import("vue").PropType<"realistic">;
+        type: __PropType<"realistic" | undefined>;
+        required: false;
     };
     disableRender: {
-        type: import("vue").PropType<boolean>;
+        type: __PropType<boolean | undefined>;
+        required: false;
     };
     camera: {
-        type: import("vue").PropType<TresCamera>;
+        type: __PropType<TresCamera | undefined>;
+        required: false;
     };
-}>>, {}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
+    context: {
+        type: __PropType<WebGLRenderingContext | undefined>;
+        required: false;
     };
-};
+    precision: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    alpha: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+        default: boolean;
+    };
+    premultipliedAlpha: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+    };
+    antialias: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+        default: boolean;
+    };
+    stencil: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+        default: boolean;
+    };
+    preserveDrawingBuffer: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+        default: boolean;
+    };
+    powerPreference: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    depth: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+        default: boolean;
+    };
+    logarithmicDepthBuffer: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+    };
+    failIfMajorPerformanceCaveat: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        skipCheck: boolean;
+    };
+}>>, {
+    alpha: boolean | undefined;
+    antialias: boolean | undefined;
+    stencil: boolean | undefined;
+    preserveDrawingBuffer: boolean | undefined;
+    depth: boolean | undefined;
+}, {}>;
+export default _sfc_main;

dist/composables/index.d.ts

@@ -1,2 +0,2 @@
-export * from './useCamera';
+export * from './useCamera/';
 export * from './useRenderLoop/';
@@ -6,3 +6,2 @@ export * from './useRenderer/';
 export * from './useTexture';
-export * from './useTres';
 export * from './useRaycaster';
@@ -12,1 +11,2 @@ export * from './useLogger';
 export * from './usePointerEventHandler';
+export * from './useTresContextProvider';

dist/composables/usePointerEventHandler/index.d.ts

@@ -0,5 +1,7 @@
+import type { TresContext } from '../useTresContextProvider';
 import type { Intersection, Event, Object3D } from 'three';
+import { TresScene } from 'src/types';
 type CallbackFn = (intersection: Intersection<Object3D<Event>>, event: PointerEvent) => void;
 type CallbackFnPointerLeave = (object: Object3D<Event>, event: PointerEvent) => void;
-type EventProps = {
+export type EventProps = {
     onClick?: CallbackFn;
@@ -10,3 +12,6 @@ onPointerEnter?: CallbackFn;
 };
-export declare const usePointerEventHandler: () => {
+export declare const usePointerEventHandler: ({ scene, contextParts }: {
+    scene: TresScene;
+    contextParts: Pick<TresContext, 'renderer' | 'camera' | 'raycaster'>;
+}) => {
     registerObject: (object: Object3D & EventProps) => void;
@@ -13,0 +18,0 @@ deregisterObject: (object: Object3D) => void;

dist/composables/useRaycaster/index.d.ts

@@ -1,4 +0,5 @@
-import { Object3D } from 'three';
+import { type Intersection, Object3D } from 'three';
 import { Ref } from 'vue';
-export type Intersects = THREE.Intersection<THREE.Object3D<THREE.Event>>[];
+import { type TresContext } from '../useTresContextProvider';
+export type Intersects = Intersection<THREE.Object3D<THREE.Event>>[];
 interface PointerMoveEventPayload {
@@ -12,3 +13,3 @@ intersects?: Intersects;
 }
-export declare const useRaycaster: (objects: Ref<THREE.Object3D[]>) => {
+export declare const useRaycaster: (objects: Ref<THREE.Object3D[]>, { renderer, camera, raycaster }: Pick<TresContext, 'renderer' | 'camera' | 'raycaster'>) => {
     intersects: import("vue").ComputedRef<Intersects>;
@@ -15,0 +16,0 @@ onClick: (fn: (value: PointerClickEventPayload) => void) => () => void;

dist/composables/useRenderer/index.d.ts

@@ -1,7 +0,13 @@
-import { MaybeRefOrGetter } from '@vueuse/core';
-import { WebGLRendererParameters, WebGLRenderer, ShadowMapType, ColorSpace } from 'three';
-import type { ToneMapping } from 'three';
+import { WebGLRenderer } from 'three';
+import { RendererPresetsType } from './const';
+import { type MaybeRef } from 'vue';
+import { type MaybeRefOrGetter } from '@vueuse/core';
 import { TresColor } from '../../types';
-import { RendererPresetsType } from './const';
-export interface UseRendererOptions extends WebGLRendererParameters {
+import type { Scene, ToneMapping } from 'three';
+import type { TresContext } from '../useTresContextProvider';
+import type { ColorSpace, ShadowMapType, WebGLRendererParameters } from 'three';
+type TransformToMaybeRefOrGetter<T> = {
+    [K in keyof T]: MaybeRefOrGetter<T[K]> | MaybeRefOrGetter<T[K]>;
+};
+export interface UseRendererOptions extends TransformToMaybeRefOrGetter<WebGLRendererParameters> {
     /**
@@ -45,3 +51,6 @@ * Enable shadows in the Renderer
      * Defines the tone mapping used by the renderer.
-     * Can be NoToneMapping, LinearToneMapping, ReinhardToneMapping, Uncharted2ToneMapping, CineonToneMapping, ACESFilmicToneMapping, CustomToneMapping
+     * Can be NoToneMapping, LinearToneMapping,
+     * ReinhardToneMapping, Uncharted2ToneMapping,
+     * CineonToneMapping, ACESFilmicToneMapping,
+     * CustomToneMapping
      *
@@ -58,21 +67,2 @@ * @default NoToneMapping
     /**
-     * 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.
@@ -84,3 +74,3 @@ *
     windowSize?: MaybeRefOrGetter<boolean | string>;
-    preset?: RendererPresetsType;
+    preset?: MaybeRefOrGetter<RendererPresetsType>;
 }
@@ -93,8 +83,12 @@ /**
  */
-export declare function useRenderer(options: UseRendererOptions): {
-    renderer: import("vue").ShallowRef<WebGLRenderer | undefined>;
-    isReady: import("vue").Ref<boolean>;
-    dispose: () => void;
-    aspectRatio: import("vue").ComputedRef<number>;
+export declare function useRenderer({ scene, canvas, options, disableRender, contextParts: { sizes, camera }, }: {
+    canvas: MaybeRef<HTMLCanvasElement>;
+    scene: Scene;
+    options: UseRendererOptions;
+    contextParts: Pick<TresContext, 'sizes' | 'camera'>;
+    disableRender: MaybeRefOrGetter<boolean>;
+}): {
+    renderer: import("vue").ShallowRef<WebGLRenderer>;
 };
 export type UseRendererReturn = ReturnType<typeof useRenderer>;
+export {};

dist/composables/useRenderLoop/index.d.ts

@@ -17,2 +17,2 @@ import { EventHookOn, Fn } from '@vueuse/core';
 }
-export declare function useRenderLoop(): UseRenderLoopReturn;
+export declare const useRenderLoop: () => UseRenderLoopReturn;

dist/core/nodeOps.d.ts

 import { RendererOptions } from 'vue';
-import { TresObject } from '../types';
+import type { TresObject } from '../types';
 export declare const isOn: (key: string) => boolean;
 export declare const nodeOps: RendererOptions<TresObject, TresObject>;

dist/index.d.ts

@@ -6,2 +6,3 @@ import { App } from 'vue';
 export * from './types';
+import { useTresContext, type TresContext } from './composables';
 import { normalizeColor, normalizeVectorFlexibleParam } from './utils/normalize';
@@ -18,2 +19,2 @@ import templateCompilerOptions from './utils/template-compiler-options';
 export default plugin;
-export { normalizeColor, normalizeVectorFlexibleParam, templateCompilerOptions };
+export { TresContext, useTresContext, normalizeColor, normalizeVectorFlexibleParam, templateCompilerOptions };

dist/tres.js

 /**
  * name: @tresjs/core
- * version: v2.4.2
+ * version: v3.0.0
  * (c) 2023
@@ -8,167 +8,99 @@ * description: Declarative ThreeJS using Vue Components
  */
-import { ref as G, shallowReactive as se, toRefs as ce, provide as Re, inject as Te, watchEffect as ue, toRef as Le, shallowRef as Se, computed as N, watch as D, onUnmounted as fe, reactive as Ae, createRenderer as Oe, defineComponent as le, getCurrentInstance as ke, onMounted as Be, useSlots as je, openBlock as pe, createElementBlock as De, unref as W, createElementVNode as te, normalizeStyle as Ie, createBlock as He, normalizeProps as Ve, guardReactiveProps as ze, withCtx as Ge, renderSlot as Ne } from "vue";
-import * as Fe from "three";
-import { PerspectiveCamera as I, OrthographicCamera as We, Clock as de, Vector3 as $e, Color as $, SRGBColorSpace as Ue, ACESFilmicToneMapping as Ye, PCFSoftShadowMap as qe, PCFShadowMap as Ke, LinearSRGBColorSpace as ae, NoToneMapping as ne, WebGLRenderer as Je, LoadingManager as Xe, TextureLoader as Qe, Raycaster as Ze, Vector2 as et, BufferAttribute as tt, Scene as at } from "three";
-import { createEventHook as A, useRafFn as nt, toValue as m, useWindowSize as ot, useElementSize as rt, useDevicePixelRatio as it, unrefElement as U, usePointer as st, useElementBounding as ct } from "@vueuse/core";
-const me = G({}), ve = (e) => void Object.assign(me.value, e), oe = (e) => typeof e == "function", ge = (e) => !!e && e.constructor === Array, b = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0e", "0f", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1a", "1b", "1c", "1d", "1e", "1f", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2a", "2b", "2c", "2d", "2e", "2f", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3a", "3b", "3c", "3d", "3e", "3f", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4a", "4b", "4c", "4d", "4e", "4f", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5a", "5b", "5c", "5d", "5e", "5f", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6a", "6b", "6c", "6d", "6e", "6f", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7a", "7b", "7c", "7d", "7e", "7f", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8a", "8b", "8c", "8d", "8e", "8f", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9a", "9b", "9c", "9d", "9e", "9f", "a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "aa", "ab", "ac", "ad", "ae", "af", "b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "ba", "bb", "bc", "bd", "be", "bf", "c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "ca", "cb", "cc", "cd", "ce", "cf", "d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9", "da", "db", "dc", "dd", "de", "df", "e0", "e1", "e2", "e3", "e4", "e5", "e6", "e7", "e8", "e9", "ea", "eb", "ec", "ed", "ee", "ef", "f0", "f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "fa", "fb", "fc", "fd", "fe", "ff"];
-function ut() {
-  const e = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0, r = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0;
-  return (b[e & 255] + b[e >> 8 & 255] + b[e >> 16 & 255] + b[e >> 24 & 255] + "-" + b[a & 255] + b[a >> 8 & 255] + "-" + b[a >> 16 & 15 | 64] + b[a >> 24 & 255] + "-" + b[r & 63 | 128] + b[r >> 8 & 255] + "-" + b[r >> 16 & 255] + b[r >> 24 & 255] + b[t & 255] + b[t >> 8 & 255] + b[t >> 16 & 255] + b[t >> 24 & 255]).toLowerCase();
-}
-const K = Symbol();
-function ft() {
-  const e = se({
-    uuid: ut(),
-    camera: void 0,
-    cameras: [],
-    canvas: void 0,
-    scene: void 0,
-    renderer: void 0,
-    aspectRatio: void 0,
-    pointerEventHandler: void 0
-  });
-  function a(o) {
-    return e[o];
-  }
-  function r(o, s) {
-    e[o] = s;
-  }
-  const t = {
-    state: e,
-    ...ce(e),
-    getState: a,
-    setState: r
+import { ref as W, computed as _, watchEffect as b, onUnmounted as j, shallowRef as z, watch as J, reactive as re, readonly as ne, provide as ae, inject as oe, createRenderer as se, defineComponent as ie, useSlots as ue, onMounted as le, openBlock as ce, createElementBlock as fe, normalizeStyle as me } from "vue";
+import * as pe from "three";
+import { PerspectiveCamera as G, OrthographicCamera as ve, Camera as de, Clock as ge, SRGBColorSpace as we, ACESFilmicToneMapping as ye, PCFSoftShadowMap as Ce, Vector3 as Pe, Color as O, WebGLRenderer as H, LoadingManager as Me, TextureLoader as _e, Vector2 as Ee, Raycaster as xe, BufferAttribute as Le, Scene as Te } from "three";
+import { createEventHook as A, useRafFn as be, toValue as y, unrefElement as De, useDevicePixelRatio as Ae, usePointer as ke, useElementBounding as Se, useWindowSize as he, useElementSize as Be } from "@vueuse/core";
+const K = W({}), X = (e) => void Object.assign(K.value, e), I = (e) => typeof e == "function", Y = (e) => !!e && e.constructor === Array, Oe = ({ sizes: e, scene: a }) => {
+  const t = W([]), n = _(
+    () => t.value[0]
+  ), r = (o, s = !1) => {
+    t.value.some(({ uuid: u }) => u === o.uuid) || (s ? l(o) : t.value.push(o));
+  }, i = (o) => {
+    t.value = t.value.filter(({ uuid: s }) => s !== o.uuid);
+  }, l = (o) => {
+    const s = o instanceof de ? o : t.value.find((c) => c.uuid === o);
+    if (!s)
+      return;
+    const u = t.value.filter(({ uuid: c }) => c !== s.uuid);
+    t.value = [s, ...u];
   };
-  return Re(K, t), t;
-}
-const O = () => Te(K, {
-  state: se({
-    camera: void 0,
-    cameras: [],
-    canvas: void 0,
-    scene: void 0,
-    renderer: void 0,
-    pointerEventHandler: void 0
-  })
-});
-var lt = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(lt || {});
-const pt = 45;
-let T;
-function dt() {
-  const { state: e, setState: a, aspectRatio: r } = O();
-  function t(i = "Perspective", u) {
-    var l, p, d;
-    if (i === "Perspective") {
-      const { near: w, far: _, fov: E } = u || {
-        near: 0.1,
-        far: 1e3,
-        fov: pt
-      };
-      T = new I(E, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, w, _), (p = e.cameras) == null || p.push(T);
-    } else {
-      const { left: w, right: _, top: E, bottom: g, near: M, far: x } = u || {
-        left: -100,
-        right: 100,
-        top: 100,
-        bottom: -100,
-        near: 0.1,
-        far: 1e3
-      };
-      T = new We(w, _, E, g, M, x), (d = e.cameras) == null || d.push(T);
-    }
-    return e.camera = T, a("camera", e.camera), T;
-  }
-  function o() {
-    var i;
-    e.camera instanceof I && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (i = e.camera) == null || i.updateProjectionMatrix();
-  }
-  function s(i) {
-    var u;
-    (u = e.cameras) == null || u.push(i), i instanceof I && e.aspectRatio && (i.aspect = e.aspectRatio.value), i.updateProjectionMatrix(), a("camera", i);
-  }
-  function c(i) {
-    var u;
-    ((u = e.cameras) == null ? void 0 : u.length) === 0 && s(i);
-  }
-  function n() {
-    e.cameras = [];
-  }
-  return ue(() => {
-    r != null && r.value && o();
+  return b(() => {
+    e.aspectRatio.value && t.value.forEach((o) => {
+      o instanceof G && (o.aspect = e.aspectRatio.value), (o instanceof G || o instanceof ve) && o.updateProjectionMatrix();
+    });
+  }), a.userData.tres__registerCamera = r, a.userData.tres__deregisterCamera = i, j(() => {
+    t.value = [];
   }), {
-    activeCamera: Le(e, "camera"),
-    createCamera: t,
-    updateCamera: o,
-    pushCamera: s,
-    clearCameras: n,
-    setFirstCamera: c
+    camera: n,
+    cameras: t,
+    addCamera: r,
+    removeCamera: i,
+    setCameraActive: l
   };
-}
-const ye = A(), we = A(), J = A(), S = new de();
-let H = 0, V = 0;
-const { pause: mt, resume: vt, isActive: gt } = nt(
+}, Q = A(), Z = A(), $ = A(), D = new ge();
+let R = 0, F = 0;
+const { pause: Re, resume: Fe, isActive: ze } = be(
   () => {
-    ye.trigger({ delta: H, elapsed: V, clock: S }), we.trigger({ delta: H, elapsed: V, clock: S }), J.trigger({ delta: H, elapsed: V, clock: S });
+    Q.trigger({ delta: R, elapsed: F, clock: D }), Z.trigger({ delta: R, elapsed: F, clock: D }), $.trigger({ delta: R, elapsed: F, clock: D });
   },
   { immediate: !1 }
 );
-J.on(() => {
-  H = S.getDelta(), V = S.getElapsedTime();
+$.on(() => {
+  R = D.getDelta(), F = D.getElapsedTime();
 });
-function he() {
-  return {
-    onBeforeLoop: ye.on,
-    onLoop: we.on,
-    onAfterLoop: J.on,
-    pause: mt,
-    resume: vt,
-    isActive: gt
-  };
-}
-function Vt(e) {
-  return typeof e == "number" ? [e, e, e] : e instanceof $e ? [e.x, e.y, e.z] : e;
-}
-function yt(e) {
-  return e instanceof $ ? e : Array.isArray(e) ? new $(...e) : new $(e);
-}
-const Y = {
+const ee = () => ({
+  onBeforeLoop: Q.on,
+  onLoop: Z.on,
+  onAfterLoop: $.on,
+  pause: Re,
+  resume: Fe,
+  isActive: ze
+}), h = {
   realistic: {
-    outputColorSpace: Ue,
-    toneMapping: Ye,
+    outputColorSpace: we,
+    toneMapping: ye,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: qe
+      type: Ce
     }
   }
-}, be = (e, a) => {
-  for (const r of Object.keys(a))
-    a[r] instanceof Object && Object.assign(a[r], be(e[r], a[r]));
+}, te = (e, a) => {
+  for (const t of Object.keys(a))
+    a[t] instanceof Object && Object.assign(a[t], te(e[t], a[t]));
   return Object.assign(e || {}, a), e;
-}, wt = "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", ht = /* @__PURE__ */ bt(wt);
-function j(e) {
-  return e.replace(/-([a-z])/g, (a, r) => r.toUpperCase());
+}, He = "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", Ve = /* @__PURE__ */ Ge(He);
+function B(e) {
+  return e.replace(/-([a-z])/g, (a, t) => t.toUpperCase());
 }
-function bt(e, a) {
-  const r = /* @__PURE__ */ Object.create(null), t = e.split(",");
-  for (let o = 0; o < t.length; o++)
-    r[t[o]] = !0;
-  return a ? (o) => !!r[o.toLowerCase()] : (o) => !!r[o];
+function Ge(e, a) {
+  const t = /* @__PURE__ */ Object.create(null), n = e.split(",");
+  for (let r = 0; r < n.length; r++)
+    t[n[r]] = !0;
+  return a ? (r) => !!t[r.toLowerCase()] : (r) => !!t[r];
 }
-const Et = (e, a) => {
-  const r = /* @__PURE__ */ new Set(), t = [];
-  for (const o of e) {
-    const s = a(o);
-    r.has(s) || (r.add(s), t.push(o));
+const We = (e, a) => {
+  const t = /* @__PURE__ */ new Set(), n = [];
+  for (const r of e) {
+    const i = a(r);
+    t.has(i) || (t.add(i), n.push(r));
   }
-  return t;
-}, zt = !0, re = "[TresJS ▲ ■ ●] ";
+  return n;
+}, N = (e, a) => {
+  if (!a)
+    return;
+  const t = Array.isArray(a) ? a : a.match(/([^[.\]])+/g);
+  return t == null ? void 0 : t.reduce((n, r) => n && n[r], e);
+}, je = (e, a, t) => {
+  const n = Array.isArray(a) ? a : a.match(/([^[.\]])+/g);
+  n && n.reduce((r, i, l) => (r[i] === void 0 && (r[i] = {}), l === n.length - 1 && (r[i] = t), r[i]), e);
+}, st = !0, q = "[TresJS ▲ ■ ●] ";
 function k() {
-  function e(t, o) {
-    console.error(`${re} ${t}`, o || "");
+  function e(n, r) {
+    console.error(`${q} ${n}`, r || "");
   }
-  function a(t) {
-    console.warn(`${re} ${t}`);
+  function a(n) {
+    console.warn(`${q} ${n}`);
   }
-  function r(t, o) {
+  function t(n, r) {
   }
@@ -178,201 +110,201 @@ return {
     logWarning: a,
-    logMessage: r
+    logMessage: t
   };
 }
-function _t(e) {
-  const a = Se(), r = G(!1), {
-    alpha: t = !0,
-    antialias: o = !0,
-    depth: s,
-    logarithmicDepthBuffer: c,
-    failIfMajorPerformanceCaveat: n,
-    precision: i,
-    premultipliedAlpha: u,
-    stencil: l,
-    shadows: p = !1,
-    shadowMapType: d = Ke,
-    useLegacyLights: w = !1,
-    outputColorSpace: _ = ae,
-    toneMapping: E = ne,
-    toneMappingExposure: g = 1,
-    context: M = void 0,
-    powerPreference: x = "default",
-    preserveDrawingBuffer: y = !1,
-    clearColor: h,
-    windowSize: R = !1,
-    preset: B = void 0
-  } = ce(e), { state: P, setState: f } = O(), { width: v, height: X } = m(R) == !0 || m(R) === "" || m(R) === "true" ? ot() : rt(P.container), { logError: Ee, logWarning: _e } = k(), { pixelRatio: Q } = it(), { pause: Pe, resume: Ce } = he(), F = N(() => v.value / X.value);
-  setTimeout(() => {
-    var C;
-    !m(R) && !((C = P.canvas) != null && C.value.offsetHeight) && _e(`Oops... Seems like your canvas height is currently 0px, it's posible that you couldn't watch your scene.
-  You could set windowSize=true to force the canvas to be the size of the window.`);
-  }, 1e3);
-  const Z = () => {
-    a.value && (a.value.setSize(v.value, X.value), a.value.setPixelRatio(Math.min(Q.value, 2)));
-  }, ee = () => {
-    if (!a.value)
-      return;
-    const C = m(B);
-    if (C) {
-      C in Y || Ee("Renderer Preset must be one of these: " + Object.keys(Y).join(", ")), be(a.value, Y[C]);
-      return;
-    }
-    a.value.shadowMap.enabled = m(p), a.value.shadowMap.type = m(d), a.value.toneMapping = m(E) || ne, a.value.toneMappingExposure = m(g), a.value.outputColorSpace = m(_) || ae, h != null && h.value && a.value.setClearColor(yt(m(h))), a.value.useLegacyLights = m(w);
-  }, Me = () => {
-    const C = U(P.canvas);
-    C && (a.value = new Je({
-      canvas: C,
-      alpha: m(t),
-      antialias: m(o),
-      context: m(M),
-      depth: m(s),
-      failIfMajorPerformanceCaveat: m(n),
-      logarithmicDepthBuffer: m(c),
-      powerPreference: m(x),
-      precision: m(i),
-      stencil: m(l),
-      preserveDrawingBuffer: m(y),
-      premultipliedAlpha: m(u)
-    }), f("renderer", a.value), f("clock", new de()), f("aspectRatio", F), ee(), Z(), Ce(), r.value = !0);
-  }, xe = () => {
-    a.value && (a.value.dispose(), a.value = void 0, r.value = !1, Pe());
+function it(e) {
+  return typeof e == "number" ? [e, e, e] : e instanceof Pe ? [e.x, e.y, e.z] : e;
+}
+function $e(e) {
+  return e instanceof O ? e : Array.isArray(e) ? new O(...e) : new O(e);
+}
+function Ie({
+  scene: e,
+  canvas: a,
+  options: t,
+  disableRender: n,
+  contextParts: { sizes: r, camera: i }
+}) {
+  const l = _(() => ({
+    alpha: y(t.alpha),
+    depth: y(t.depth),
+    canvas: De(a),
+    context: y(t.context),
+    stencil: y(t.stencil),
+    antialias: y(t.antialias) === void 0 ? (
+      // an opinionated default of tres
+      !0
+    ) : y(t.antialias),
+    precision: y(t.precision),
+    powerPreference: y(t.powerPreference),
+    premultipliedAlpha: y(t.premultipliedAlpha),
+    preserveDrawingBuffer: y(t.preserveDrawingBuffer),
+    logarithmicDepthBuffer: y(t.logarithmicDepthBuffer),
+    failIfMajorPerformanceCaveat: y(t.failIfMajorPerformanceCaveat)
+  })), o = z(new H(l.value));
+  J(l, () => {
+    o.value.dispose(), o.value = new H(l.value);
+  }), b(() => {
+    o.value.setSize(r.width.value, r.height.value);
+  });
+  const { pixelRatio: s } = Ae();
+  b(() => {
+    o.value.setPixelRatio(s.value);
+  });
+  const { logError: u } = k(), f = (() => {
+    const p = new H(), d = {
+      shadowMap: {
+        enabled: p.shadowMap.enabled,
+        type: p.shadowMap.type
+      },
+      toneMapping: p.toneMapping,
+      toneMappingExposure: p.toneMappingExposure,
+      outputColorSpace: p.outputColorSpace,
+      useLegacyLights: p.useLegacyLights
+    };
+    return p.dispose(), d;
+  })();
+  b(() => {
+    const p = y(t.preset);
+    p && (p in h || u("Renderer Preset must be one of these: " + Object.keys(h).join(", ")), te(o.value, h[p]));
+    const d = (L, x) => {
+      const T = y(L), S = () => {
+        if (p)
+          return N(h[p], x);
+      };
+      if (T !== void 0)
+        return T;
+      const m = S();
+      return m !== void 0 ? m : N(f, x);
+    }, v = (L, x) => je(o.value, x, d(L, x));
+    v(t.shadows, "shadowMap.enabled"), v(t.toneMapping, "toneMapping"), v(t.shadowMapType, "shadowMap.type"), v(t.useLegacyLights, "useLegacyLights"), v(t.outputColorSpace, "outputColorSpace"), v(t.toneMappingExposure, "toneMappingExposure");
+    const E = d(t.clearColor, "clearColor");
+    E && o.value.setClearColor(
+      E ? $e(E) : new O(0)
+      // default clear color is not easily/efficiently retrievable from three
+    );
+  });
+  const { pause: w, resume: C, onLoop: M } = ee();
+  return M(() => {
+    i.value && !y(n) && o.value.render(e, i.value);
+  }), C(), j(() => {
+    w(), o.value.dispose(), o.value.forceContextLoss();
+  }), {
+    renderer: o
   };
-  return D([F, Q], Z), D(
-    [p, d, _, w, E, g, h],
-    ee
-  ), D(
-    () => [P.canvas, P.container],
-    () => {
-      U(P.canvas) && U(P.container) && Me();
-    },
-    { immediate: !0, deep: !0 }
-  ), {
-    renderer: a,
-    isReady: r,
-    dispose: xe,
-    aspectRatio: F
-  };
 }
-function Pt(e) {
+function Ne(e) {
   const a = { nodes: {}, materials: {} };
-  return e && e.traverse((r) => {
-    r.name && (a.nodes[r.name] = r), r.material && !a.materials[r.material.name] && (a.materials[r.material.name] = r.material);
+  return e && e.traverse((t) => {
+    t.name && (a.nodes[t.name] = t), t.material && !a.materials[t.material.name] && (a.materials[t.material.name] = t.material);
   }), a;
 }
-async function Gt(e, a, r, t, o) {
-  const { logError: s } = k(), c = new e();
-  o && o(c), r && r(c);
-  const i = (Array.isArray(a) ? a : [a]).map(
-    (u) => new Promise((l, p) => {
-      c.load(
+async function ut(e, a, t, n, r) {
+  const { logError: i } = k(), l = new e();
+  r && r(l), t && t(l);
+  const s = (Array.isArray(a) ? a : [a]).map(
+    (u) => new Promise((c, f) => {
+      l.load(
         u,
-        (d) => {
-          d.scene && Object.assign(d, Pt(d.scene)), l(d);
+        (w) => {
+          w.scene && Object.assign(w, Ne(w.scene)), c(w);
         },
-        t,
-        (d) => p(s("[useLoader] - Failed to load resource", d))
+        n,
+        (w) => f(i("[useLoader] - Failed to load resource", w))
       );
     })
   );
-  return ge(a) ? await Promise.all(i) : await i[0];
+  return Y(a) ? await Promise.all(s) : await s[0];
 }
-async function Nt(e) {
-  const a = new Xe(), r = new Qe(a), t = (o) => new Promise((s, c) => {
-    r.load(
-      o,
-      (n) => s(n),
+async function lt(e) {
+  const a = new Me(), t = new _e(a), n = (r) => new Promise((i, l) => {
+    t.load(
+      r,
+      (o) => i(o),
       () => null,
       () => {
-        c(new Error("[useTextures] - Failed to load texture"));
+        l(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (ge(e)) {
-    const o = await Promise.all(e.map((s) => t(s)));
-    return e.length > 1 ? o : o[0];
+  if (Y(e)) {
+    const r = await Promise.all(e.map((i) => n(i)));
+    return e.length > 1 ? r : r[0];
   } else {
     const {
-      map: o,
-      displacementMap: s,
-      normalMap: c,
-      roughnessMap: n,
-      metalnessMap: i,
+      map: r,
+      displacementMap: i,
+      normalMap: l,
+      roughnessMap: o,
+      metalnessMap: s,
       aoMap: u,
-      alphaMap: l,
-      matcap: p
+      alphaMap: c,
+      matcap: f
     } = e;
     return {
-      map: o ? await t(o) : null,
-      displacementMap: s ? await t(s) : null,
-      normalMap: c ? await t(c) : null,
-      roughnessMap: n ? await t(n) : null,
-      metalnessMap: i ? await t(i) : null,
-      aoMap: u ? await t(u) : null,
-      alphaMap: l ? await t(l) : null,
-      matcap: p ? await t(p) : null
+      map: r ? await n(r) : null,
+      displacementMap: i ? await n(i) : null,
+      normalMap: l ? await n(l) : null,
+      roughnessMap: o ? await n(o) : null,
+      metalnessMap: s ? await n(s) : null,
+      aoMap: u ? await n(u) : null,
+      alphaMap: c ? await n(c) : null,
+      matcap: f ? await n(f) : null
     };
   }
 }
-const Ct = (e) => {
-  const { state: a, setState: r } = O(), t = N(() => {
-    var f;
-    return (f = a.canvas) == null ? void 0 : f.value;
-  }), { x: o, y: s } = st({ target: t }), { width: c, height: n, top: i, left: u } = ct(t), l = new Ze();
-  r("raycaster", l);
-  const p = ({ x: f, y: v }) => {
-    if (t.value)
+const qe = (e, { renderer: a, camera: t, raycaster: n }) => {
+  const r = _(() => a.value.domElement), { x: i, y: l } = ke({ target: r }), { width: o, height: s, top: u, left: c } = Se(r), f = ({ x: m, y: P }) => {
+    if (r.value)
       return {
-        x: (f - u.value) / c.value * 2 - 1,
-        y: -((v - i.value) / n.value) * 2 + 1
+        x: (m - c.value) / o.value * 2 - 1,
+        y: -((P - u.value) / s.value) * 2 + 1
       };
-  }, d = ({ x: f, y: v }) => {
-    if (a.camera)
-      return l.setFromCamera(new et(f, v), a.camera), l.intersectObjects(e.value, !1);
-  }, w = (f) => {
-    const v = p({
-      x: (f == null ? void 0 : f.clientX) ?? o.value,
-      y: (f == null ? void 0 : f.clientY) ?? s.value
+  }, w = ({ x: m, y: P }) => {
+    if (t.value)
+      return n.value.setFromCamera(new Ee(m, P), t.value), n.value.intersectObjects(e.value, !1);
+  }, C = (m) => {
+    const P = f({
+      x: (m == null ? void 0 : m.clientX) ?? i.value,
+      y: (m == null ? void 0 : m.clientY) ?? l.value
     });
-    return v ? d(v) || [] : [];
-  }, _ = N(() => w()), E = A(), g = A(), M = (f, v) => {
-    f.trigger({ event: v, intersects: w(v) });
-  }, x = (f) => {
-    M(g, f);
+    return P ? w(P) || [] : [];
+  }, M = _(() => C()), p = A(), d = A(), v = (m, P) => {
+    m.trigger({ event: P, intersects: C(P) });
+  }, E = (m) => {
+    v(d, m);
   };
-  let y;
-  const h = (f) => {
-    var v;
-    y = (v = w(f)[0]) == null ? void 0 : v.object;
-  }, R = (f) => {
-    var v;
-    f instanceof PointerEvent && y === ((v = w(f)[0]) == null ? void 0 : v.object) && M(E, f);
-  }, B = (f) => g.trigger({ event: f, intersects: [] }), P = ue(() => {
-    t != null && t.value && (t.value.addEventListener("pointerup", R), t.value.addEventListener("pointerdown", h), t.value.addEventListener("pointermove", x), t.value.addEventListener("pointerleave", B), P());
-  });
-  return fe(() => {
-    t != null && t.value && (t.value.removeEventListener("pointerup", R), t.value.removeEventListener("pointerdown", h), t.value.removeEventListener("pointermove", x), t.value.removeEventListener("pointerleave", B));
+  let L;
+  const x = (m) => {
+    var P;
+    L = (P = C(m)[0]) == null ? void 0 : P.object;
+  }, T = (m) => {
+    var P;
+    m instanceof PointerEvent && L === ((P = C(m)[0]) == null ? void 0 : P.object) && v(p, m);
+  }, S = (m) => d.trigger({ event: m, intersects: [] });
+  return r.value.addEventListener("pointerup", T), r.value.addEventListener("pointerdown", x), r.value.addEventListener("pointermove", E), r.value.addEventListener("pointerleave", S), j(() => {
+    r != null && r.value && (r.value.removeEventListener("pointerup", T), r.value.removeEventListener("pointerdown", x), r.value.removeEventListener("pointermove", E), r.value.removeEventListener("pointerleave", S));
   }), {
-    intersects: _,
-    onClick: (f) => E.on(f).off,
-    onPointerMove: (f) => g.on(f).off
+    intersects: M,
+    onClick: (m) => p.on(m).off,
+    onPointerMove: (m) => d.on(m).off
   };
 };
-function Ft() {
+function ct() {
   const { logWarning: e } = k();
-  function a(t, o, s) {
-    let c = null;
-    return t.traverse((n) => {
-      n[o] === s && (c = n);
-    }), c || e(`Child with ${o} '${s}' not found.`), c;
+  function a(n, r, i) {
+    let l = null;
+    return n.traverse((o) => {
+      o[r] === i && (l = o);
+    }), l || e(`Child with ${r} '${i}' not found.`), l;
   }
-  function r(t, o) {
-    return a(t, "name", o);
+  function t(n, r) {
+    return a(n, "name", r);
   }
   return {
     seek: a,
-    seekByName: r
+    seekByName: t
   };
 }
-const Mt = () => {
-  const e = Ae({
+const Ue = ({ scene: e, contextParts: a }) => {
+  const t = re({
     click: /* @__PURE__ */ new Map(),
@@ -382,101 +314,161 @@ pointerMove: /* @__PURE__ */ new Map(),
     pointerLeave: /* @__PURE__ */ new Map()
-  }), a = (n) => {
-    Object.values(e).forEach((i) => i.delete(n));
-  }, r = (n) => {
-    const { onClick: i, onPointerMove: u, onPointerEnter: l, onPointerLeave: p } = n;
-    i && e.click.set(n, i), u && e.pointerMove.set(n, u), l && e.pointerEnter.set(n, l), p && e.pointerLeave.set(n, p), n.addEventListener("removed", () => {
-      n.traverse((d) => {
-        a(d);
-      }), a(n);
-    });
-  }, t = N(
-    () => Et(
-      Object.values(e).map((n) => Array.from(n.keys())).flat(),
-      ({ uuid: n }) => n
+  }), n = (u) => {
+    Object.values(t).forEach((c) => c.delete(u));
+  }, r = (u) => {
+    const { onClick: c, onPointerMove: f, onPointerEnter: w, onPointerLeave: C } = u;
+    c && t.click.set(u, c), f && t.pointerMove.set(u, f), w && t.pointerEnter.set(u, w), C && t.pointerLeave.set(u, C);
+  };
+  e.userData.tres__registerAtPointerEventHandler = r, e.userData.tres__deregisterAtPointerEventHandler = n;
+  const i = _(
+    () => We(
+      Object.values(t).map((u) => Array.from(u.keys())).flat(),
+      ({ uuid: u }) => u
     )
-  ), { onClick: o, onPointerMove: s } = Ct(t);
-  o(({ intersects: n, event: i }) => {
-    var u;
-    n.length && ((u = e.click.get(n[0].object)) == null || u(n[0], i));
+  ), { onClick: l, onPointerMove: o } = qe(i, a);
+  l(({ intersects: u, event: c }) => {
+    var f;
+    u.length && ((f = t.click.get(u[0].object)) == null || f(u[0], c));
   });
-  let c;
-  return s(({ intersects: n, event: i }) => {
-    var w, _, E, g;
-    const u = (w = n == null ? void 0 : n[0]) == null ? void 0 : w.object, { pointerLeave: l, pointerEnter: p, pointerMove: d } = e;
-    c && c !== u && ((_ = l.get(c)) == null || _(c, i)), u && (c !== u && ((E = p.get(u)) == null || E(n[0], i)), (g = d.get(u)) == null || g(n[0], i)), c = u || null;
+  let s;
+  return o(({ intersects: u, event: c }) => {
+    var p, d, v, E;
+    const f = (p = u == null ? void 0 : u[0]) == null ? void 0 : p.object, { pointerLeave: w, pointerEnter: C, pointerMove: M } = t;
+    s && s !== f && ((d = w.get(s)) == null || d(s, c)), f && (s !== f && ((v = C.get(f)) == null || v(u[0], c)), (E = M.get(f)) == null || E(u[0], c)), s = f || null;
   }), {
     registerObject: r,
-    deregisterObject: a
+    deregisterObject: n
   };
-}, z = {
-  GEOMETRY_VIA_PROP: "tres__geometryViaProp",
-  MATERIAL_VIA_PROP: "tres__materialViaProp",
-  REGISTER_AT_POINTER_EVENT_HANDLER: "tres__registerAtPointerEventHandler"
 };
-let q = null, L = null;
-const { logError: ie } = k(), xt = {
-  createElement(e, a, r, t) {
-    var i, u;
-    if (t || (t = {}), t.args || (t.args = []), e === "template" || ht(e))
+function Je({
+  scene: e,
+  canvas: a,
+  windowSize: t,
+  disableRender: n,
+  rendererOptions: r
+}) {
+  const i = _(
+    () => y(t) ? he() : Be(y(a).parentElement)
+  ), l = _(() => i.value.width.value), o = _(() => i.value.height.value), s = _(() => l.value / o.value), u = {
+    height: o,
+    width: l,
+    aspectRatio: s
+  }, c = z(e), {
+    camera: f,
+    cameras: w,
+    addCamera: C,
+    removeCamera: M,
+    setCameraActive: p
+  } = Oe({ sizes: u, scene: e }), { renderer: d } = Ie(
+    {
+      scene: e,
+      canvas: a,
+      options: r,
+      contextParts: { sizes: u, camera: f },
+      disableRender: n
+    }
+  ), v = {
+    sizes: u,
+    scene: c,
+    camera: f,
+    cameras: ne(w),
+    renderer: d,
+    raycaster: z(new xe()),
+    addCamera: C,
+    removeCamera: M,
+    setCameraActive: p
+  };
+  return ae("useTres", v), v;
+}
+function Ke() {
+  const e = oe("useTres");
+  if (!e)
+    throw new Error("useTresContext must be used together with useTresContextProvider");
+  return e;
+}
+const ft = Ke;
+let V = null, g = null;
+const { logError: U } = k(), Xe = {
+  createElement(e, a, t, n) {
+    var l, o;
+    if (n || (n = {}), n.args || (n.args = []), e === "template" || Ve(e))
       return null;
-    let o = e.replace("Tres", ""), s;
+    let r = e.replace("Tres", ""), i;
     if (e === "primitive") {
-      (t == null ? void 0 : t.object) === void 0 && ie("Tres primitives need a prop 'object'");
-      const l = t.object;
-      o = l.type, s = Object.assign(l, { type: o, attach: t.attach, primitive: !0 });
+      (n == null ? void 0 : n.object) === void 0 && U("Tres primitives need a prop 'object'");
+      const s = n.object;
+      r = s.type, i = Object.assign(s, { type: r, attach: n.attach, primitive: !0 });
     } else {
-      const l = me.value[o];
-      l || ie(`${o} is not defined on the THREE namespace. Use extend to add it to the catalog.`), s = new l(...t.args);
+      const s = K.value[r];
+      s || U(`${r} is not defined on the THREE namespace. Use extend to add it to the catalog.`), i = new s(...n.args);
     }
-    s.isCamera && (t != null && t.position || s.position.set(3, 3, 3), t != null && t.lookAt || s.lookAt(0, 0, 0)), (t == null ? void 0 : t.attach) === void 0 && (s.isMaterial ? s.attach = "material" : s.isBufferGeometry && (s.attach = "geometry"));
-    const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: n } = z;
-    return s.isObject3D && ((i = t == null ? void 0 : t.material) != null && i.isMaterial && (s.userData[n] = !0), (u = t == null ? void 0 : t.geometry) != null && u.isBufferGeometry && (s.userData[c] = !0)), s;
+    return i.isCamera && (n != null && n.position || i.position.set(3, 3, 3), n != null && n.lookAt || i.lookAt(0, 0, 0)), (n == null ? void 0 : n.attach) === void 0 && (i.isMaterial ? i.attach = "material" : i.isBufferGeometry && (i.attach = "geometry")), i.isObject3D && ((l = n == null ? void 0 : n.material) != null && l.isMaterial && (i.userData.tres__materialViaProp = !0), (o = n == null ? void 0 : n.geometry) != null && o.isBufferGeometry && (i.userData.tres__geometryViaProp = !0)), i;
   },
   insert(e, a) {
-    var r, t, o, s, c, n, i;
-    if (a && a.isScene && (L = a), (((r = e == null ? void 0 : e.__vnode) == null ? void 0 : r.type) === "TresGroup" || ((t = e == null ? void 0 : e.__vnode) == null ? void 0 : t.type) === "TresObject3D") && a === null && !((s = (o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.ctx) != null && s.asyncResolved)) {
-      q = e;
+    var t, n, r, i, l, o, s, u, c;
+    if (a && a.isScene && (g = a), (((t = e == null ? void 0 : e.__vnode) == null ? void 0 : t.type) === "TresGroup" || ((n = e == null ? void 0 : e.__vnode) == null ? void 0 : n.type) === "TresObject3D") && a === null && !((i = (r = e == null ? void 0 : e.__vnode) == null ? void 0 : r.ctx) != null && i.asyncResolved)) {
+      V = e;
       return;
     } else
-      (c = e == null ? void 0 : e.__vnode) != null && c.type.includes("Controls") && a === null && (q = L);
-    a || (a = q), e != null && e.isObject3D && (a != null && a.isObject3D) ? (a.add(e), e.dispatchEvent({ type: "added" }), (i = (n = L == null ? void 0 : L.userData) == null ? void 0 : n[z.REGISTER_AT_POINTER_EVENT_HANDLER]) == null || i.call(n, e)) : e != null && e.isFog ? a.fog = e : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[a == null ? void 0 : a.attach], a && (a[e.attach] = e));
+      (l = e == null ? void 0 : e.__vnode) != null && l.type.includes("Controls") && a === null && (V = g);
+    if (a || (a = V), e != null && e.isObject3D) {
+      if (e != null && e.isCamera) {
+        if (!(g != null && g.userData.tres__registerCamera))
+          throw "could not find tres__registerCamera on scene's userData";
+        (s = g == null ? void 0 : (o = g.userData).tres__registerCamera) == null || s.call(o, e);
+      }
+      if (e != null && e.onClick || e != null && e.onPointerMove || e != null && e.onPointerEnter || e != null && e.onPointerLeave) {
+        if (!(g != null && g.userData.tres__registerAtPointerEventHandler))
+          throw "could not find tres__registerAtPointerEventHandler on scene's userData";
+        (c = g == null ? void 0 : (u = g.userData).tres__registerAtPointerEventHandler) == null || c.call(u, e);
+      }
+    }
+    e != null && e.isObject3D && (a != null && a.isObject3D) ? (a.add(e), e.dispatchEvent({ type: "added" })) : e != null && e.isFog ? a.fog = e : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[a == null ? void 0 : a.attach], a && (a[e.attach] = e));
   },
   remove(e) {
-    var a, r;
+    var a, t;
     if (e) {
       if (e.isObject3D) {
-        const t = e, o = (s) => {
-          var i, u;
-          const { GEOMETRY_VIA_PROP: c, MATERIAL_VIA_PROP: n } = z;
-          s.userData[n] || (i = s.material) == null || i.dispose(), s.userData[c] || (u = s.geometry) == null || u.dispose();
+        const n = e, r = (s) => {
+          var c, f;
+          const u = s;
+          s.userData.tres__materialViaProp || (c = u.material) == null || c.dispose(), s.userData.tres__geometryViaProp || (f = u.geometry) == null || f.dispose();
+        }, i = g == null ? void 0 : g.userData.tres__deregisterAtPointerEventHandler, l = (s) => {
+          if (!i)
+            throw "could not find tres__deregisterAtPointerEventHandler on scene's userData";
+          (s != null && s.onClick || s != null && s.onPointerMove || s != null && s.onPointerEnter || s != null && s.onPointerLeave) && (i == null || i(s));
+        }, o = (s) => {
+          const u = g == null ? void 0 : g.userData.tres__deregisterCamera;
+          if (!u)
+            throw "could not find tres__deregisterCamera on scene's userData";
+          s.isCamera && (u == null || u(s));
         };
-        t.traverse((s) => {
-          o(s);
-        }), o(t);
+        n.traverse((s) => {
+          r(s), o(s), l == null || l(s);
+        }), r(n), o(n), l == null || l(n);
       }
-      (a = e.removeFromParent) == null || a.call(e), (r = e.dispose) == null || r.call(e);
+      (a = e.removeFromParent) == null || a.call(e), (t = e.dispose) == null || t.call(e);
     }
   },
-  patchProp(e, a, r, t) {
+  patchProp(e, a, t, n) {
     if (e) {
-      let o = e, s = a, c = j(s), n = o == null ? void 0 : o[c];
-      if (o.type === "BufferGeometry") {
-        if (s === "args")
+      let r = e, i = a, l = B(i), o = r == null ? void 0 : r[l];
+      if (r.type === "BufferGeometry") {
+        if (i === "args")
           return;
-        o.setAttribute(
-          j(s),
-          new tt(...t)
+        r.setAttribute(
+          B(i),
+          new Le(...n)
         );
         return;
       }
-      if (s.includes("-") && n === void 0) {
-        const u = s.split("-");
-        n = u.reduce((l, p) => l[j(p)], o), s = u.pop(), c = s.toLowerCase(), n != null && n.set || (o = u.reduce((l, p) => l[j(p)], o));
+      if (i.includes("-") && o === void 0) {
+        const u = i.split("-");
+        o = u.reduce((c, f) => c[B(f)], r), i = u.pop(), l = i.toLowerCase(), o != null && o.set || (r = u.reduce((c, f) => c[B(f)], r));
       }
-      let i = t;
-      if (i === "" && (i = !0), oe(n)) {
-        Array.isArray(i) ? e[c](...i) : e[c](i);
+      let s = n;
+      if (s === "" && (s = !0), I(o)) {
+        Array.isArray(s) ? e[l](...s) : e[l](s);
         return;
       }
-      !(n != null && n.set) && !oe(n) ? o[c] = i : n.constructor === i.constructor && (n != null && n.copy) ? n == null || n.copy(i) : Array.isArray(i) ? n.set(...i) : !n.isColor && n.setScalar ? n.setScalar(i) : n.set(i);
+      !(o != null && o.set) && !I(o) ? r[l] = 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);
     }
@@ -496,5 +488,5 @@ },
   insertStaticContent: () => void 0
-}, { createApp: Rt } = Oe(xt), Tt = (e) => {
-  const a = Rt(r);
-  function r() {
+}, { createApp: Ye } = se(Xe), Qe = (e) => {
+  const a = Ye(t);
+  function t() {
     return e && e.default ? e.default() : [];
@@ -504,147 +496,118 @@ }
 };
-ve(Fe);
-const Lt = ["data-scene"], St = { style: { width: "100%", height: "100%" } }, At = ["data-scene"], Ot = /* @__PURE__ */ le({
-  __name: "TresScene",
+X(pe);
+const Ze = ["data-scene"], et = /* @__PURE__ */ ie({
+  __name: "TresCanvas",
   props: {
     shadows: { type: Boolean },
+    clearColor: {},
+    toneMapping: {},
     shadowMapType: {},
-    physicallyCorrectLights: { type: Boolean, default: !1 },
     useLegacyLights: { type: Boolean },
     outputColorSpace: {},
-    toneMapping: {},
     toneMappingExposure: {},
-    context: {},
-    powerPreference: {},
-    preserveDrawingBuffer: { type: Boolean },
-    clearColor: {},
     windowSize: { type: Boolean },
     preset: {},
     disableRender: { type: Boolean },
-    camera: {}
-  },
-  setup(e, { expose: a }) {
-    const r = e, { logWarning: t } = k();
-    r.physicallyCorrectLights === !0 && t("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const o = G(), s = G(), c = new at(), n = Mt(), { setState: i } = O();
-    c.userData[z.REGISTER_AT_POINTER_EVENT_HANDLER] = n.registerObject, i("scene", c), i("canvas", s), i("container", o), i("pointerEventHandler", n), i("appContext", ke());
-    const { onLoop: u, resume: l } = he(), { activeCamera: p, pushCamera: d, clearCameras: w } = dt();
-    Be(() => {
-      E();
-    }), fe(() => {
-      i("renderer", null);
-    });
-    function _() {
-      const y = c.getObjectByProperty("isCamera", !0);
-      if (y)
-        d(y);
-      else {
-        t("No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.");
-        const h = new I(45, window.innerWidth / window.innerHeight, 0.1, 1e3);
-        h.position.set(3, 3, 3), h.lookAt(0, 0, 0), d(h);
-      }
-    }
-    function E() {
-      const { renderer: y } = _t(r);
-      r.camera && d(r.camera), u(() => {
-        var h;
-        p.value && r.disableRender !== !0 && ((h = y.value) == null || h.render(c, p.value));
-      });
-    }
-    let g;
-    const M = je();
-    function x() {
-      g = Tt(M);
-      const y = O();
-      g.provide("useTres", y), g.provide(K, y), g.provide("extend", ve), g.mount(c), _();
-    }
-    return x(), a({
-      scene: c
-    }), D(
-      () => r.camera,
-      (y) => {
-        y && (w(), d(y));
-      }
-    ), (y, h) => (pe(), De("div", {
-      ref_key: "container",
-      ref: o,
-      key: W(c).uuid,
-      "data-scene": W(c).uuid,
-      style: { position: "relative", width: "100%", height: "100%", pointerEvents: "auto", touchAction: "none" }
-    }, [
-      te("div", St, [
-        te("canvas", {
-          ref_key: "canvas",
-          ref: s,
-          "data-scene": W(c).uuid,
-          style: Ie({ display: "block", width: "100%", height: "100%", position: y.windowSize ? "fixed" : "absolute", top: 0, left: 0 })
-        }, null, 12, At)
-      ])
-    ], 8, Lt));
-  }
-}), kt = /* @__PURE__ */ le({
-  __name: "TresCanvas",
-  props: {
-    shadows: { type: Boolean },
-    shadowMapType: {},
-    physicallyCorrectLights: { type: Boolean },
-    useLegacyLights: { type: Boolean },
-    outputColorSpace: {},
-    toneMapping: {},
-    toneMappingExposure: {},
+    camera: {},
     context: {},
+    precision: {},
+    alpha: { type: Boolean, default: !1 },
+    premultipliedAlpha: { type: Boolean },
+    antialias: { type: Boolean, default: !0 },
+    stencil: { type: Boolean, default: !0 },
+    preserveDrawingBuffer: { type: Boolean, default: !1 },
     powerPreference: {},
-    preserveDrawingBuffer: { type: Boolean },
-    clearColor: {},
-    windowSize: { type: Boolean },
-    preset: {},
-    disableRender: { type: Boolean },
-    camera: {}
+    depth: { type: Boolean, default: !0 },
+    logarithmicDepthBuffer: { type: Boolean },
+    failIfMajorPerformanceCaveat: { type: Boolean }
   },
-  setup(e, { expose: a }) {
-    const r = e, t = ft();
-    return a(t), (o, s) => (pe(), He(Ot, Ve(ze(r)), {
-      default: Ge(() => [
-        Ne(o.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
+  setup(e) {
+    const a = e, { logWarning: t } = k(), n = W(), r = z(new Te());
+    ee();
+    const i = ue();
+    let l;
+    const o = (u) => {
+      l = Qe(i), l.provide("useTres", u), l.provide("extend", X), l.mount(r.value);
+    }, s = _(() => a.disableRender);
+    return le(() => {
+      const u = n, c = Je({
+        scene: r.value,
+        canvas: u,
+        windowSize: a.windowSize,
+        disableRender: s,
+        rendererOptions: a
+      });
+      Ue({ scene: r.value, contextParts: c });
+      const { addCamera: f, camera: w, cameras: C, removeCamera: M } = c;
+      o(c);
+      const p = () => {
+        const d = new G(45, window.innerWidth / window.innerHeight, 0.1, 1e3);
+        d.position.set(3, 3, 3), d.lookAt(0, 0, 0), f(d);
+        const v = b(
+          () => {
+            C.value.length >= 2 && (d.removeFromParent(), M(d), v == null || v());
+          }
+        );
+      };
+      J(() => a.camera, (d, v) => {
+        d ? f(d) : v && (v.removeFromParent(), M(v));
+      }, {
+        immediate: !0
+      }), w.value || (t(
+        "No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene."
+      ), p());
+    }), (u, c) => (ce(), fe("canvas", {
+      ref_key: "canvas",
+      ref: n,
+      "data-scene": r.value.uuid,
+      style: me({
+        display: "block",
+        width: "100%",
+        height: "100%",
+        position: u.windowSize ? "fixed" : "relative",
+        top: 0,
+        left: 0,
+        pointerEvents: "auto",
+        touchAction: "none",
+        zIndex: 1
+      })
+    }, null, 12, Ze));
   }
-}), Bt = [
+}), tt = [
   "TresCanvas",
   "TresLeches",
   "TresScene"
-], jt = {
+], rt = {
   template: {
     compilerOptions: {
-      isCustomElement: (e) => e.startsWith("Tres") && !Bt.includes(e) || e === "primitive"
+      isCustomElement: (e) => e.startsWith("Tres") && !tt.includes(e) || e === "primitive"
     }
   }
-}, Wt = jt, $t = {
+}, mt = rt, pt = {
   install(e) {
-    e.component("TresCanvas", kt);
+    e.component("TresCanvas", et);
   }
 };
 export {
-  lt as CameraType,
-  K as TRES_CONTEXT_KEY,
-  kt as TresCanvas,
-  me as catalogue,
-  $t as default,
-  ve as extend,
-  zt as isProd,
-  yt as normalizeColor,
-  Vt as normalizeVectorFlexibleParam,
-  Wt as templateCompilerOptions,
-  Pt as trasverseObjects,
-  dt as useCamera,
-  Gt as useLoader,
+  et as TresCanvas,
+  K as catalogue,
+  pt as default,
+  X as extend,
+  st as isProd,
+  $e as normalizeColor,
+  it as normalizeVectorFlexibleParam,
+  mt as templateCompilerOptions,
+  Ne as trasverseObjects,
+  Oe as useCamera,
+  ut as useLoader,
   k as useLogger,
-  Mt as usePointerEventHandler,
-  Ct as useRaycaster,
-  he as useRenderLoop,
-  _t as useRenderer,
-  Ft as useSeek,
-  Nt as useTexture,
-  O as useTres,
-  ft as useTresProvider
+  Ue as usePointerEventHandler,
+  qe as useRaycaster,
+  ee as useRenderLoop,
+  Ie as useRenderer,
+  ct as useSeek,
+  lt as useTexture,
+  ft as useTres,
+  Ke as useTresContext,
+  Je as useTresContextProvider
 };

dist/types/index.d.ts

@@ -0,3 +1,4 @@
+import { DefineComponent, Ref, VNode } from 'vue';
 import type * as THREE from 'three';
-import { DefineComponent, Ref, VNode } from 'vue';
+import type { EventProps as PointerEventHandlerEventProps } from '../composables/usePointerEventHandler';
 export type AttachFnType<O = any> = (parent: any, self: O) => () => void;
@@ -36,5 +37,4 @@ export type AttachType<O = any> = string | AttachFnType<O>;
     userData: {
-        MATERIAL_VIA_PROP: boolean;
-        GEOMETRY_VIA_PROP: boolean;
-    } & {
+        tres__materialViaProp: boolean;
+        tres__geometryViaProp: boolean;
         [key: string]: any;
@@ -44,2 +44,11 @@ };
 export type TresObject = TresBaseObject & (TresObject3D | THREE.BufferGeometry | THREE.Material | THREE.Fog);
+export interface TresScene extends THREE.Scene {
+    userData: {
+        tres__registerCamera?: (newCamera: THREE.Camera, active?: boolean) => void;
+        tres__deregisterCamera?: (camera: THREE.Camera) => void;
+        tres__registerAtPointerEventHandler?: (object: THREE.Object3D & PointerEventHandlerEventProps) => void;
+        tres__deregisterAtPointerEventHandler?: (object: THREE.Object3D) => void;
+        [key: string]: any;
+    };
+}
 export interface Intersection extends THREE.Intersection {
@@ -46,0 +55,0 @@ /** The event source (the object which registered the handler) */

dist/utils/index.d.ts

@@ -7,1 +7,3 @@ export declare function toSetMethodName(key: string): string;
 export declare const uniqueBy: <T, K>(array: T[], iteratee: (value: T) => K) => T[];
+export declare const get: <T>(obj: any, path: string | string[]) => T | undefined;
+export declare const set: (obj: any, path: string | string[], value: any) => void;

package.json

 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.4.2",
+  "version": "3.0.0",
   "type": "module",
@@ -67,3 +67,3 @@ "packageManager": "pnpm@8.3.1",
     "@alvarosabu/utils": "^3.1.1",
-    "@vueuse/core": "^10.2.0"
+    "@vueuse/core": "^10.2.1"
   },
@@ -77,13 +77,13 @@ "devDependencies": {
     "@types/three": "^0.152.1",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vitest/coverage-c8": "^0.32.2",
-    "@vitest/ui": "^0.32.2",
+    "@vitest/coverage-c8": "^0.32.3",
+    "@vitest/ui": "^0.32.3",
     "@vue/test-utils": "^2.4.0",
-    "eslint": "^8.43.0",
+    "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^9.15.1",
     "esno": "^0.16.3",
-    "gsap": "^3.12.1",
+    "gsap": "^3.12.2",
     "jsdom": "^22.1.0",
@@ -98,4 +98,4 @@ "kolorist": "^1.8.0",
     "rollup-plugin-visualizer": "^5.9.2",
-    "three": "^0.153.0",
-    "unocss": "^0.53.3",
+    "three": "^0.154.0",
+    "unocss": "^0.53.4",
     "unplugin": "^1.3.1",
@@ -105,8 +105,8 @@ "unplugin-vue-components": "^0.25.1",
     "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "2.3.0",
-    "vite-plugin-inspect": "^0.7.29",
-    "vite-plugin-require-transform": "^1.0.17",
+    "vite-plugin-dts": "3.0.2",
+    "vite-plugin-inspect": "^0.7.32",
+    "vite-plugin-require-transform": "^1.0.20",
     "vite-svg-loader": "^4.0.0",
     "vitepress": "1.0.0-beta.5",
-    "vitest": "^0.32.2",
+    "vitest": "^0.32.3",
     "vue": "^3.3.4",
@@ -113,0 +113,0 @@ "vue-demi": "^0.14.5"

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

316028

increased by270.26%

Lines of code

4665

increased by164.31%

Worsened metrics

Number of package files

31

decreased by-8.82%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@vueuse/core@^10.2.1