Three.js : 장면 모서리에 세계 좌표축 표시

Question

이것은 아마도 매우 기본적인 문제 일뿐입니다. 그러나 아직 해결책을 찾지 못했고 저를 괴롭혔습니다. Maya에서와 같이 카메라의 오른쪽 아래 모서리에있는 세계 좌표 방향 (x, y, z)을 나타내는 화살표를 표시하여 객체를 중심으로 카메라를 회전하거나 장면을 통해 이동할 때, 세계 좌표의 방향을 식별 할 수 있습니다. 두 가지 접근법을 사용하여이 작업을 수행하려고 시도했지만 어느 것도 지금까지 효과가 없습니다.

나는 세 개의 화살표가있는 객체가 THREE.ArrowHelper 클래스를 사용하는 어린이가 있으므로 잠시 동안 XYZ이라고 부릅니다. 첫 번째 방법은 XYZ을 장면의 자식으로 만들고 카메라의 현재 위치와 카메라가 가리키는 방향의 오프셋에서 계산 된 위치를 제공하여 구석에 나타나도록 조정합니다. 화면 중앙. 화살이 올바른 회전을 유지함에 따라 거의 작동했습니다. 그러나 위치는 조금 재미 있습니다. 카메라를 움직일 때 '지저분한'것이므로이 길로 내려가는 것을 중단했습니다. 나는 이것이 성능 문제 이건 다른 것이 든 확실하지 않습니다.

두 번째 방법은 로컬 위치 오프셋을 사용하여 카메라의 자식을 XYZ으로 만든 다음 카메라의 회전을 반대로하고 역방향 회전을 XYZ에 적용하여 세계 좌표와 일치시킵니다. 나는이 방법을 사용하여 가깝게 보이지만 올바른 위치를 얻거나 회전을 올바르게 할 수 있으며 둘 다 할 수는 없다.

XYZ에 올바른 방향을 제공하기 위해 현재 코드 XYZ.matrix.extractRotation(camera.matrixWorldInverse);을 사용하고 있지만 위치는 사용하지 않습니다. XYZ.matrixWorld.extractRotation(camera.matrixWorldInverse);을 사용하면 위치는 잘 유지되지만 (카메라에 부착 됨) 방향은 변경되지 않습니다.

누구나이 작업을 빠르게 수행 할 수 있다면 큰 도움이됩니다. 당신이 더 나은 방법을 가지고 있다면, 나는 그 사람을 추구하는 것보다 도움이 될 것입니다.

** - EDIT - ** 여기서 작업 버전을 찾을 수 있음을 언급해야합니다. - (https://googledrive.com/host/0B45QP71QXoR0Mm9Mbkp3WGI1Qkk/) Google 드라이브에 코드를 저장하고 있지만 로컬로는 Wamp 및 별칭을 사용하여 작업하므로 변경 사항이 적용됩니다. Google 드라이브 동기화가 완료되면 곧바로 온라인에 반영됩니다. I.E. 당신이 볼 때 그것은 부서 질지도 모른다.

Answer 1

이것은 here 전에 나타났습니다.

트릭은 원래 카메라와 동일한 방향이지만 원점에서 지정된 거리를 유지하는 두 번째 카메라로 두 번째 장면을 추가하는 것입니다.

camera2.position.copy(camera.position); 
camera2.position.sub(controls.target); 
camera2.position.setLength(CAM_DISTANCE); 
camera2.lookAt(scene2.position); 

편집 : 업데이트 바이올린 : 새로운 three.js 버전 http://jsfiddle.net/aqnL1mx9/

three.js를 r.69

Answer 2

사용할 수있는 (언제부터 모르는) :

var axisHelper = new THREE.AxisHelper(5); 
scene.add(axisHelper); 

참조 : AxisHelper

Answer 3

var camera, scene, renderer, geometry, material, mesh, axisHelper, localToCameraAxesPlacement; 
 

 
init(); 
 
animate(); 
 

 
function init() { 
 

 
    scene = new THREE.Scene(); 
 

 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10000); 
 
    camera.position.z = 500; 
 
    camera.up = new THREE.Vector3(0,0,1); 
 
    scene.add(camera); 
 
    
 
    axisHelper = new THREE.AxisHelper(0.1) 
 
    localToCameraAxesPlacement = new THREE.Vector3(0.45 * camera.aspect,-0.45, -2); // make sure to update this on window resize 
 
\t \t scene.add(axisHelper) 
 

 
    geometry = new THREE.CubeGeometry(200, 200, 200); 
 
    material = new THREE.MeshNormalMaterial(); 
 

 
    mesh = new THREE.Mesh(geometry, material); 
 
    scene.add(mesh); 
 

 
    renderer = new THREE.WebGLRenderer(); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 

 
    document.body.appendChild(renderer.domElement); 
 

 
} 
 

 
function animate() { 
 

 
    requestAnimationFrame(animate); 
 
    render(); 
 

 
} 
 

 
var t = 0 
 
function render() { 
 
    t++ 
 
    
 
    camera.position.x = Math.cos(t/80) * 500 
 
    camera.position.y = Math.sin(t/80) * 500 
 
    camera.lookAt(mesh.position) 
 
    
 
    camera.updateMatrixWorld() 
 
    var axesPlacement = camera.localToWorld(localToCameraAxesPlacement.clone()) 
 
\t \t axisHelper.position.copy(axesPlacement); 
 

 
    renderer.render(scene, camera); 
 

 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

이 63,739,은 추가 장면을 생성하지 않고 AxisHelper을 추가 할 수있는 "신속하고 더러운"방법입니다.모든 렌더마다 카메라 앞에서 축 도우미를 움직여 작동합니다.

// Initialize 
var scene = getScene(); 
axisHelper = new THREE.AxisHelper(0.1); 
var localToCameraAxesPlacement = new THREE.Vector3(0.45 * camera.aspect,-0.45,-2); // make sure to update this on window resize 
scene.add(axisHelper); 

// On every render 
var camera = getCamera(); 
camera.updateMatrixWorld(); 
var axesPlacement = camera.localToWorld(localToCameraAxesPlacement.clone()); 
axisHelper.position.copy(axesPlacement);