@tresjs/core 5.2.0 → 5.3.0

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

@@ -1,7 +1,7 @@
 /**
   * name: @tresjs/core
-  * version: v5.2.0
-  * (c) 2025
+  * version: v5.3.0
+  * (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,7 +1,7 @@
 /**
   * name: @tresjs/core
-  * version: v5.2.0
-  * (c) 2025
+  * version: v5.3.0
+  * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */

package/dist/tres.d.ts

@@ -1,11 +1,11 @@
 /**
   * name: @tresjs/core
-  * version: v5.2.0
-  * (c) 2025
+  * version: v5.3.0
+  * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
-import * as vue10 from "vue";
+import * as vue8 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";
@@ -72,8 +72,9 @@ interface RafLoopContext {
 //#endregion
 //#region src/composables/useSizes/index.d.ts
 interface SizesType {
-  height: Readonly<Ref<number>>;
   width: Readonly<Ref<number>>;
+  height: Readonly<Ref<number>>;
+  pixelRatio: Readonly<Ref<number>>;
   aspectRatio: ComputedRef<number>;
 }
 //#endregion
@@ -311,7 +312,7 @@ declare function useRendererManager({
   onReady: _vueuse_core0.EventHookOn<TresRenderer>;
   onRender: _vueuse_core0.EventHookOn<TresRenderer>;
   invalidate: (amountOfFramesToInvalidate?: number) => void;
-  canBeInvalidated: vue10.ComputedRef<boolean>;
+  canBeInvalidated: vue8.ComputedRef<boolean>;
   mode: "always" | "on-demand" | "manual" | undefined;
   replaceRenderFunction: (fn: RenderFunction) => void;
 };
@@ -362,10 +363,10 @@ type AttachFnType = (parent: any, self: TresInstance) => () => void;
 type AttachType = string | AttachFnType;
 type DisposeType = ((self: TresInstance) => void) | boolean | 'default';
 type ConstructorRepresentation = new (...args: any[]) => any;
-type NonFunctionKeys<P$1> = { [K in keyof P$1]-?: P$1[K] extends ((...args: any[]) => any) ? never : K }[keyof P$1];
-type Overwrite<P$1, O> = Omit<P$1, NonFunctionKeys<O>> & O;
+type NonFunctionKeys<P> = { [K in keyof P]-?: P[K] extends ((...args: any[]) => any) ? never : K }[keyof P];
+type Overwrite<P, O> = Omit<P, NonFunctionKeys<O>> & O;
 type Properties<T> = Pick<T, NonFunctionKeys<T>>;
-type Mutable<P$1> = { [K in keyof P$1]: P$1[K] | Readonly<P$1[K]> };
+type Mutable<P> = { [K in keyof P]: P[K] | Readonly<P[K]> };
 type Args<T> = T extends ConstructorRepresentation ? ConstructorParameters<T> : any[];
 interface TresCatalogue {
   [name: string]: ConstructorRepresentation;
@@ -377,8 +378,8 @@ type TresCamera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
  * @template T - The type of the object.
  * @template P - The type of the arguments.
  */
-interface InstanceProps<T = any, P$1 = any> {
-  args?: Args<P$1>;
+interface InstanceProps<T = any, P = any> {
+  args?: Args<P>;
   object?: T;
   visible?: boolean;
   dispose?: null;
@@ -455,17 +456,17 @@ type TresContextWithClock = TresContext & {
   delta: number;
   elapsed: number;
 };
-type WithMathProps<P$1> = { [K in keyof P$1]: P$1[K] extends MathRepresentation | THREE.Euler ? MathType<P$1[K]> : P$1[K] };
+type WithMathProps<P> = { [K in keyof P]: P[K] extends MathRepresentation | THREE.Euler ? MathType<P[K]> : P[K] };
 interface RaycastableRepresentation {
   raycast: (raycaster: THREE.Raycaster, intersects: THREE.Intersection[]) => void;
 }
-type EventProps<P$1> = P$1 extends RaycastableRepresentation ? Partial<PointerEventHandlers> : unknown;
+type EventProps<P> = P extends RaycastableRepresentation ? Partial<PointerEventHandlers> : unknown;
 interface VueProps {
   children?: VNode[];
   ref?: VNodeRef;
   key?: string | number | symbol;
 }
-type ElementProps<T extends ConstructorRepresentation, P$1 = InstanceType<T>> = Partial<Overwrite<P$1, WithMathProps<P$1> & VueProps & EventProps<P$1>>>;
+type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<Overwrite<P, WithMathProps<P> & VueProps & EventProps<P>>>;
 type ThreeElement<T extends ConstructorRepresentation> = Mutable<Overwrite<ElementProps<T>, Omit<InstanceProps<InstanceType<T>, T>, 'object'>>>;
 type ThreeExports = typeof THREE;
 type ThreeInstancesImpl = { [K in keyof ThreeExports as Uncapitalize<K>]: ThreeExports[K] extends ConstructorRepresentation ? ThreeElement<ThreeExports[K]> : never };
@@ -498,7 +499,7 @@ declare function buildGraph(object: Object3D | TresObject): TresObjectMap;
 //#endregion
 //#region src/composables/useLoader/component.vue.d.ts
 declare const __VLS_export$1: <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: __VLS_PrettifyLocal<{
+  props: vue8.PublicProps & __VLS_PrettifyLocal<{
     /**
      * The THREE.js loader to use
      */
@@ -514,27 +515,27 @@ declare const __VLS_export$1: <T extends TresObjectMap>(__VLS_props: NonNullable
   } & {
     onLoaded?: ((result: T) => any) | undefined;
     onError?: ((error: unknown) => any) | undefined;
-  }> & vue10.PublicProps & (typeof globalThis extends {
+  }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
   } ? P : {});
   expose: (exposed: {}) => void;
   attrs: any;
   slots: {
     default?: (props: {
-      state: vue10.UnwrapRef<T>;
+      state: vue8.UnwrapRef<T>;
       isLoading: boolean;
       error: unknown;
     }) => any;
   };
   emit: ((evt: "loaded", result: T) => void) & ((evt: "error", error: unknown) => void);
-}>) => vue10.VNode & {
+}>) => vue8.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default$1: typeof __VLS_export$1;
 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>) => vue10.ComputedRef<TresObjectMap | undefined>;
+declare const useGraph: (object: MaybeRef$1<TresObject | undefined>) => vue8.ComputedRef<TresObjectMap | undefined>;
 //#endregion
 //#region src/utils/createPriorityEventHook.d.ts
 type Callback<T> = Parameters<EventHookOff<T>>[0];
@@ -585,12 +586,17 @@ type LoopContext = RafLoopContext & TresPartialContext;
 declare const useLoop: () => {
   stop: () => void;
   start: () => void;
-  isActive: Readonly<vue10.ShallowRef<boolean>>;
+  isActive: Readonly<vue8.ShallowRef<boolean>>;
   onBeforeRender: PriorityEventHookOn<LoopContext>;
   onRender: PriorityEventHookOn<LoopContext>;
   render: (fn: RenderFunction) => void;
 };
 //#endregion
+//#region src/core/nodeOps.d.ts
+interface TresCustomRendererOptions {
+  primitivePrefix?: string;
+}
+//#endregion
 //#region src/utils/logger.d.ts
 /**
  * Logger utility for TresJS
@@ -643,8 +649,8 @@ declare const templateCompilerOptions: {
   };
 };
 //#endregion
-//#region src/components/TresCanvas.vue.d.ts
-interface TresCanvasProps extends RendererOptions {
+//#region src/components/Context.vue.d.ts
+interface ContextProps extends RendererOptions {
   /**
    * Custom camera instance to use as main camera
    * If not provided, a default PerspectiveCamera will be created
@@ -662,19 +668,31 @@ interface TresCanvasProps extends RendererOptions {
    * @default true
    */
   enableProvideBridge?: boolean;
+  /**
+   * Options for the TresJS custom renderer
+   *
+   */
+  customRendererOptions?: TresCustomRendererOptions;
 }
-type TresCanvasEmits = {
+type ContextEmits = {
   ready: [context: TresContext];
   pointermissed: [event: TresPointerEvent];
   render: [context: TresContext];
   beforeLoop: [context: TresContextWithClock];
   loop: [context: TresContextWithClock];
 } & { [key in TresPointerEventName]: [event: TresPointerEvent] };
-declare const _default: typeof __VLS_export;
-declare const __VLS_export: __VLS_WithSlots<vue10.DefineComponent<TresCanvasProps, {
-  context: vue10.ShallowRef<TresContext | null, TresContext | null>;
+//#endregion
+//#region src/components/TresCanvas.vue.d.ts
+type TresCanvasEmits = ContextEmits;
+type TresCanvasProps = ContextProps;
+interface TresCanvasInstance {
+  get context(): TresContext | undefined;
   dispose: () => void;
-}, {}, {}, {}, vue10.ComponentOptionsMixin, vue10.ComponentOptionsMixin, {
+}
+type __VLS_Slots = {
+  default: () => any;
+};
+declare const __VLS_base: vue8.DefineComponent<ContextProps, TresCanvasInstance, {}, {}, {}, vue8.ComponentOptionsMixin, vue8.ComponentOptionsMixin, {
   click: (event: TresPointerEvent) => any;
   contextmenu: (event: TresPointerEvent) => any;
   pointermove: (event: TresPointerEvent) => any;
@@ -693,7 +711,7 @@ declare const __VLS_export: __VLS_WithSlots<vue10.DefineComponent<TresCanvasProp
   render: (context: TresContext) => any;
   beforeLoop: (context: TresContextWithClock) => any;
   loop: (context: TresContextWithClock) => any;
-}, string, vue10.PublicProps, Readonly<TresCanvasProps> & Readonly<{
+}, string, vue8.PublicProps, Readonly<ContextProps> & Readonly<{
   onClick?: ((event: TresPointerEvent) => any) | undefined;
   onContextmenu?: ((event: TresPointerEvent) => any) | undefined;
   onPointermove?: ((event: TresPointerEvent) => any) | undefined;
@@ -729,9 +747,9 @@ declare const __VLS_export: __VLS_WithSlots<vue10.DefineComponent<TresCanvasProp
   shadowMapType: THREE.ShadowMapType;
   useLegacyLights: boolean;
   renderMode: "always" | "on-demand" | "manual";
-}, {}, {}, {}, string, vue10.ComponentProvideOptions, false, {}, any>, {
-  default: () => any;
-}>;
+}, {}, {}, {}, string, vue8.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 & {
   new (): {
     $slots: S;
@@ -1063,4 +1081,4 @@ interface TresPlugin {
 }
 declare const plugin: TresPlugin;
 //#endregion
-export { Args, AssetLoadData, AttachFnType, AttachType, ConstructorRepresentation, DevtoolsMessage, DevtoolsMessageType, DevtoolsMessenger, DevtoolsSubscriber, DisposeType, ElementProps, InstanceProps, LoaderMethods, LoaderProto, LocalState, LoopContext, MathType, Mutable, NonFunctionKeys, Overwrite, Properties, RenderFunction, RenderMode, RendererOptions, ThreeElement, ThreeInstances, TresCamera, _default as TresCanvas, type TresCanvasEmits, type TresCanvasProps, TresCatalogue, TresColor, TresColorArray, type TresContext, TresContextWithClock, TresControl, TresEuler, TresInstance, TresLayers, TresLoader, TresLoaderOptions, TresMaterial, TresObject, TresObject3D, TresObjectMap, TresOptions, TresPartialContext, TresPlugin, type TresPointerEvent, TresPrimitive, TresQuaternion, TresRenderer, TresRendererSetupContext, TresScene, TresVector2, TresVector3, TresVector4, UseCameraReturn, _default$1 as UseLoader, UseLoaderReturn, UseRendererManagerReturn, UseRendererOptions, VectorCoordinates, type VectorFlexibleParams, VueProps, WithMathProps, buildGraph, catalogue, plugin as default, disposeObject3D as dispose, extend, isBufferGeometry, isCamera, isClassInstance, isColor, isColorRepresentation, isCopyable, isFog, isGroup, isLayers, isLight, isMaterial, isMesh, isObject3D, isOrthographicCamera, isPerspectiveCamera, isProd, isScene, isTresCamera, isTresInstance, isTresObject, isTresPrimitive, isVectorLike, logError, logMessage, logWarning, normalizeColor, normalizeVectorFlexibleParam, registerTresDevtools, templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };
+export { Args, AssetLoadData, AttachFnType, AttachType, ConstructorRepresentation, DevtoolsMessage, DevtoolsMessageType, DevtoolsMessenger, DevtoolsSubscriber, DisposeType, ElementProps, InstanceProps, LoaderMethods, LoaderProto, LocalState, LoopContext, MathType, Mutable, NonFunctionKeys, Overwrite, Properties, RenderFunction, RenderMode, RendererOptions, ThreeElement, ThreeInstances, TresCamera, _default as TresCanvas, type TresCanvasEmits, type TresCanvasInstance, type TresCanvasProps, TresCatalogue, TresColor, TresColorArray, TresComponents, type TresContext, TresContextWithClock, TresControl, type TresCustomRendererOptions, TresEuler, TresInstance, TresLayers, TresLoader, TresLoaderOptions, TresMaterial, TresObject, TresObject3D, TresObjectMap, TresOptions, TresPartialContext, TresPlugin, type TresPointerEvent, TresPrimitive, TresQuaternion, TresRenderer, TresRendererSetupContext, TresScene, TresVector2, TresVector3, TresVector4, UseCameraReturn, _default$1 as UseLoader, UseLoaderReturn, UseRendererManagerReturn, UseRendererOptions, VectorCoordinates, type VectorFlexibleParams, VueProps, WithMathProps, buildGraph, catalogue, plugin as default, disposeObject3D as dispose, extend, isBufferGeometry, isCamera, isClassInstance, isColor, isColorRepresentation, isCopyable, isFog, isGroup, isLayers, isLight, isMaterial, isMesh, isObject3D, isOrthographicCamera, isPerspectiveCamera, isProd, isScene, isTresCamera, isTresInstance, isTresObject, isTresPrimitive, isVectorLike, logError, logMessage, logWarning, normalizeColor, normalizeVectorFlexibleParam, registerTresDevtools, templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };

package/dist/tres.js

@@ -1,11 +1,11 @@
 /**
   * name: @tresjs/core
-  * version: v5.2.0
-  * (c) 2025
+  * version: v5.3.0
+  * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
-import { Fragment, computed, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, shallowRef, toValue, unref, useSlots, watch, watchEffect } from "vue";
+import { Fragment, camelize, computed, createBlock, createCommentVNode, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, shallowRef, toHandlerKey, toRef, toValue, unref, useSlots, watch, watchEffect, withCtx } from "vue";
 import * as THREE from "three";
 import { ACESFilmicToneMapping, ArrowHelper, BackSide, BufferAttribute, BufferGeometry, Clock, Color, DirectionalLightHelper, DoubleSide, Float32BufferAttribute, HemisphereLightHelper, Layers, Line, LineBasicMaterial, Material, MathUtils, Mesh, MeshBasicMaterial, Object3D, PCFSoftShadowMap, PerspectiveCamera, PointLightHelper, 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";
@@ -14,7 +14,7 @@ import { forwardHtmlEvents, getVoidObject } from "@pmndrs/pointer-events";
 import { setupDevtoolsPlugin } from "@vue/devtools-api";
 
 //#region package.json
-var version = "5.2.0";
+var version = "5.3.0";
 
 //#endregion
 //#region src/utils/makeMap.ts
@@ -826,9 +826,8 @@ function useRendererManager({ scene, canvas, options, contextParts: { sizes, cam
 		}
 		invalidateOnDemand();
 	}, { immediate: true });
-	const { pixelRatio } = useDevicePixelRatio();
 	watchEffect(() => {
-		setPixelRatio(renderer, pixelRatio.value, toValue(options.dpr));
+		setPixelRatio(renderer, sizes.pixelRatio.value, toValue(options.dpr));
 	});
 	if (toValue(options.renderMode) === "on-demand") invalidate();
 	if (toValue(options.renderMode) === "manual") useTimeout(100, { callback: advance });
@@ -895,12 +894,14 @@ function useRendererManager({ scene, canvas, options, contextParts: { sizes, cam
 //#endregion
 //#region src/composables/useSizes/index.ts
 function useSizes(windowSize, canvas, debounceMs = 10) {
+	const { pixelRatio } = useDevicePixelRatio();
 	const reactiveSize = toValue(windowSize) ? useWindowSize() : useElementSize(computed(() => toValue(canvas).parentElement));
 	const debouncedReactiveWidth = readonly(refDebounced(reactiveSize.width, debounceMs));
 	const debouncedReactiveHeight = readonly(refDebounced(reactiveSize.height, debounceMs));
 	return {
-		height: debouncedReactiveHeight,
 		width: debouncedReactiveWidth,
+		height: debouncedReactiveHeight,
+		pixelRatio,
 		aspectRatio: computed(() => debouncedReactiveWidth.value / debouncedReactiveHeight.value)
 	};
 }
@@ -1071,7 +1072,7 @@ const isSupportedPointerEvent = (event) => supportedPointerEvents.includes(event
 
 //#endregion
 //#region src/core/nodeOps.ts
-const nodeOps = (context) => {
+const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 	const scene = context.scene.value;
 	function createElement(tag, _isSVG, _anchor, props) {
 		if (!props) props = {};
@@ -1080,7 +1081,7 @@ const nodeOps = (context) => {
 		if (tag.includes("-")) tag = tag.replace(/-([a-z])/g, (_, c) => c.toUpperCase()).replace(/^[a-z]/, (c) => c.toUpperCase());
 		let name = tag.replace("Tres", "");
 		let obj;
-		if (tag === "primitive") {
+		if (tag === `${options?.primitivePrefix ?? ""}primitive`) {
 			if (!isObject(props.object) || isRef(props.object)) logError("Tres primitives need an 'object' prop, whose value is an object or shallowRef<object>");
 			name = props.object.type;
 			const __tres = {};
@@ -1808,10 +1809,9 @@ function registerTresDevtools(app, tres) {
 }
 
 //#endregion
-//#region src/components/TresCanvas.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = ["data-scene", "data-tres"];
-var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "TresCanvas",
+//#region src/components/Context.vue?vue&type=script&setup=true&lang.ts
+var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Context",
 	props: {
 		camera: {
 			type: null,
@@ -1819,28 +1819,27 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		windowSize: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		enableProvideBridge: {
 			type: Boolean,
-			required: false,
-			default: true
+			required: false
+		},
+		customRendererOptions: {
+			type: Object,
+			required: false
 		},
 		antialias: {
 			type: Boolean,
-			required: false,
-			default: true
+			required: false
 		},
 		stencil: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		depth: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		precision: {
 			type: String,
@@ -1848,13 +1847,11 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		logarithmicDepthBuffer: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		preserveDrawingBuffer: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		powerPreference: {
 			type: null,
@@ -1862,8 +1859,7 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		alpha: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		premultipliedAlpha: {
 			type: Boolean,
@@ -1871,8 +1867,7 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		failIfMajorPerformanceCaveat: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		clearColor: {
 			type: [
@@ -1880,33 +1875,27 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				String,
 				Number
 			],
-			required: false,
-			default: "#000000"
+			required: false
 		},
 		clearAlpha: {
 			type: Number,
-			required: false,
-			default: 1
+			required: false
 		},
 		shadows: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		toneMapping: {
 			type: null,
-			required: false,
-			default: ACESFilmicToneMapping
+			required: false
 		},
 		shadowMapType: {
 			type: null,
-			required: false,
-			default: PCFSoftShadowMap
+			required: false
 		},
 		useLegacyLights: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		outputColorSpace: {
 			type: null,
@@ -1918,8 +1907,7 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		renderMode: {
 			type: String,
-			required: false,
-			default: "always"
+			required: false
 		},
 		dpr: {
 			type: [Number, Array],
@@ -1928,6 +1916,10 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		renderer: {
 			type: Function,
 			required: false
+		},
+		canvas: {
+			type: null,
+			required: true
 		}
 	},
 	emits: [
@@ -1954,7 +1946,6 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
-		const canvasRef = ref();
 		const scene = shallowRef(new Scene());
 		const instance = getCurrentInstance();
 		extend(THREE);
@@ -1980,7 +1971,10 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		} });
 		const mountCustomRenderer = (context$1, empty = false) => {
 			const InternalComponent = createInternalComponent(context$1, empty);
-			const { render } = createRenderer(nodeOps(context$1));
+			const { render } = createRenderer(nodeOps({
+				context: context$1,
+				options: props.customRendererOptions
+			}));
 			render(h(InternalComponent), scene.value);
 		};
 		const dispose = (context$1, force = false) => {
@@ -1994,7 +1988,12 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			}
 			scene.value.__tres = { root: context$1 };
 		};
-		const context = shallowRef(null);
+		const context = shallowRef(useTresContextProvider({
+			scene: scene.value,
+			canvas: props.canvas,
+			windowSize: props.windowSize ?? false,
+			rendererOptions: props
+		}));
 		__expose({
 			context,
 			dispose: () => dispose(context.value, true)
@@ -2007,71 +2006,301 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			dispose(context.value);
 			mountCustomRenderer(context.value, true);
 		};
-		onMounted(() => {
-			const existingCanvas = canvasRef;
-			context.value = useTresContextProvider({
-				scene: scene.value,
-				canvas: existingCanvas,
-				windowSize: props.windowSize ?? false,
-				rendererOptions: props
-			});
-			const { camera, renderer } = context.value;
-			const { registerCamera, cameras, activeCamera, deregisterCamera } = camera;
-			mountCustomRenderer(context.value);
-			const addDefaultCamera = () => {
-				const camera$1 = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 1e3);
-				camera$1.position.set(3, 3, 3);
-				camera$1.lookAt(0, 0, 0);
-				registerCamera(camera$1);
-				const unwatch = watchEffect(() => {
-					if (cameras.value.length >= 2) {
-						camera$1.removeFromParent();
-						deregisterCamera(camera$1);
-						unwatch?.();
-					}
-				});
-			};
-			context.value.events.onPointerMissed((event) => {
-				emit("pointermissed", event);
-			});
-			watch(() => props.camera, (newCamera, oldCamera) => {
-				if (newCamera) registerCamera(toValue(newCamera), true);
-				if (oldCamera) {
-					toValue(oldCamera).removeFromParent();
-					deregisterCamera(toValue(oldCamera));
+		const { camera, renderer } = context.value;
+		const { registerCamera, cameras, activeCamera, deregisterCamera } = camera;
+		mountCustomRenderer(context.value);
+		const addDefaultCamera = () => {
+			const camera$1 = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 1e3);
+			camera$1.position.set(3, 3, 3);
+			camera$1.lookAt(0, 0, 0);
+			registerCamera(camera$1);
+			const unwatch = watchEffect(() => {
+				if (cameras.value.length >= 2) {
+					camera$1.removeFromParent();
+					deregisterCamera(camera$1);
+					unwatch?.();
 				}
-			}, { immediate: true });
-			if (!activeCamera.value) addDefaultCamera();
-			renderer.onRender(() => {
-				if (context.value) emit("render", context.value);
-			});
-			renderer.loop.onLoop((loopContext) => {
-				if (context.value) emit("loop", {
-					...context.value,
-					...loopContext
-				});
 			});
-			renderer.loop.onBeforeLoop((loopContext) => {
-				if (context.value) emit("beforeLoop", {
-					...context.value,
-					...loopContext
-				});
+		};
+		context.value.events.onPointerMissed((event) => {
+			emit("pointermissed", event);
+		});
+		watch(() => props.camera, (newCamera, oldCamera) => {
+			if (newCamera) registerCamera(toValue(newCamera), true);
+			if (oldCamera) {
+				toValue(oldCamera).removeFromParent();
+				deregisterCamera(toValue(oldCamera));
+			}
+		}, { immediate: true });
+		if (!activeCamera.value) addDefaultCamera();
+		renderer.onRender(() => {
+			if (context.value) emit("render", context.value);
+		});
+		renderer.loop.onLoop((loopContext) => {
+			if (context.value) emit("loop", {
+				...context.value,
+				...loopContext
 			});
-			renderer.onReady(() => {
-				emit("ready", context.value);
+		});
+		renderer.loop.onBeforeLoop((loopContext) => {
+			if (context.value) emit("beforeLoop", {
+				...context.value,
+				...loopContext
 			});
-			if (import.meta.hot && context.value) import.meta.hot.on("vite:afterUpdate", () => handleHMR(context.value));
 		});
+		renderer.onReady(() => {
+			emit("ready", context.value);
+		});
+		if (import.meta.hot) import.meta.hot.on("vite:afterUpdate", () => handleHMR(context.value));
 		onMounted(async () => {
 			await promiseTimeout(3e3);
-			if (context.value && (!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.`);
+			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.`);
 		});
 		onUnmounted(unmountCanvas);
+		return () => {};
+	}
+});
+
+//#endregion
+//#region src/components/Context.vue
+var Context_default = Context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/composables/useForwardProps/index.ts
+/**
+* The `useForwardProps` function in TypeScript takes in a set of props and returns a computed value
+* that combines default props with assigned props from the current instance.
+* @param {T} props - The `props` parameter is an object that represents the props passed to a
+* component.
+* @returns computed value that combines the default props, preserved props, and assigned props.
+*/
+const useForwardProps = (props) => {
+	const vm = getCurrentInstance();
+	const defaultProps = Object.keys(vm?.type.props ?? {}).reduce((prev, curr) => {
+		const defaultValue = (vm?.type.props[curr]).default;
+		if (defaultValue !== void 0) prev[curr] = defaultValue;
+		return prev;
+	}, {});
+	const refProps = toRef(props);
+	return computed(() => {
+		const preservedProps = {};
+		const assignedProps = vm?.vnode.props ?? {};
+		Object.keys(assignedProps).forEach((key) => {
+			preservedProps[camelize(key)] = assignedProps[key];
+		});
+		return Object.keys({
+			...defaultProps,
+			...preservedProps
+		}).reduce((prev, curr) => {
+			if (refProps.value[curr] !== void 0) prev[curr] = refProps.value[curr];
+			return prev;
+		}, {});
+	});
+};
+/**
+* The `useEmitAsProps` function is a TypeScript utility that converts emitted events into props for a
+* Vue component.
+* @param emit - The `emit` parameter is a function that is used to emit events from a component. It
+* takes two parameters: `name` which is the name of the event to be emitted, and `...args` which are
+* the arguments to be passed along with the event.
+* @returns The function `useEmitAsProps` returns an object that maps event names to functions that
+* call the `emit` function with the corresponding event name and arguments.
+*/
+const useEmitAsProps = (emit) => {
+	const vm = getCurrentInstance();
+	const events = vm?.type.emits;
+	const result = {};
+	if (!events?.length) console.warn(`No emitted event found. Please check component: ${vm?.type.__name}`);
+	events?.forEach((ev) => {
+		result[toHandlerKey(camelize(ev))] = (...arg) => emit(ev, ...arg);
+	});
+	return result;
+};
+/**
+* The function `useForwardPropsEmits` takes in props and an optional emit function, and returns a
+* computed object that combines the parsed props and emits as props.
+* @param {T} props - The `props` parameter is of type `T`, which is a generic type that extends the
+* parameters of the `useForwardProps` function. It represents the props object that is passed to the
+* `useForwardProps` function.
+* @param [emit] - The `emit` parameter is a function that can be used to emit events. It takes two
+* arguments: `name`, which is the name of the event to be emitted, and `args`, which are the arguments
+* to be passed along with the event.
+* @returns a computed property that combines the parsed
+* props and emits as props.
+*/
+const useForwardPropsEmits = (props, emit) => {
+	const parsedProps = useForwardProps(props);
+	const emitsAsProps = emit ? useEmitAsProps(emit) : {};
+	return computed(() => ({
+		...parsedProps.value,
+		...emitsAsProps
+	}));
+};
+
+//#endregion
+//#region src/components/TresCanvas.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["data-scene", "data-tres"];
+var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "TresCanvas",
+	props: {
+		camera: {
+			type: null,
+			required: false
+		},
+		windowSize: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		enableProvideBridge: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		customRendererOptions: {
+			type: Object,
+			required: false
+		},
+		antialias: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		stencil: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		depth: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		precision: {
+			type: String,
+			required: false
+		},
+		logarithmicDepthBuffer: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		preserveDrawingBuffer: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		powerPreference: {
+			type: null,
+			required: false
+		},
+		alpha: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		premultipliedAlpha: {
+			type: Boolean,
+			required: false
+		},
+		failIfMajorPerformanceCaveat: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		clearColor: {
+			type: [
+				Object,
+				String,
+				Number
+			],
+			required: false,
+			default: "#000000"
+		},
+		clearAlpha: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		shadows: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		toneMapping: {
+			type: null,
+			required: false,
+			default: ACESFilmicToneMapping
+		},
+		shadowMapType: {
+			type: null,
+			required: false,
+			default: PCFSoftShadowMap
+		},
+		useLegacyLights: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		outputColorSpace: {
+			type: null,
+			required: false
+		},
+		toneMappingExposure: {
+			type: Number,
+			required: false
+		},
+		renderMode: {
+			type: String,
+			required: false,
+			default: "always"
+		},
+		dpr: {
+			type: [Number, Array],
+			required: false
+		},
+		renderer: {
+			type: Function,
+			required: false
+		}
+	},
+	emits: [
+		"ready",
+		"pointermissed",
+		"render",
+		"beforeLoop",
+		"loop",
+		"click",
+		"contextmenu",
+		"pointermove",
+		"pointerenter",
+		"pointerleave",
+		"pointerover",
+		"pointerout",
+		"dblclick",
+		"pointerdown",
+		"pointerup",
+		"pointercancel",
+		"lostpointercapture",
+		"wheel"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const canvasRef = ref();
+		const contextRef = shallowRef();
+		__expose({
+			get context() {
+				return contextRef.value?.context;
+			},
+			dispose: () => contextRef.value?.dispose()
+		});
+		const forwardedPropsEmits = useForwardPropsEmits(props, emit);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("canvas", {
 				ref_key: "canvasRef",
 				ref: canvasRef,
-				"data-scene": scene.value.uuid,
+				"data-scene": contextRef.value?.context?.scene.value.uuid,
 				class: normalizeClass(_ctx.$attrs.class),
 				"data-tres": `tresjs ${unref(version)}`,
 				style: normalizeStyle({
@@ -2085,7 +2314,15 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					touchAction: "none",
 					..._ctx.$attrs.style
 				})
-			}, null, 14, _hoisted_1);
+			}, [canvasRef.value ? (openBlock(), createBlock(Context_default, mergeProps({
+				key: 0,
+				ref_key: "contextRef",
+				ref: contextRef,
+				canvas: canvasRef.value
+			}, unref(forwardedPropsEmits)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["canvas"])) : createCommentVNode("v-if", true)], 14, _hoisted_1);
 		};
 	}
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
@@ -67,7 +67,7 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-visualizer": "^6.0.3",
     "three": "^0.180.0",
-    "tsdown": "0.16.1",
+    "tsdown": "0.18.3",
     "typescript": "^5.8.3",
     "vite": "^7.1.9",
     "vite-plugin-banner": "^0.8.1",
@@ -76,7 +76,7 @@
     "vitest": "3.2.4",
     "vue": "^3.5.22",
     "vue-demi": "^0.14.10",
-    "vue-tsc": "^3.1.1",
+    "vue-tsc": "^3.2.1",
     "@tresjs/eslint-config": "1.5.1"
   },
   "nx": {

package/dist/chunk-DADVwcMf.js

@@ -1,30 +0,0 @@
-/**
-  * name: @tresjs/core
-  * version: v5.2.0
-  * (c) 2025
-  * description: Declarative ThreeJS using Vue Components
-  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
-  */
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion