如何正确利用 settimeout 函数用 three.js 旋转立方体答案

【问题标题】：How to properly utilize settimeout function to rotate a cube with three.js如何正确利用 settimeout 函数用 three.js 旋转立方体
【发布时间】：2019-03-26 15:09:17
【问题描述】：

我正在编写的程序将用于旋转立方体。 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 执行相同的任务？

【问题讨论】：

标签： javascript three.js settimeout requestanimationframe

【解决方案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();

【讨论】：