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 축을 제어하는 경우에서 볼 수 있듯이 'Angle'비디오) 당신은 이상한 방식으로 회전합니다. Y 축이 왼쪽에서 오른쪽으로 계속 이동하는 동안 X 축이 동일하게 유지된다는 것을 짐작할 수 있겠지만 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-enexpectedly/32158005#32158005. 오일러 각이 three.js에서 어떻게 작동하는지 이해할 때까지 실험하십시오. – WestLangley