Question

我几乎不知道如何解释这个问题，因为如果你看一下我制作的以下视频就是自我解释。

没有角度 - https://www.youtube.com/watch?v=R_GtaXWpP9c&feature=youtu.be

角度 - https://www.youtube.com/watch?v=RoaZMccGYGo&feature=youtu.be

正如您在无角度版本中所看到的，您可以完全正常地旋转Y轴，但是当您控制X轴时（如“角度”视频中所示），您会以一种奇怪的方式旋转，这是有道理的。我想，正如你可能已经猜到的那样，X轴保持不变，而Y轴从左向右移动，我不希望Y轴从正向下倾斜。

我希望这是有道理的，希望有一个很好的解释，我可能错过了一个包含所有公式的网站，但我不确定所谓的'问题'是什么。

我的轮播脚本的一些代码：

var pressed = [0,0,0,0,0,0,0,0];
function update() {
    $('#w').html(pressed);
}
setInterval(update, 100);
$(document).keydown(function(evt) {
    if (evt.which == 87) {
        pressed[0] = 1;
    }
    if(evt.which == 68) {
        pressed[1] = 1;
    }
    if(evt.which == 65) {
        pressed[2] = 1;
    }
    if(evt.which == 83) {
        pressed[3] = 1;
    }
    if(evt.which == 39) {
        pressed[4] = 1;
    }
    if(evt.which == 37) {
        pressed[5] = 1;
    }
    if(evt.which == 38) {
        pressed[6] = 1;
    }
    if(evt.which == 40) {
        pressed[7] = 1;
    }
    //console.log(evt.which);
});
$(document).keyup(function(evt) {
    if (evt.which == 87) {
        pressed[0] = 0;
    }
    if(evt.which == 68) {
        pressed[1] = 0;
    }
    if(evt.which == 65) {
        pressed[2] = 0;
    }
    if(evt.which == 83) {
        pressed[3] = 0;
    }
    if(evt.which == 39) {
        pressed[4] = 0;
    }
    if(evt.which == 37) {
        pressed[5] = 0;
    }
    if(evt.which == 38) {
        pressed[6] = 0;
    }
    if(evt.which == 40) {
        pressed[7] = 0;
    }
});
function check_pressed() {
    if(pressed[0] == 1){
        camera.position.z = camera.position.z - 0.1;
    }
    if(pressed[1] == 1){
        camera.position.x = camera.position.x + 0.1;
    }
    if(pressed[2] == 1){
        camera.position.x = camera.position.x - 0.1;
    }
    if(pressed[3] == 1){
        camera.position.z = camera.position.z + 0.1;
    }
    if(pressed[4] == 1){
        if(camera.rotation.y <= Math.PI * -2) {
            camera.rotation.y = 0;
        } else {
            camera.rotation.y -= 0.03;
        }
    }
    if(pressed[5] == 1){
        if(camera.rotation.y >= Math.PI * 2) {
            camera.rotation.y = 0;
        } else {
            camera.rotation.y += 0.03;
        }
    }
    if(pressed[6] == 1){
        if(camera.rotation.x >= 0.5) {
            camera.rotation.x = 0.5;
        } else {
            camera.rotation.x += 0.01;
        }
    }
    if(pressed[7] == 1){
        if(camera.rotation.x <= 0) {
            camera.rotation.x = 0;
        } else {
            camera.rotation.x -= 0.01;
        }
    }

}
setInterval(check_pressed, 20);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/movement.js"></script>
		<script>
			var cubes = [];
            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
            //var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

            for(i = 0; i < 4; i++) {
                if(i == 0) {
                    material = new THREE.MeshBasicMaterial( { color: 0x63AEDB } );
				} else {
                    material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
				}
                cubes[i] = new THREE.Mesh( geometry, material );
                scene.add( cubes[i] );
            }
            cubes[1].position.x = -2;
            cubes[1].position.z = 2;
            cubes[2].position.x = 2;
            cubes[2].position.z = 2;
            cubes[3].position.z = 4;
			camera.position.z = 2;
			camera.rotation.y = 0;
			//console.log(camera.rotation.x);
			var render = function () {
				requestAnimationFrame( render );

				//cubes[1].rotation.x += 0.00;
				//cube.rotation.y += 0.01;

				renderer.render(scene, camera);
				
			};
			render();
		</script>
	</body>
</html>

Answer 1

您正在自己的坐标系中旋转相机。

当camera.rotation.x（或z）不为0时， y 轴将被转换，不再向上指向。这就解释了为什么旋转表现得很奇怪。

如果您希望 y 轴位于世界的坐标系中，您可以添加THREE.Object3D充当轴心点作为父级您的camera。

var pivot = new THREE.Object3D();
scene.add(pivot);
pivot.add(camera);

现在，相机的rotation.y由pivot：

控制

pivot.rotation.y += 0.03;

...... position：

也是如此

pivot.position.z = 2.0;

我在this fiddle更新了您的代码。

Answer 2

不需要枢轴。您问题的简单解决方案是设置

camera.rotation.order = 'YXZ'; // the default is 'XYZ'

然后，相机旋转将按预期运行。

有关详细信息，请参阅this answer。

更新了小提琴：https://jsfiddle.net/07g07uLa/1/

请注意，小提琴中没有枢轴，也无需将相机添加到场景中。

three.js r.84

3D相机X轴旋转

2 个答案: