本片文章用於
- 限制渲染的幀數不超過某個速率
- 不單單是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);
}
}
這樣可以得到一個穩定的幀率