0
我对这个问题没有丝毫的理解，因为如果你看看我制作的下面的视频，它是自我解释的。3D摄像头X轴旋转
无角 - 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>
\t <head>
\t \t <title>My first three.js app</title>
\t \t <style>
\t \t \t body { margin: 0; }
\t \t \t canvas { width: 100%; height: 100% }
\t \t </style>
\t </head>
\t <body>
\t \t <script src="https://threejs.org/build/three.js"></script>
\t \t <script src="js/jquery-3.1.1.min.js"></script>
\t \t <script src="js/movement.js"></script>
\t \t <script>
\t \t \t var cubes = [];
var geometry = new THREE.BoxGeometry(1, 1, 1);
//var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
\t \t \t var scene = new THREE.Scene();
\t \t \t var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
\t \t \t var renderer = new THREE.WebGLRenderer();
\t \t \t renderer.setSize(window.innerWidth, window.innerHeight);
\t \t \t document.body.appendChild(renderer.domElement);
for(i = 0; i < 4; i++) {
if(i == 0) {
material = new THREE.MeshBasicMaterial({ color: 0x63AEDB });
\t \t \t \t } else {
material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
\t \t \t \t }
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;
\t \t \t camera.position.z = 2;
\t \t \t camera.rotation.y = 0;
\t \t \t //console.log(camera.rotation.x);
\t \t \t var render = function() {
\t \t \t \t requestAnimationFrame(render);
\t \t \t \t //cubes[1].rotation.x += 0.00;
\t \t \t \t //cube.rotation.y += 0.01;
\t \t \t \t renderer.render(scene, camera);
\t \t \t \t
\t \t \t };
\t \t \t render();
\t \t </script>
\t </body>
</html>
你如何旋转相机？你有一些代码要显示吗？ – neeh
你走了，有完整的代码。我做了一个小系统，它检查你是否按住按钮，这就是为什么这么小的系统有这么多的代码......我也对你可以走多远等做了一些限制。 –
请参阅http： //stackoverflow.com/questions/32157515/threejs-x-rotation-behaving-unexpectedly/32158005#32158005。试验，直到你明白欧拉角如何在three.js中工作。 – WestLangley