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现在只是一个占位符，但我确实希望在每次轮换后完成其他事情。这里的问题是旋转永远不会完成。没有错误，它会触及该行代码，但对象永远不会旋转。如果我从for循环中取出sphere.rotateOnAxis，那么它可以正常工作（至少每次点击一次旋转一次）。我尝试了各种重新渲染场景的方法，但从未做过任何事情。

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

Answer 1

注意你在这里做的事情：

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

你通过将360度（或2 π弧度）划分为 n 切片来获得角度。然后在这里：

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

您正在以该角度旋转 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

Answer 2

要等待呈现完成，您可以实现setTimeout() for的{{1}}循环，其间隔足够高以等待呈现：

var iteration = 0;
var multiple = 4;
var interval = 100; // ms
var angle = ((360 / multiple) * Math.PI) / 180;

function rotateAndSave() {
    iteration++;
    sphere.rotateOnAxis(rotationVector, angle);
    //alert(iteration);
    if (iteration < maxIterations) setTimeout(rotateAndSave, interval);
}

然后在您的点击上调用此功能：

rotateAndSave();

http://jsfiddle.net/weatL3nc/6/

如果使用循环，则旋转三个js中的球体不起作用

2 个答案: