Three.js: Mostra gli assi delle coordinate mondiali nell'angolo della scena

Question

Questo è probabilmente un problema molto semplice, ma non ho ancora trovato una soluzione e mi ha infastidito. Mi piacerebbe mostrare le frecce che indicano le direzioni delle coordinate del mondo (x, y, z) nell'angolo in basso a destra della fotocamera, come in Maya, in modo che quando si ruota la fotocamera attorno a un oggetto o si muova attraverso una scena, puoi ancora identificare le direzioni delle coordinate del mondo. Ho cercato di farlo utilizzando due approcci diversi e nessuno dei due ha funzionato finora.

Ho un oggetto con tre frecce da bambino utilizzando la classe THREE.ArrowHelper, lo chiameremo per il momento XYZ. Il primo approccio consiste nel rendere XYZ un figlio della scena e fornirgli una posizione calcolata dalla posizione corrente della fotocamera più un offset nella direzione in cui la telecamera sta puntando e regolarlo in modo che appaia nell'angolo in cui lo voglio invece che nel centro dello schermo. Ho quasi funzionato, poiché le frecce mantengono la rotazione corretta, ma la posizione è un po 'strana e ho smesso di seguire questa strada perché era davvero "nervosa" quando si spostava la fotocamera. Non sono sicuro che si tratti di un problema di prestazioni o qualcos'altro.

Il secondo metodo è quello di fare XYZ un figlio della fotocamera con una posizione locale offset e poi invertire la rotazione della telecamera e applicare la rotazione inversa, che XYZ in modo che corrisponda coordinate mondo. Mi sembra di essere vicino usando questo metodo, ma posso o ottenere la posizione corretta, o la rotazione corretta, non entrambi.

Attualmente sto usando il codice XYZ.matrix.extractRotation(camera.matrixWorldInverse); per fornirmi l'orientamento corretto per XYZ, ma il suo posizionamento è disattivato. Se utilizzo XYZ.matrixWorld.extractRotation(camera.matrixWorldInverse);, la posizione rimane valida (collegata alla fotocamera) ma l'orientamento non cambia.

Se qualcuno ha un attacco rapido per farlo funzionare, sarebbe molto apprezzato. Se hai un metodo migliore, rispetto a quello che sto perseguendo, sarebbe anche utile.

** - EDIT - ** probabilmente dovrei dire che è possibile trovare la versione di lavoro qui - (https://googledrive.com/host/0B45QP71QXoR0Mm9Mbkp3WGI1Qkk/) Sto memorizzare il mio codice in Google Drive, ma lavoro a livello locale con WAMP e aliasing che significa che tutte le modifiche che rendono localmente si riflettono online non appena l'unità di Google si sincronizza. OSSIA potrebbe essere rotto quando dai un'occhiata.

Answer 1

Questo è venuto prima here.

Il trucco consiste nell'aggiungere una seconda scena con una seconda fotocamera, che ha lo stesso orientamento della fotocamera originale, ma mantiene una distanza specificata dall'origine.

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

EDIT: violino Aggiornato: http://jsfiddle.net/aqnL1mx9/

Three.js r.69

Answer 2

Con le nuove versioni three.js (non so da quando) si può usare:

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

Riferimento: 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>

questo è un modo "veloce e sporco" per aggiungere un AxisHelper senza creare una scena aggiuntiva.Funziona spostando l'helper degli assi davanti alla telecamera su ogni render.

// 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);