Question

我是three.js的新手，无法找到有关如何更改旋转方向的文档。当前旋转已设置，因此球体看起来像是朝屏幕上的观察者旋转，但我希望它按顺时针方向旋转，因此如果观察者正在观看，它看起来像是从侧面旋转。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, 500 / 400, 1, 1000);


var renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 400);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geometry);
scene.add(cube);



camera.position.z = 10;
var render = function () {
    requestAnimationFrame(render);
        cube.rotation.x -= 0.10;
    cube.rotation.y += 0.00;

    renderer.render(scene, camera);
};

render();

http://jsfiddle.net/SF9tX/1968/

Answer 1

如果我正确理解了您的问题，则可以通过增加对象旋转矢量的不同分量来实现围绕不同方向（或轴'）的旋转。

因此，例如，如果您想绕y轴旋转立方体（即创建“旋转地球”效果），则可以增加.y向量的.rotation分量，如下所示：如下：

var render = function () {

    requestAnimationFrame(render);

    // This was casuing rotation around about the x-axis
    // cube.rotation.x -= 0.10; 

    // Add this to cause rotation around the z-axis, 
    cube.rotation.z += 0.10;

    renderer.render(scene, camera);
};

Answer 2

我明白了。就像将cube.rotation.x替换为cube.rotation.z一样简单，所以：

camera.position.z = 10;
var render = function () {
    requestAnimationFrame(render);
            cube.rotation.z -= 0.10;
   cube.rotation.y += 0.00;

    renderer.render(scene, camera);
};

如何在Three.js中更改旋转方向

2 个答案: