第三.js实时动画

Question

我正在使用三个.js并对一些对象进行了动画处理。我使用 three.js 的 animate(( 函数对对象进行了动画处理。基本上是这样的：

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

不幸的是，这被称为每个渲染帧。因此，在具有不同帧速率的每个设备上，对象的速度是不同的。有没有办法根据秒或毫秒来做到这一点？

谢谢

Answer 1

three.js中也有THREE.Clock()：

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

Answer 2

requestAnimationFrame自页面加载到回调以来的时间。我通常更喜欢在几秒钟内完成数学运算，但经过的时间以毫秒为单位，所以

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：我很惊讶这还没有在stackoverflow上。它可能在某个地方。当然，请求动画帧已经被覆盖了，也许只是不是在三个.js的上下文中。

有这个：THREE中动画的最佳选择

.JS

Answer 3

您可以使用 TWEEN(一个 js lib for Three(。 这是吐温的教程：http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

您可以非常简单地使用它：

new TWEEN.Tween(object.position).to(targetPos, 200).start().onComplete(()=>{
//Do something when action complete
});