2016-06-06 2 views
0

개체를 구현하려고합니다. 위치 (POI-Point Of Interest) 주변을 비행하고 마주하고 있습니다. WASD를 누르면 POI의 회전을 변경할 수 있습니다. A 및 D -> y 축을 변경하고, W 및 S는 x 축을 변경합니다.로컬 축을 중심으로 회전

데모 (http://jsbin.com/yodusufupi)에서 볼 수 있듯이 y 축 회전은 도우미 객체의 로컬 회전을 기준으로 이루어 지지만 x 축은 전역 공간에서 계산됩니다. 회전 설정은 helper.rotation.set(rotX, rotY, 0);을 통해 이루어집니다.

내가 뭘 잘못하고있어? 나는 지역 우주에서 행해지는 두 번의 회전을 원한다.

Thx!

PS : 최소한의 작업 예제는 오일러 three.js를에서 작업 각도 방법을 이해하는 것이 필요

var scene = new THREE.Scene(); 

var DEG_2_RAD = Math.PI/180; 
var rotX = -45 * DEG_2_RAD; 
var rotY = 45 * DEG_2_RAD; 

var helper = new THREE.AxisHelper(2); 
var cam = new THREE.AxisHelper(1); 
helper.add(cam); 
scene.add(helper); 

cam.translateZ(4); 

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000); 
camera.position.z = 10; 
camera.position.y = 10; 
camera.lookAt(new THREE.Vector3(0, 0, 0)); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

helper.rotation.set(rotX, rotY, 0); 
renderer.render(scene, camera); 

답변

1

(x 축 세계적으로 계산되는 동안 Y 주위의 회전은 올바른 것 같다). 이를 위해서는 this answer을 참조하십시오. 사용 사례를 들어

이러한 방법을 사용할 수 있습니다 것과

object.rotateX(angle); // angle is in radians 

object.rotateY(angle); 

three.js를 r.77

+0

많은 감사를! in58에서 제거되었고 72에서 다시 구현되었지만 문서가 업데이트되지 않았습니다. http://threejs.org/docs/#Reference/Core/Object3D –

관련 문제