three.js 設置渲染幀數 FPS

本片文章用於

• 限制渲染的幀數不超過某個速率
• 不單單是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);
	}
}

這樣可以得到一個穩定的幀率