如何正确利用设置超时函数将立方体旋转三.js

Question

我正在编写的程序将用于旋转立方体。html文件将允许用户输入带有四元数数据的csv文件。然后，javascript 代码使用数据文件中的每个四元数以恒定速率旋转立方体。在这种情况下，每个新的四元数每 16.7 毫秒 (60 fps) 应用于立方体。我目前编写的程序使用 setTimeout 来执行这个目标。

这是我目前拥有的javascript代码：

<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff70 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
renderer.render(scene,camera);

var animate = function() {
quat_data = [];
var rotate = function(quat) {
cube.applyQuaternion(quat);
}
for(i=0; i<quat_data.length; i++) {
time = 16.7;
var next_quat = quat_data[i];
setTimeout(rotate(next_quat), time);
}

}

</script>

用户单击浏览器显示顶部的按钮以执行 animate 函数。另请注意，quat_data当前为空。为了测试javascript代码，我将quat_data设置为等于一个示例四元数数组。我还没有编写代码将输入的 csv 文件转换为数组。一旦我这样做了，我将使用它而不是样本四元数。

问题是当我运行程序时，立方体显示，但它不旋转。我包括足够的样本四元数来观察旋转，所以缺乏四元数不是问题。我没有收到控制台错误。我试过包括这条线

renderer.render(scene,camera);

在旋转函数和代码中的其他几个位置，但这不会重新呈现多维数据集。

我应该在 animate 函数中包含哪些代码才能在应用每个四元数后重新渲染立方体？或者，有没有办法使用 requestAnimationFrame 执行相同的任务？

Answer 1

首先，您需要在rotate函数中使用renderer.render(scene,camera);，因为在更改立方体的方向后，您需要重新渲染场景。

第二件事是，您以错误的方式使用setTimeout函数。您想在 16.7、33.4、50.1 ...毫秒。所以你必须以这种方式打发时间。此外，您必须传递回调函数，而不是直接调用该函数。试试下面的代码 -

let time = 0;
for(let i=0; i<quat_data.length; i++) {
time += 16.7;
setTimeout(function() { 
rotate(quat_data[i])
}, time);
}

最后一件事是，尽量避免使用动画setTimeout功能，而是使用window.requestAnimationFrame.浏览器将在下次重绘之前调用此函数，您可以在此函数中更改立方体方向并渲染场景。这是示例代码 -

let i= 0;
var animate = function () {
requestAnimationFrame( animate );
i++;
if (i >= quat_data.length)
i = quat_data.length - 1;
let quat = quat_data[i];
cube.applyQuaternion(quat);
renderer.render( scene, camera );
};
animate();