javascript - 如果使用循环，则在 threejs 中旋转球体不起作用

Question

我试图在单击按钮时让球体旋转一定次数(次数由用户选择)。由于旋转次数是开放式的，我认为在 for 循环中完成它是最简单的:

$('#clickme').on('click', function () {
    var multiple = 4; //Change this value to rotate at different angles
    var rotationVector = new THREE.Vector3(0,1,0);
    var angle = ((360 / multiple) * Math.PI) / 180;
    for (var i = 0; i < multiple; i++) {
        sphere.rotateOnAxis(rotationVector, angle);
        alert(i);
    }
});

alert 目前只是一个占位符，但我确实希望在每次轮换后完成其他事情。这里的问题是旋转永远不会完成。没有错误，它命中了那行代码，但对象永远不会旋转。如果我将 sphere.rotateOnAxis 从 for 循环中取出，那么它工作正常(至少每次点击它旋转一次)。我已经尝试了各种重新渲染场景的方法，但都没有任何效果。

这里的工作示例:http://jsfiddle.net/weatL3nc/2/

Answer 1

注意你在这里做什么:

var angle = ((360 / multiple) * Math.PI) / 180;

您通过将 360 度(或 2 π 弧度)分成 n 片来获得一个 Angular 。然后在这里:

for (var i = 0; i < multiple; i++) {
    sphere.rotateOnAxis(rotationVector, angle);
}

您将按该 Angular 旋转 n 次。这意味着无论 multiple 是什么，在 for 循环结束时，您都将精确旋转 360 度。换句话说，它正在工作，只是您永远不会注意到它，因为下次它绘制屏幕时，球体会立即回到之前的位置。

作为替代方案，您可以尝试使用 setInterval允许屏幕在帧之间重绘，如下所示:

$('#clickme').on('click', function () {
    var multiple = 2; //Change this value to rotate at different angles
    var rotationVector = new THREE.Vector3(0,1,0);
    var angle = ((360 / multiple) * Math.PI) / 180;
    var frame = 0;
    var ival = setInterval(function() {
        sphere.rotateOnAxis(rotationVector, angle);
        frame++;
        alert('Frame ' + frame + ' of ' + multiple);
        if (multiple == frame)
            clearInterval(ival);
    }, 1);
});

Demonstration