Three.js實時動畫

我使用three.js和動畫的一些對象。我使用three.js的animate（）函數爲對象設置動畫。基本上是這樣的：Three.js實時動畫

function animate(){ 
    object.position.z++; 
}

不幸的是，這被稱爲每個渲染幀。因此，在具有不同幀率的每個設備上，我的對象的速度是不同的。有沒有辦法根據秒或毫秒來做到這一點？

感謝

來源

2017-07-27 tinytree

傳遞自頁面加載到回調以來的時間。我平時喜歡做我的數學在幾秒鐘，但在過去的時間以毫秒爲單位，從而

let then = 0; 
function animate(now) { 
    now *= 0.001; // make it seconds 

    const delta = now - then; 
    then = now; 

    object.position.z += delta * speedInUnitsPerSecond; 

    ... 

    requestAnimationFrame(animate); 
} 
requestAnimationFrame(animate);

PS：我很驚訝，這是不是已經在計算器。它可能在某個地方。當然requestAnimationFrame已經被覆蓋了，可能就不在three.js的上下文中。

有這樣的：Best options for animation in THREE.JS

來源

2017-07-27 09:28:51 gman

在requestAnimationFrame(callback)，所述callback(delta)函數只有一個參數，它是它採取了幀之間的時間。您可以使用它來說明不同的幀速率

例如，

function animate(delta) { 
    var i = 1; 
    object.position.z += i*delta // do whatever you want with delta 
}

來源

2017-07-27 07:17:40 vassiliskrikonis

這聽起來像這正是我一直在尋找。我嘗試了你的建議，但「三角洲」只是總結每一個循環。它更像是一個時間戳我必須手動減少或者我做錯了什麼。 – tinytree

@tinytree你是對的。其他人說得對，我個人使用了'THREE.Clock（）'，所以我提出了相關的答案。 – vassiliskrikonis

還有THREE.Clock()在three.js：

var clock = new THREE.Clock(); 
var speed = 2; //units a second 
var delta = 0; 

render(); 
function render(){ 
    requestAnimationFrame(render); 

    delta = clock.getDelta(); 
    object.position.z += speed * delta; 

    renderer.render(scene, camera); 
}

jsfiddle例如R86

來源

2017-07-27 10:05:58 prisoner849

Three.js實時動畫

回答

相關問題