@tresjs/core 5.8.0 → 5.8.2

package/README.md

@@ -0,0 +1,80 @@
+<p align="center">
+  <a href="https://npmx.dev/package/@tresjs/core"><img src="https://npmx.dev/api/registry/badge/version/@tresjs/core" alt="version"></a>
+  <a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/dm/@tresjs/core?color=82DBA1" alt="npm downloads"></a>
+  <a href="https://tresjs.org/discord"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
+</p>
+<br/>
+
+# TresJS Core
+
+> Declarative ThreeJS using Vue Components
+
+- 💡 Build 3D scenes with Vue components
+- ⚡️ Powered by Vite
+- 🎨 Vue custom renderer for Three.js
+- 🥰 Always up-to-date with the latest Three.js features
+- 🦾 Fully Typed
+
+TresJS is a Vue custom renderer that lets you build Three.js scenes declaratively using Vue components. Any Three.js class can be used as a component by prefixing it with `Tres` (e.g., `<TresMesh>`, `<TresBoxGeometry>`).
+
+## Installation
+
+```bash
+pnpm i @tresjs/core three
+```
+
+## TypeScript
+
+Install Three.js type definitions:
+
+```bash
+pnpm i @types/three -D
+```
+
+### Vite Configuration
+
+Add the template compiler options to your `vite.config.ts` to make the custom renderer work and avoid console warnings:
+
+```ts
+import { templateCompilerOptions } from '@tresjs/core'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      ...templateCompilerOptions,
+    }),
+  ],
+})
+```
+
+## Docs
+
+Checkout the [docs](https://docs.tresjs.org/)
+
+### Build
+
+To build the package run:
+
+```bash
+pnpm run build
+```
+
+### Test
+
+```bash
+pnpm run test
+```
+
+### Playground
+
+To run the playground:
+
+```bash
+pnpm run playground
+```
+
+## License
+
+[MIT](/LICENSE)

package/dist/template-compiler-options.d.mts

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.8.0
+  * version: v5.8.2
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)

package/dist/template-compiler-options.mjs

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.8.0
+  * version: v5.8.2
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)

package/dist/tres.d.ts

@@ -1,16 +1,16 @@
 /**
   * name: @tresjs/core
-  * version: v5.8.0
+  * version: v5.8.2
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
-import * as vue15 from "vue";
+import * as vue14 from "vue";
 import { App, ComputedRef, DefineComponent, MaybeRef, MaybeRefOrGetter, Reactive, Ref, ShallowRef, VNode, VNodeRef } from "vue";
 import * as THREE from "three";
 import { BufferGeometry, Camera, Color, ColorRepresentation, ColorSpace, Event, Fog, Group, Layers, Light, Loader, LoadingManager, Material, Mesh, Object3D, Object3DEventMap, OrthographicCamera, PerspectiveCamera, Scene, ShadowMapType, ToneMapping, Vector3, WebGLRenderer } from "three";
 import * as _vueuse_core0 from "@vueuse/core";
-import { EventHookOff, MaybeRef as MaybeRef$1, UseAsyncStateOptions, UseAsyncStateReturn } from "@vueuse/core";
+import { EventHookOff, UseAsyncStateOptions, UseAsyncStateReturn } from "@vueuse/core";
 import { PointerEvent, PointerEventsMap } from "@pmndrs/pointer-events";
 import { Renderer } from "three/webgpu";
 
@@ -323,11 +323,11 @@ declare function useRendererManager({
   onRender: _vueuse_core0.EventHookOn<TresRenderer>;
   onError: _vueuse_core0.EventHookOn<TresRendererError>;
   invalidate: (amountOfFramesToInvalidate?: number) => void;
-  canBeInvalidated: vue15.ComputedRef<boolean>;
+  canBeInvalidated: vue14.ComputedRef<boolean>;
   mode: "always" | "on-demand" | "manual" | undefined;
   replaceRenderFunction: (fn: RenderFunction) => void;
-  isInitialized: vue15.Ref<boolean, boolean>;
-  error: vue15.Ref<TresRendererError | null, TresRendererError | null>;
+  isInitialized: vue14.Ref<boolean, boolean>;
+  error: vue14.Ref<TresRendererError | null, TresRendererError | null>;
 };
 type UseRendererManagerReturn = ReturnType<typeof useRendererManager>;
 //#endregion
@@ -515,7 +515,7 @@ declare function buildGraph(object: Object3D | TresObject): TresObjectMap;
 //#endregion
 //#region src/composables/useLoader/component.vue.d.ts
 declare const __VLS_export$2: <T extends TresObjectMap>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue15.PublicProps & __VLS_PrettifyLocal<{
+  props: vue14.PublicProps & __VLS_PrettifyLocal<{
     /**
      * The THREE.js loader to use
      */
@@ -528,6 +528,7 @@ declare const __VLS_export$2: <T extends TresObjectMap>(__VLS_props: NonNullable
      * Optional THREE.js LoadingManager
      */
     manager?: LoadingManager;
+    extensions?: (res: T) => void;
   } & {
     onError?: ((error: unknown) => any) | undefined;
     onLoaded?: ((result: T) => any) | undefined;
@@ -538,20 +539,20 @@ declare const __VLS_export$2: <T extends TresObjectMap>(__VLS_props: NonNullable
   attrs: any;
   slots: {
     default?: (props: {
-      state: vue15.UnwrapRef<T>;
+      state: vue14.UnwrapRef<T>;
       isLoading: boolean;
       error: unknown;
     }) => any;
   };
   emit: ((evt: "error", error: unknown) => void) & ((evt: "loaded", result: T) => void);
-}>) => vue15.VNode & {
+}>) => vue14.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default$2: typeof __VLS_export$2;
 type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
 //#region src/composables/useGraph/index.d.ts
-declare const useGraph: (object: MaybeRef$1<TresObject | undefined>) => vue15.ComputedRef<TresObjectMap | undefined>;
+declare const useGraph: (object: MaybeRef<TresObject | undefined>) => vue14.ComputedRef<TresObjectMap | undefined>;
 //#endregion
 //#region src/utils/createPriorityEventHook.d.ts
 type Callback<T> = Parameters<EventHookOff<T>>[0];
@@ -602,7 +603,7 @@ type LoopContext = RafLoopContext & TresPartialContext;
 declare const useLoop: () => {
   stop: () => void;
   start: () => void;
-  isActive: Readonly<vue15.ShallowRef<boolean>>;
+  isActive: Readonly<vue14.ShallowRef<boolean>>;
   onBeforeRender: PriorityEventHookOn<LoopContext>;
   onRender: PriorityEventHookOn<LoopContext>;
   render: (fn: RenderFunction) => void;
@@ -709,10 +710,10 @@ type __VLS_Props = ContextProps & {
 type __VLS_Slots$1 = {
   default: () => any;
 };
-declare const __VLS_base$1: vue15.DefineComponent<__VLS_Props, {
-  context: vue15.ShallowRef<TresContext, TresContext>;
+declare const __VLS_base$1: vue14.DefineComponent<__VLS_Props, {
+  context: vue14.ShallowRef<TresContext, TresContext>;
   dispose: () => void;
-}, {}, {}, {}, vue15.ComponentOptionsMixin, vue15.ComponentOptionsMixin, {
+}, {}, {}, {}, vue14.ComponentOptionsMixin, vue14.ComponentOptionsMixin, {
   click: (event: TresPointerEvent) => any;
   contextmenu: (event: TresPointerEvent) => any;
   pointermove: (event: TresPointerEvent) => any;
@@ -732,7 +733,7 @@ declare const __VLS_base$1: vue15.DefineComponent<__VLS_Props, {
   render: (context: TresContext) => any;
   beforeLoop: (context: TresContextWithClock) => any;
   loop: (context: TresContextWithClock) => any;
-}, string, vue15.PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, vue14.PublicProps, Readonly<__VLS_Props> & Readonly<{
   onClick?: ((event: TresPointerEvent) => any) | undefined;
   onContextmenu?: ((event: TresPointerEvent) => any) | undefined;
   onPointermove?: ((event: TresPointerEvent) => any) | undefined;
@@ -752,7 +753,7 @@ declare const __VLS_base$1: vue15.DefineComponent<__VLS_Props, {
   onRender?: ((context: TresContext) => any) | undefined;
   onBeforeLoop?: ((context: TresContextWithClock) => any) | undefined;
   onLoop?: ((context: TresContextWithClock) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue15.ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, vue14.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
 declare const _default$1: typeof __VLS_export$1;
 type __VLS_WithSlots$1<T, S> = T & {
@@ -771,7 +772,7 @@ interface TresCanvasInstance {
 type __VLS_Slots = {
   default: () => any;
 };
-declare const __VLS_base: vue15.DefineComponent<ContextProps, TresCanvasInstance, {}, {}, {}, vue15.ComponentOptionsMixin, vue15.ComponentOptionsMixin, {
+declare const __VLS_base: vue14.DefineComponent<ContextProps, TresCanvasInstance, {}, {}, {}, vue14.ComponentOptionsMixin, vue14.ComponentOptionsMixin, {
   click: (event: TresPointerEvent) => any;
   contextmenu: (event: TresPointerEvent) => any;
   pointermove: (event: TresPointerEvent) => any;
@@ -791,7 +792,7 @@ declare const __VLS_base: vue15.DefineComponent<ContextProps, TresCanvasInstance
   render: (context: TresContext) => any;
   beforeLoop: (context: TresContextWithClock) => any;
   loop: (context: TresContextWithClock) => any;
-}, string, vue15.PublicProps, Readonly<ContextProps> & Readonly<{
+}, string, vue14.PublicProps, Readonly<ContextProps> & Readonly<{
   onClick?: ((event: TresPointerEvent) => any) | undefined;
   onContextmenu?: ((event: TresPointerEvent) => any) | undefined;
   onPointermove?: ((event: TresPointerEvent) => any) | undefined;
@@ -813,6 +814,7 @@ declare const __VLS_base: vue15.DefineComponent<ContextProps, TresCanvasInstance
   onLoop?: ((context: TresContextWithClock) => any) | undefined;
 }>, {
   windowSize: boolean;
+  toneMapping: THREE.ToneMapping;
   enableProvideBridge: boolean;
   antialias: boolean;
   stencil: boolean;
@@ -824,11 +826,10 @@ declare const __VLS_base: vue15.DefineComponent<ContextProps, TresCanvasInstance
   clearColor: THREE.ColorRepresentation;
   clearAlpha: number;
   shadows: boolean;
-  toneMapping: THREE.ToneMapping;
   shadowMapType: THREE.ShadowMapType;
   useLegacyLights: boolean;
   renderMode: "always" | "on-demand" | "manual";
-}, {}, {}, {}, string, vue15.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue14.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {
@@ -965,7 +966,7 @@ declare const isObject3D: (value: unknown) => value is Object3D<THREE.Object3DEv
  *   // TypeScript knows value is Mesh here
  *   value.geometry // OK
  */
-declare const isMesh: (value: unknown) => value is Mesh<BufferGeometry<THREE.NormalBufferAttributes, THREE.BufferGeometryEventMap>, Material | Material[], THREE.Object3DEventMap>;
+declare const isMesh: (value: unknown) => value is Mesh<BufferGeometry<THREE.NormalBufferAttributes, THREE.BufferGeometryEventMap>, Material<THREE.MaterialEventMap> | Material<THREE.MaterialEventMap>[], THREE.Object3DEventMap>;
 /**
  * Type guard to check if a value is a Three.js Camera
  * @param value - The value to check
@@ -1043,7 +1044,7 @@ declare const isBufferGeometry: (value: unknown) => value is BufferGeometry<THRE
  * }
  * ```
  */
-declare const isMaterial: (value: unknown) => value is Material;
+declare const isMaterial: (value: unknown) => value is Material<THREE.MaterialEventMap>;
 /**
  * Type guard to check if a value is a Three.js Light
  * @param value - The value to check
@@ -1091,7 +1092,7 @@ declare const isFog: (value: unknown) => value is Fog;
  * }
  * ```
  */
-declare const isScene: (value: unknown) => value is Scene;
+declare const isScene: (value: unknown) => value is Scene<THREE.Object3DEventMap>;
 /**
  * Type guard to check if a value is a Three.js Group
  * @param value - The value to check

package/dist/tres.js

@@ -1,20 +1,21 @@
 /**
   * name: @tresjs/core
-  * version: v5.8.0
+  * version: v5.8.2
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, shallowRef, toValue, unref, useSlots, watch, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, shallowRef, toValue, unref, useSlots, watch, watchEffect, withCtx } from "vue";
 import * as THREE from "three";
-import { ACESFilmicToneMapping, ArrowHelper, BackSide, BufferAttribute, BufferGeometry, Color, DirectionalLightHelper, DoubleSide, Float32BufferAttribute, HemisphereLightHelper, Layers, Line, LineBasicMaterial, Material, MathUtils, Mesh, MeshBasicMaterial, PCFSoftShadowMap, PerspectiveCamera, PointLightHelper, REVISION, Scene, SpotLightHelper, Vector3, WebGLRenderer } from "three";
+import { ACESFilmicToneMapping, ArrowHelper, BufferAttribute, Color, DirectionalLightHelper, DoubleSide, HemisphereLightHelper, Layers, Material, MathUtils, Mesh, MeshBasicMaterial, PCFSoftShadowMap, PerspectiveCamera, PointLightHelper, REVISION, Scene, SpotLightHelper, Vector3, WebGLRenderer } from "three";
 import { createEventHook, createInjectionState, promiseTimeout, refDebounced, tryOnScopeDispose, unrefElement, useAsyncState, useDevicePixelRatio, useElementSize, useFps, useMemory, useRafFn, useTimeout, useWindowSize, whenever } from "@vueuse/core";
 import { camel, isEqual, isFunction, isNumber, isObject, isString, isUndefined } from "radashi";
 import { forwardHtmlEvents, getVoidObject } from "@pmndrs/pointer-events";
 import { setupDevtoolsPlugin } from "@vue/devtools-api";
+import { RectAreaLightHelper } from "three-stdlib";
 
 //#region package.json
-var version = "5.8.0";
+var version = "5.8.2";
 
 //#endregion
 //#region src/utils/makeMap.ts
@@ -533,13 +534,20 @@ var component_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		manager: {
 			type: Object,
 			required: false
+		},
+		extensions: {
+			type: Function,
+			required: false
 		}
 	},
 	emits: ["loaded", "error"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { state, isLoading, error } = useLoader(props.loader, props.path, { manager: props.manager });
+		const { state, isLoading, error } = useLoader(props.loader, props.path, {
+			manager: props.manager,
+			extensions: props.extensions
+		});
 		whenever(error, (err) => {
 			if (err) emit("error", err);
 		});
@@ -1397,6 +1405,15 @@ const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 	};
 };
 
+//#endregion
+//#region src/core/roots.ts
+const _roots = /* @__PURE__ */ new Map();
+const getRoot = (canvas) => _roots.get(canvas);
+const setRoot = (canvas, root) => {
+	_roots.set(canvas, root);
+};
+const deleteRoot = (canvas) => _roots.delete(canvas);
+
 //#endregion
 //#region src/devtools/DevtoolsMessenger.ts
 const QUEUEABLE_MESSAGE_TYPES = ["asset-load"];
@@ -2071,7 +2088,7 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const scene = shallowRef(new Scene());
 		const instance = getCurrentInstance();
 		extend(THREE);
-		const createInternalComponent = (context$1, empty = false) => defineComponent({ setup() {
+		const createInternalComponent = (context$1, hmrTick) => defineComponent({ setup() {
 			const ctx = getCurrentInstance()?.appContext;
 			if (ctx) ctx.app = instance?.appContext.app;
 			const provides = {};
@@ -2089,15 +2106,27 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			provide(INJECTION_KEY, context$1);
 			provide("extend", extend);
 			if (typeof window !== "undefined" && ctx?.app) registerTresDevtools(ctx?.app, context$1);
-			return () => h(Fragment, null, !empty ? slots.default() : []);
+			return () => {
+				hmrTick.value;
+				return h(Fragment, null, slots.default?.() ?? []);
+			};
 		} });
-		const mountCustomRenderer = (context$1, empty = false) => {
-			const InternalComponent = createInternalComponent(context$1, empty);
-			const { render } = createRenderer(nodeOps({
+		const mountCustomRenderer = (context$1) => {
+			const canvas = props.canvas;
+			if (getRoot(canvas)) return;
+			const hmrTick = ref(0);
+			const internalComponent = createInternalComponent(context$1, hmrTick);
+			const renderer$1 = createRenderer(nodeOps({
 				context: context$1,
 				options: props.customRendererOptions
 			}));
-			render(h(InternalComponent), scene.value);
+			renderer$1.render(h(internalComponent), scene.value);
+			setRoot(canvas, {
+				renderer: renderer$1,
+				internalComponent,
+				hmrTick,
+				context: context$1
+			});
 		};
 		const dispose = (context$1, force = false) => {
 			disposeObject3D(context$1.scene.value);
@@ -2125,14 +2154,18 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			context,
 			dispose: () => dispose(context.value, true)
 		});
-		const handleHMR = (context$1) => {
-			mountCustomRenderer(context$1);
+		const handleHMR = () => {
+			const root = getRoot(props.canvas);
+			if (root) root.hmrTick.value++;
 		};
 		const unmountCanvas = () => {
+			const root = getRoot(props.canvas);
+			if (!root) return;
 			const isTresScene = (value) => isScene(value) && "__tres" in value;
 			if (isTresScene(scene.value)) scene.value.__tres.isUnmounting = true;
-			mountCustomRenderer(context.value, true);
+			root.renderer.render(null, scene.value);
 			dispose(context.value);
+			deleteRoot(props.canvas);
 		};
 		const { camera, renderer } = context.value;
 		const { registerCamera, cameras, activeCamera, deregisterCamera } = camera;
@@ -2175,14 +2208,20 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			});
 		});
 		renderer.onReady(() => {
-			mountCustomRenderer(context.value, false);
+			mountCustomRenderer(context.value);
 			emit("ready", context.value);
 			if (!activeCamera.value) addDefaultCamera();
 		});
 		renderer.onError((error) => {
 			emit("error", error);
 		});
-		if (import.meta.hot) import.meta.hot.on("vite:afterUpdate", () => handleHMR(context.value));
+		if (import.meta.hot) {
+			const hmrHandler = () => handleHMR();
+			import.meta.hot.on("vite:afterUpdate", hmrHandler);
+			onBeforeUnmount(() => {
+				import.meta.hot?.off?.("vite:afterUpdate", hmrHandler);
+			});
+		}
 		onMounted(async () => {
 			await promiseTimeout(3e3);
 			if (!context.value.sizes.width || !context.value.sizes.height.value) console.warn(`TresCanvas: The canvas has no area, so nothing can be rendered. Set it manually on the parent element or use the prop windowSize.`);
@@ -2482,86 +2521,6 @@ const vDistanceTo = {
 	}
 };
 
-//#endregion
-//#region ../../node_modules/.pnpm/three-stdlib@2.36.1_three@0.183.1/node_modules/three-stdlib/helpers/RectAreaLightHelper.js
-var RectAreaLightHelper = class extends Line {
-	constructor(light, color) {
-		const positions = [
-			1,
-			1,
-			0,
-			-1,
-			1,
-			0,
-			-1,
-			-1,
-			0,
-			1,
-			-1,
-			0,
-			1,
-			1,
-			0
-		];
-		const geometry = new BufferGeometry();
-		geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
-		geometry.computeBoundingSphere();
-		const material = new LineBasicMaterial({ fog: false });
-		super(geometry, material);
-		this.light = light;
-		this.color = color;
-		this.type = "RectAreaLightHelper";
-		const positions2 = [
-			1,
-			1,
-			0,
-			-1,
-			1,
-			0,
-			-1,
-			-1,
-			0,
-			1,
-			1,
-			0,
-			-1,
-			-1,
-			0,
-			1,
-			-1,
-			0
-		];
-		const geometry2 = new BufferGeometry();
-		geometry2.setAttribute("position", new Float32BufferAttribute(positions2, 3));
-		geometry2.computeBoundingSphere();
-		this.add(new Mesh(geometry2, new MeshBasicMaterial({
-			side: BackSide,
-			fog: false
-		})));
-	}
-	updateMatrixWorld() {
-		this.scale.set(.5 * this.light.width, .5 * this.light.height, 1);
-		if (this.color !== void 0) {
-			this.material.color.set(this.color);
-			this.children[0].material.color.set(this.color);
-		} else {
-			this.material.color.copy(this.light.color).multiplyScalar(this.light.intensity);
-			const c = this.material.color;
-			const max = Math.max(c.r, c.g, c.b);
-			if (max > 1) c.multiplyScalar(1 / max);
-			this.children[0].material.color.copy(this.material.color);
-		}
-		this.matrixWorld.extractRotation(this.light.matrixWorld).scale(this.scale).copyPosition(this.light.matrixWorld);
-		this.children[0].matrixWorld.copy(this.matrixWorld);
-	}
-	dispose() {
-		this.geometry.dispose();
-		this.material.dispose();
-		this.children[0].geometry.dispose();
-		this.children[0].material.dispose();
-	}
-};
-
 //#endregion
 //#region src/directives/vLightHelper.ts
 let CurrentHelper;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "5.8.0",
+  "version": "5.8.2",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
@@ -45,39 +45,41 @@
     "vue": ">=3.4"
   },
   "dependencies": {
-    "@pmndrs/pointer-events": "^6.6.17",
-    "@vue/devtools-api": "^7.7.2",
-    "@vueuse/core": "^13.9.0",
-    "radashi": "^12.6.2"
+    "@pmndrs/pointer-events": "^6.6.30",
+    "@vue/devtools-api": "^8.1.2",
+    "@vueuse/core": "^14.3.0",
+    "radashi": "^12.9.1",
+    "three-stdlib": "^2.36.1"
   },
   "devDependencies": {
-    "@types/three": "^0.183.0",
-    "@typescript-eslint/eslint-plugin": "^8.42.0",
-    "@typescript-eslint/parser": "^8.42.0",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vitest/coverage-v8": "3.2.4",
-    "@vitest/ui": "^3.2.4",
-    "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.34.0",
-    "eslint-plugin-vue": "^10.4.0",
-    "jsdom": "^27.0.0",
+    "@types/node": "^25.9.3",
+    "@types/three": "^0.184.1",
+    "@typescript-eslint/eslint-plugin": "^8.61.0",
+    "@typescript-eslint/parser": "^8.61.0",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitest/coverage-v8": "^4.1.8",
+    "@vitest/ui": "^4.1.8",
+    "@vue/test-utils": "^2.4.11",
+    "eslint": "^10.4.1",
+    "eslint-plugin-vue": "^10.9.2",
+    "jsdom": "^29.1.1",
     "kolorist": "^1.8.0",
     "pathe": "^2.0.3",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-visualizer": "^6.0.3",
-    "three": "^0.183.0",
+    "rollup-plugin-visualizer": "^7.0.1",
+    "three": "^0.184.0",
     "tsdown": "0.18.3",
-    "typescript": "^5.8.3",
-    "vite": "^7.1.9",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
     "vite-plugin-banner": "^0.8.1",
     "vite-plugin-dts": "4.5.4",
-    "vite-plugin-inspect": "^11.3.3",
-    "vitest": "3.2.4",
-    "vue": "^3.5.22",
+    "vite-plugin-inspect": "^11.4.1",
+    "vitest": "4.1.8",
+    "vue": "^3.5.38",
     "vue-demi": "^0.14.10",
-    "vue-tsc": "^3.2.1",
-    "@tresjs/eslint-config": "1.5.1"
+    "vue-tsc": "^3.3.4",
+    "@tresjs/eslint-config": "1.6.0"
   },
   "nx": {
     "implicitDependencies": [