@tresjs/core 5.6.0 → 5.8.0

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

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.6.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.6.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,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.6.0
+  * version: v5.8.0
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
@@ -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
@@ -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;
@@ -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
@@ -911,6 +919,24 @@ declare const vLog: {
   }) => void;
 };
 //#endregion
+//#region src/utils/createTimer.d.ts
+interface TresTimer {
+  getDelta: () => number;
+  getElapsed: () => number;
+  update: () => void;
+  start: () => void;
+  stop: () => void;
+}
+/**
+ * Creates a unified timer abstraction that uses `Timer` on Three.js r179+
+ * and falls back to `Clock` on older versions.
+ *
+ * - On r179+: uses `Timer` with its Page Visibility API support (`connect`/`disconnect`).
+ * - On older versions: uses `Clock` with `start`/`stop`.
+ *
+ */
+declare function createTimer(): TresTimer;
+//#endregion
 //#region src/utils/is/three.d.ts
 /**
  * Type guard to check if a value is a Three.js Object3D
@@ -1154,4 +1180,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, _default$1 as TresCanvasContext, 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, TresRendererError, TresRendererErrorCode, TresRendererSetupContext, TresScene, TresVector2, TresVector3, TresVector4, UseCameraReturn, _default$2 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, _default$1 as TresCanvasContext, 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, TresRendererError, TresRendererErrorCode, TresRendererSetupContext, TresScene, TresTimer, TresVector2, TresVector3, TresVector4, UseCameraReturn, _default$2 as UseLoader, UseLoaderReturn, UseRendererManagerReturn, UseRendererOptions, VectorCoordinates, type VectorFlexibleParams, VueProps, WithMathProps, buildGraph, catalogue, createTimer, 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,20 +1,20 @@
 /**
   * name: @tresjs/core
-  * version: v5.6.0
+  * version: v5.8.0
   * (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 * 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, Scene, SpotLightHelper, Timer, Vector3, WebGLRenderer } 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 { 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";
 
 //#region package.json
-var version = "5.6.0";
+var version = "5.8.0";
 
 //#endregion
 //#region src/utils/makeMap.ts
@@ -716,13 +716,55 @@ const setPixelRatio = (renderer, systemDpr, userDpr) => {
 	if (newDpr !== renderer.getPixelRatio?.()) renderer.setPixelRatio(newDpr);
 };
 
+//#endregion
+//#region src/core/revision.ts
+const revision = Number.parseInt(REVISION.replace("dev", ""));
+
+//#endregion
+//#region src/utils/createTimer.ts
+/**
+* Minimum Three.js revision that ships the `Timer` class.
+*/
+const TIMER_MIN_REVISION = 179;
+/**
+* Creates a unified timer abstraction that uses `Timer` on Three.js r179+
+* and falls back to `Clock` on older versions.
+*
+* - On r179+: uses `Timer` with its Page Visibility API support (`connect`/`disconnect`).
+* - On older versions: uses `Clock` with `start`/`stop`.
+*
+*/
+function createTimer() {
+	if (revision >= TIMER_MIN_REVISION) {
+		const timer = new THREE.Timer();
+		return {
+			getDelta: () => timer.getDelta(),
+			getElapsed: () => timer.getElapsed(),
+			update: () => timer.update(),
+			start: () => {
+				if (typeof document !== "undefined") timer.connect(document);
+			},
+			stop: () => timer.disconnect()
+		};
+	} else {
+		const clock = new THREE.Clock();
+		return {
+			getDelta: () => clock.getDelta(),
+			getElapsed: () => clock.elapsedTime,
+			update: () => {},
+			start: () => clock.start(),
+			stop: () => clock.stop()
+		};
+	}
+}
+
 //#endregion
 //#region src/composables/useCreateRafLoop/index.ts
 /**
 * @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 timer = new Timer();
+const useCreateRafLoop = (cycleFn, { fpsLimit } = {}) => {
+	const timer = createTimer();
 	const eventHooks = {
 		before: createEventHook(),
 		after: createEventHook()
@@ -736,13 +778,16 @@ const useCreateRafLoop = (cycleFn) => {
 		eventHooks.before.trigger(context);
 		cycleFn();
 		eventHooks.after.trigger(context);
-	}, { immediate: false });
+	}, {
+		immediate: false,
+		fpsLimit
+	});
 	const start = () => {
-		if (typeof document !== "undefined") timer.connect(document);
+		timer.start();
 		resume();
 	};
 	const stop = () => {
-		timer.disconnect();
+		timer.stop();
 		pause();
 	};
 	return {
@@ -766,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,
@@ -841,7 +886,7 @@ Error details: ${rendererError.message}`, rendererError);
 	};
 	const loop = useCreateRafLoop(() => {
 		if (frames.value) renderFunction(notifyFrameRendered);
-	});
+	}, { fpsLimit });
 	readyEventHook.on(() => {
 		if (isInitialized.value) loop.start();
 	});
@@ -967,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 });
@@ -975,6 +1020,7 @@ const [useTresContextProvider, _useTresContext] = createInjectionState(({ scene,
 		scene: localScene,
 		canvas,
 		options: rendererOptions,
+		fpsLimit,
 		contextParts: {
 			sizes,
 			camera
@@ -1892,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
@@ -2067,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
 		}));
@@ -2160,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,
@@ -2561,4 +2616,4 @@ const plugin = { install(app) {
 var src_default = plugin;
 
 //#endregion
-export { DevtoolsMessenger, TresCanvas_default as TresCanvas, Context_default as TresCanvasContext, TresRendererError, component_default as UseLoader, buildGraph, catalogue, src_default 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, template_compiler_options_default as templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };
+export { DevtoolsMessenger, TresCanvas_default as TresCanvas, Context_default as TresCanvasContext, TresRendererError, component_default as UseLoader, buildGraph, catalogue, createTimer, src_default 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, template_compiler_options_default as templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };

package/package.json

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