three.js 设置渲染帧数 FPS

最新推荐文章于 2025-06-03 23:37:52 发布

towrabbit

最新推荐文章于 2025-06-03 23:37:52 发布

阅读量5.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： three.js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/towrabbit/article/details/112056546

three.js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了使用JavaScript控制渲染帧率的方法，该方法不仅适用于three.js，对任意使用JS渲染的帧率控制都通用。主要思路是在渲染动画函数外设置定时器，渲染时计时，渲染前判断当前帧与上一帧的时间间隔，根据间隔决定是否渲染，以获得稳定帧率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本片文章用于

限制渲染的帧数不超过某个速率
不单单是three.js 任意的使用js渲染的帧率控制都通用

主要思路

在渲染动画的函数外放置一个定时器
在开始渲染的时候计时器开始计时
在渲染一帧之前判断当前渲染的这帧距离上一帧所经过的时间
如果时间小于（1/FPS）单帧渲染时间（例如60帧就是 1/60s）则跳过不进行渲染
如果时间大于(1/FPS) 单帧渲染时间则将判定的时间设置为(当前帧距离上一帧的时间 - 1/FPS) 用于下一帧的计算

const clock = THREE.Clock();//计时器
const FPS = 30; // 指的是 30帧每秒的情况
const singleFrameTime = (1/FPS);
let timeStamp = 0;
...

animate(){
	requestAnimationFrame(animate);
	const delta = this.clock.getDelta(); //获取距离上次请求渲染的时间
	timeStamp += delta;
	if (this.timeStamp > singleFrameTime) {
		render();//渲染
		// 剩余的时间合并进入下次的判断计算 这里使用取余数是因为 当页页面失去焦点又重新获得焦点的时候，delta数值会非常大， 这个时候就需要
		timeStamp = (timeStamp % singleFrameTime);
	}
}

这样可以得到一个稳定的帧率