如何正确利用settimeout函数来旋转具有three.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>

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

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

renderer.render(scene,camera);

在旋转函数内和代码中的其他几个位置，但没有重新渲染多维数据集。

在应用每个四元数后，我应该在animate函数中包含哪些代码来重新渲染多维数据集？或者，有没有办法用requestAnimationFrame执行相同的任务？

Answer 1

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

第二件事是，你正在以错误的方式使用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();