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