Question

我正在尝试将一个立方体绕任意轴旋转90度，以获得任意数量，但是旋转的行为不符合预期。

示例：将其围绕y轴旋转90度后，围绕z轴或x轴的旋转都会导致围绕x轴的旋转。我的代码：

var camera, scene, renderer;
var geometry, material;
var mesh, mesh2;

init();
animate();

function init() {
    camera = new THREE.OrthographicCamera( window.innerWidth/-2, window.innerWidth/2, window.innerHeight/2, window.innerHeight/-2, 1, 1000 );
    camera.position.z = 400;
    camera.position.x = 400;                
    camera.position.y = 400;
    camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

    scene = new THREE.Scene();

    material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );
    geometry = new THREE.BoxGeometry( 200, 200, 200 );
    geometry.faces[ 0 ].color.setHex( 0xff0000 );
    geometry.faces[ 1 ].color.setHex( 0xff0000 );
    geometry.faces[ 2 ].color.setHex( 0xff0000 );
    geometry.faces[ 3 ].color.setHex( 0xff0000 );
    geometry.faces[ 4 ].color.setHex( 0x00ff00 );
    geometry.faces[ 5 ].color.setHex( 0x00ff00 );
    geometry.faces[ 6 ].color.setHex( 0x00ff00 );
    geometry.faces[ 7 ].color.setHex( 0x00ff00 );
    geometry.faces[ 8 ].color.setHex( 0x0000ff );
    geometry.faces[ 9 ].color.setHex( 0x0000ff );
    geometry.faces[ 10 ].color.setHex( 0x0000ff );
    geometry.faces[ 11 ].color.setHex( 0x0000ff );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    //The X axis is red. The Y axis is green. The Z axis is blue.
    var axesHelper = new THREE.AxesHelper( 1000 );
    scene.add( axesHelper );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );

    if( mesh.rotation.y < Math.PI/2 ) {
        //first rotation around the y-axis
        mesh.rotation.y += Math.PI/2 /200;
    }
    else if( mesh.rotation.z < Math.PI/2 ) {
        //second rotation around the z-axis
        mesh.rotation.z += Math.PI/2 /200;
    }
    //a rotation around the x-axis behaves like the rotation around the z-axis
    /*else if( mesh.rotation.x < Math.PI/2 ) {
        //second rotation around the x-axis
        mesh.rotation.x += Math.PI/2 /200;
    }*/
}

因此，绕y轴旋转之后，绕蓝线旋转似乎是不可能的。

同样，绕x轴旋转总是导致绕红线旋转，但是绕y轴/ z轴旋转的结果似乎取决于先前绕其他轴的旋转轴。对我来说，y轴和z轴似乎随立方体一起旋转，但x轴却没有。

我是Three.js的新手，所以有人可以向我解释这种行为吗？

Three.js中多维数据集的怪异旋转行为

0 个答案: