如果使用循环,则在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.rotateOnAxisfor循环,那么它工作正常(至少每次点击旋转一次).我尝试了各种重新渲染场景的方法,但是从来没有做过任何事情.

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

Answer 1

注意你在这里做了什么:

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

你通过将360度(或2得到的角度π弧度)为Ñ切片.然后在这里:

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

示范