@tresjs/core 5.7.0 → 5.8.0

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

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.7.0
+  * version: v5.8.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,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.7.0
+  * version: v5.8.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.7.0
+  * version: v5.8.0
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
-import * as vue4 from "vue";
+import * as vue15 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";
@@ -297,12 +297,14 @@ interface UseRendererOptions {
   scene: ShallowRef<TresScene>;
   canvas: MaybeRef<HTMLCanvasElement>;
   options: Reactive<RendererOptions>;
+  fpsLimit?: MaybeRefOrGetter<number>;
   contextParts: Pick<TresContext, 'sizes' | 'camera'>;
 }
 declare function useRendererManager({
   scene,
   canvas,
   options,
+  fpsLimit,
   contextParts: {
     sizes,
     camera
@@ -321,11 +323,11 @@ declare function useRendererManager({
   onRender: _vueuse_core0.EventHookOn<TresRenderer>;
   onError: _vueuse_core0.EventHookOn<TresRendererError>;
   invalidate: (amountOfFramesToInvalidate?: number) => void;
-  canBeInvalidated: vue4.ComputedRef<boolean>;
+  canBeInvalidated: vue15.ComputedRef<boolean>;
   mode: "always" | "on-demand" | "manual" | undefined;
   replaceRenderFunction: (fn: RenderFunction) => void;
-  isInitialized: vue4.Ref<boolean, boolean>;
-  error: vue4.Ref<TresRendererError | null, TresRendererError | null>;
+  isInitialized: vue15.Ref<boolean, boolean>;
+  error: vue15.Ref<TresRendererError | null, TresRendererError | null>;
 };
 type UseRendererManagerReturn = ReturnType<typeof useRendererManager>;
 //#endregion
@@ -357,6 +359,7 @@ interface TresContext {
 declare const useTresContextProvider: (args_0: {
   scene: TresScene;
   canvas: MaybeRef<HTMLCanvasElement>;
+  fpsLimit?: MaybeRefOrGetter<number>;
   windowSize: MaybeRefOrGetter<boolean>;
   rendererOptions: RendererOptions;
 }) => TresContext;
@@ -512,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: vue4.PublicProps & __VLS_PrettifyLocal<{
+  props: vue15.PublicProps & __VLS_PrettifyLocal<{
     /**
      * The THREE.js loader to use
      */
@@ -526,8 +529,8 @@ declare const __VLS_export$2: <T extends TresObjectMap>(__VLS_props: NonNullable
      */
     manager?: LoadingManager;
   } & {
-    onLoaded?: ((result: T) => any) | undefined;
     onError?: ((error: unknown) => any) | undefined;
+    onLoaded?: ((result: T) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
   } ? P : {});
@@ -535,20 +538,20 @@ declare const __VLS_export$2: <T extends TresObjectMap>(__VLS_props: NonNullable
   attrs: any;
   slots: {
     default?: (props: {
-      state: vue4.UnwrapRef<T>;
+      state: vue15.UnwrapRef<T>;
       isLoading: boolean;
       error: unknown;
     }) => any;
   };
-  emit: ((evt: "loaded", result: T) => void) & ((evt: "error", error: unknown) => void);
-}>) => vue4.VNode & {
+  emit: ((evt: "error", error: unknown) => void) & ((evt: "loaded", result: T) => void);
+}>) => vue15.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>) => vue4.ComputedRef<TresObjectMap | undefined>;
+declare const useGraph: (object: MaybeRef$1<TresObject | undefined>) => vue15.ComputedRef<TresObjectMap | undefined>;
 //#endregion
 //#region src/utils/createPriorityEventHook.d.ts
 type Callback<T> = Parameters<EventHookOff<T>>[0];
@@ -599,7 +602,7 @@ type LoopContext = RafLoopContext & TresPartialContext;
 declare const useLoop: () => {
   stop: () => void;
   start: () => void;
-  isActive: Readonly<vue4.ShallowRef<boolean>>;
+  isActive: Readonly<vue15.ShallowRef<boolean>>;
   onBeforeRender: PriorityEventHookOn<LoopContext>;
   onRender: PriorityEventHookOn<LoopContext>;
   render: (fn: RenderFunction) => void;
@@ -675,6 +678,11 @@ interface ContextProps extends RendererOptions {
    * @default false
    */
   windowSize?: boolean;
+  /**
+   * The maximum number of frames per second to render
+   * @default undefined
+   */
+  fpsLimit?: number;
   /**
    * Whether to enable the provide/inject bridge between Vue and TresJS
    * When true, Vue's provide/inject will work across the TresJS boundary
@@ -701,10 +709,10 @@ type __VLS_Props = ContextProps & {
 type __VLS_Slots$1 = {
   default: () => any;
 };
-declare const __VLS_base$1: vue4.DefineComponent<__VLS_Props, {
-  context: vue4.ShallowRef<TresContext, TresContext>;
+declare const __VLS_base$1: vue15.DefineComponent<__VLS_Props, {
+  context: vue15.ShallowRef<TresContext, TresContext>;
   dispose: () => void;
-}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {
+}, {}, {}, {}, vue15.ComponentOptionsMixin, vue15.ComponentOptionsMixin, {
   click: (event: TresPointerEvent) => any;
   contextmenu: (event: TresPointerEvent) => any;
   pointermove: (event: TresPointerEvent) => any;
@@ -718,13 +726,13 @@ declare const __VLS_base$1: vue4.DefineComponent<__VLS_Props, {
   pointercancel: (event: TresPointerEvent) => any;
   lostpointercapture: (event: TresPointerEvent) => any;
   wheel: (event: TresPointerEvent) => any;
-  error: (error: Error) => any;
   ready: (context: TresContext) => any;
+  error: (error: Error) => any;
   pointermissed: (event: TresPointerEvent) => any;
   render: (context: TresContext) => any;
   beforeLoop: (context: TresContextWithClock) => any;
   loop: (context: TresContextWithClock) => any;
-}, string, vue4.PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, vue15.PublicProps, Readonly<__VLS_Props> & Readonly<{
   onClick?: ((event: TresPointerEvent) => any) | undefined;
   onContextmenu?: ((event: TresPointerEvent) => any) | undefined;
   onPointermove?: ((event: TresPointerEvent) => any) | undefined;
@@ -738,13 +746,13 @@ declare const __VLS_base$1: vue4.DefineComponent<__VLS_Props, {
   onPointercancel?: ((event: TresPointerEvent) => any) | undefined;
   onLostpointercapture?: ((event: TresPointerEvent) => any) | undefined;
   onWheel?: ((event: TresPointerEvent) => any) | undefined;
-  onError?: ((error: Error) => any) | undefined;
   onReady?: ((context: TresContext) => any) | undefined;
+  onError?: ((error: Error) => any) | undefined;
   onPointermissed?: ((event: TresPointerEvent) => any) | undefined;
   onRender?: ((context: TresContext) => any) | undefined;
   onBeforeLoop?: ((context: TresContextWithClock) => any) | undefined;
   onLoop?: ((context: TresContextWithClock) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, vue15.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 & {
@@ -763,7 +771,7 @@ interface TresCanvasInstance {
 type __VLS_Slots = {
   default: () => any;
 };
-declare const __VLS_base: vue4.DefineComponent<ContextProps, TresCanvasInstance, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {
+declare const __VLS_base: vue15.DefineComponent<ContextProps, TresCanvasInstance, {}, {}, {}, vue15.ComponentOptionsMixin, vue15.ComponentOptionsMixin, {
   click: (event: TresPointerEvent) => any;
   contextmenu: (event: TresPointerEvent) => any;
   pointermove: (event: TresPointerEvent) => any;
@@ -777,13 +785,13 @@ declare const __VLS_base: vue4.DefineComponent<ContextProps, TresCanvasInstance,
   pointercancel: (event: TresPointerEvent) => any;
   lostpointercapture: (event: TresPointerEvent) => any;
   wheel: (event: TresPointerEvent) => any;
-  error: (error: Error) => any;
   ready: (context: TresContext) => any;
+  error: (error: Error) => any;
   pointermissed: (event: TresPointerEvent) => any;
   render: (context: TresContext) => any;
   beforeLoop: (context: TresContextWithClock) => any;
   loop: (context: TresContextWithClock) => any;
-}, string, vue4.PublicProps, Readonly<ContextProps> & Readonly<{
+}, string, vue15.PublicProps, Readonly<ContextProps> & Readonly<{
   onClick?: ((event: TresPointerEvent) => any) | undefined;
   onContextmenu?: ((event: TresPointerEvent) => any) | undefined;
   onPointermove?: ((event: TresPointerEvent) => any) | undefined;
@@ -797,14 +805,15 @@ declare const __VLS_base: vue4.DefineComponent<ContextProps, TresCanvasInstance,
   onPointercancel?: ((event: TresPointerEvent) => any) | undefined;
   onLostpointercapture?: ((event: TresPointerEvent) => any) | undefined;
   onWheel?: ((event: TresPointerEvent) => any) | undefined;
-  onError?: ((error: Error) => any) | undefined;
   onReady?: ((context: TresContext) => any) | undefined;
+  onError?: ((error: Error) => any) | undefined;
   onPointermissed?: ((event: TresPointerEvent) => any) | undefined;
   onRender?: ((context: TresContext) => any) | undefined;
   onBeforeLoop?: ((context: TresContextWithClock) => any) | undefined;
   onLoop?: ((context: TresContextWithClock) => any) | undefined;
 }>, {
   windowSize: boolean;
+  enableProvideBridge: boolean;
   antialias: boolean;
   stencil: boolean;
   depth: boolean;
@@ -819,8 +828,7 @@ declare const __VLS_base: vue4.DefineComponent<ContextProps, TresCanvasInstance,
   shadowMapType: THREE.ShadowMapType;
   useLegacyLights: boolean;
   renderMode: "always" | "on-demand" | "manual";
-  enableProvideBridge: boolean;
-}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue15.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 & {

package/dist/tres.js

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.7.0
+  * version: v5.8.0
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
@@ -14,7 +14,7 @@ import { forwardHtmlEvents, getVoidObject } from "@pmndrs/pointer-events";
 import { setupDevtoolsPlugin } from "@vue/devtools-api";
 
 //#region package.json
-var version = "5.7.0";
+var version = "5.8.0";
 
 //#endregion
 //#region src/utils/makeMap.ts
@@ -763,7 +763,7 @@ function createTimer() {
 /**
 * @param cycleFn the function that is called before the after event hook is triggered and after the before event hook is triggered.
 */
-const useCreateRafLoop = (cycleFn) => {
+const useCreateRafLoop = (cycleFn, { fpsLimit } = {}) => {
 	const timer = createTimer();
 	const eventHooks = {
 		before: createEventHook(),
@@ -778,7 +778,10 @@ const useCreateRafLoop = (cycleFn) => {
 		eventHooks.before.trigger(context);
 		cycleFn();
 		eventHooks.after.trigger(context);
-	}, { immediate: false });
+	}, {
+		immediate: false,
+		fpsLimit
+	});
 	const start = () => {
 		timer.start();
 		resume();
@@ -808,7 +811,7 @@ var TresRendererError = class extends Error {
 
 //#endregion
 //#region src/composables/useRenderer/useRendererManager.ts
-function useRendererManager({ scene, canvas, options, contextParts: { sizes, camera } }) {
+function useRendererManager({ scene, canvas, options, fpsLimit, contextParts: { sizes, camera } }) {
 	const getRenderer = () => {
 		if (isFunction(options.renderer)) return options.renderer({
 			sizes,
@@ -883,7 +886,7 @@ Error details: ${rendererError.message}`, rendererError);
 	};
 	const loop = useCreateRafLoop(() => {
 		if (frames.value) renderFunction(notifyFrameRendered);
-	});
+	}, { fpsLimit });
 	readyEventHook.on(() => {
 		if (isInitialized.value) loop.start();
 	});
@@ -1009,7 +1012,7 @@ function useEventManager({ canvas, contextParts: { scene, camera, renderer } })
 //#endregion
 //#region src/composables/useTresContextProvider/index.ts
 const INJECTION_KEY = "useTres";
-const [useTresContextProvider, _useTresContext] = createInjectionState(({ scene, canvas, windowSize, rendererOptions }) => {
+const [useTresContextProvider, _useTresContext] = createInjectionState(({ scene, canvas, fpsLimit, windowSize, rendererOptions }) => {
 	const localScene = shallowRef(scene);
 	const sizes = useSizes(windowSize, canvas);
 	const camera = useCameraManager({ sizes });
@@ -1017,6 +1020,7 @@ const [useTresContextProvider, _useTresContext] = createInjectionState(({ scene,
 		scene: localScene,
 		canvas,
 		options: rendererOptions,
+		fpsLimit,
 		contextParts: {
 			sizes,
 			camera
@@ -1934,6 +1938,10 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			type: Boolean,
 			required: false
 		},
+		fpsLimit: {
+			type: Number,
+			required: false
+		},
 		enableProvideBridge: {
 			type: Boolean,
 			required: false
@@ -2109,6 +2117,7 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const context = shallowRef(useTresContextProvider({
 			scene: scene.value,
 			canvas: props.canvas,
+			fpsLimit: () => props.fpsLimit ?? Infinity,
 			windowSize: props.windowSize ?? false,
 			rendererOptions: props
 		}));
@@ -2202,6 +2211,10 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			required: false,
 			default: void 0
 		},
+		fpsLimit: {
+			type: Number,
+			required: false
+		},
 		enableProvideBridge: {
 			type: Boolean,
 			required: false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",