Three.js: Zeige Weltkoordinatenachsen in einer Ecke der Szene

Question

Das ist wahrscheinlich ein sehr grundlegendes Problem, aber ich habe noch keine Lösung gefunden und es hat mich gestört. Ich möchte Pfeile zeigen, die die Koordinaten der Weltkoordinaten (x, y, z) in der unteren rechten Ecke der Kamera anzeigen, wie in Maya, so dass, wenn die Kamera um ein Objekt gedreht wird oder sich durch eine Szene bewegt, Sie können immer noch die Richtungen der Weltkoordinaten identifizieren. Ich habe versucht, dies mit zwei verschiedenen Ansätzen zu erreichen, und beides hat bisher nicht funktioniert.

Ich habe ein Objekt mit drei Pfeilen als Kinder mit der THREE.ArrowHelper Klasse, wir nennen es XYZ für den Augenblick. Die erste Annäherung ist, XYZ ein Kind der Szene zu bilden und ihm eine Position zur Verfügung zu stellen, die von der gegenwärtigen Position der Kamera plus eine Versetzung in der Richtung berechnet wird, die die Kamera zeigt und justiert, damit sie in der Ecke erscheint, die ich anstatt in der Ecke will Mitte des Bildschirms. Ich habe fast das funktioniert, wie in den Pfeilen die richtige Rotation beibehalten, aber die Position ist ein bisschen komisch, und ich hörte auf, diese Route zu gehen, weil es wirklich "nervös" war, wenn Sie die Kamera herum bewegen. Ich bin mir nicht sicher, ob es ein Leistungsproblem oder etwas anderes war. Die zweite Methode besteht darin, XYZ ein Kind der Kamera mit einem lokalen Positionsversatz zu machen und dann die Drehung der Kamera umzukehren und die umgekehrte Drehung auf XYZ anzuwenden, so dass es den Weltkoordinaten entspricht. Ich scheine mit dieser Methode in der Nähe zu sein, aber ich kann entweder die Position richtig oder die Rotation korrigieren, nicht beide.

ich zur Zeit mit dem Code XYZ.matrix.extractRotation(camera.matrixWorldInverse); mich mit der richtigen Ausrichtung für XYZ zu schaffen, aber es ist Positionierung ist ausgeschaltet. Wenn ich XYZ.matrixWorld.extractRotation(camera.matrixWorldInverse); verwende, bleibt die Position in Ordnung (an der Kamera befestigt), aber die Ausrichtung ändert sich nicht.

Wenn jemand einen schnellen Hack hat, um dieses Arbeiten zu bekommen, würde es sehr geschätzt werden. Wenn du eine bessere Methode hast, als die, die ich verfolge, wäre das auch hilfreich.

** - EDIT - ** Sollte wahrscheinlich erwähnen, dass Sie die Arbeitsversion hier finden können - (https://googledrive.com/host/0B45QP71QXoR0Mm9Mbkp3WGI1Qkk/) Ich speichere meinen Code in Google Drive aber lokal mit Wamp und Aliasing, was bedeutet, dass alle Änderungen, die ich mache lokal wird online reflektiert, sobald Google Drive synchronisiert. I.E. es kann gebrochen sein, wenn Sie einen Blick darauf werfen.

Answer 1

Dies ist vor here aufgetreten.

Der Trick besteht darin, eine zweite Szene mit einer zweiten Kamera hinzuzufügen, die dieselbe Ausrichtung wie die Originalkamera hat, aber einen bestimmten Abstand vom Ursprung beibehält.

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

EDIT: Aktualisiert Geige: http://jsfiddle.net/aqnL1mx9/

three.js r.69

Answer 2

Mit neuen three.js Versionen (weiß nicht, seit wann) Sie verwenden können:

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

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

Dies ist ein "quick and dirty" Weg, um eine AxisHelper ohne die Schaffung einer zusätzlichen Szene hinzuzufügen.Es funktioniert, indem der Achsenhelfer bei jedem Rendern vor der Kamera bewegt wird.

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