旋转一个球体在三个轴不工作，如果使用一个循环

Rotating a sphere in threejs not working if using a loop

本文关键字：一个 工作 如果 循环 旋转 三个      更新时间：2023-09-26

我想让一个球体在点击按钮时旋转一定次数(次数由用户选择)。由于旋转的次数是开放的，我认为在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/

注意你在做什么:

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);
});

要等待渲染完成，您可以实现setTimeout()而不是for循环，间隔足够高以等待渲染:

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/

相关文章：