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