Three.js Achsenrichtungen

Question

Wenn ich Vektoren in three.js zeichne, merkte ich, dass die Achse irgendwie durcheinander ist. Ich kann damit umgehen, dass Y die vertikale Achse ist, aber sowohl X als auch Z sind "gespiegelt" und ich kann die Objekte sehen wie ich will, nur wenn ich kopfüber gucke. Wie behebe ich das? Ich kann die Kameradarstellung/Objekte drehen, aber ich denke nicht, dass es funktioniert. Ich brauche eine globale X-Z-Repräsentationsänderung.

Das ganze Programm verwendet:

<script src="jquery-2.1.4.js"></script> 
<script src="jquery.blockUI.js"></script> 
<script src="getparam.js"></script>  
<script src="dat.gui.js"></script> 
<script src="three.js"></script> 
<script src="OrbitControls.js"></script> 
<script src="Stats.js"></script> 
<script src="Program.js"></script> 

so bin ich nicht sicher, wo der Code ist.

Das ist die falsche JS Darstellung: Dies ist, wie sollte es

Answer 1

ist Es ist nicht ganz klar, was das Verhalten Sie nach, sondern versucht, einen anderen up-Vektor für die Kamera festlegen. Z.B .:

camera.up(0, 0, 1); 

... vorausgesetzt, Kamera enthält die Kamera, die Sie für die Wiedergabe verwenden, und Sie wollen Z „nach oben“ zu sein. Um zu sehen, wie dieses Verhalten here's a trivial jsfiddle example:

var scene, camera, cube, light; 

init(); 
animate(); 

function init() { 
    var height = 500, 
    width = 500; 
    var bg = '#000000'; 

    scene = new THREE.Scene(); 

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

    camera = new THREE.PerspectiveCamera(50, height/width, 1, 10000); 
    camera.position.set(20, 20, 20); 
    //camera.up = new THREE.Vector3(0, 0, 1); 
    camera.lookAt(axisHelper.position); 
    scene.add(camera); 
    renderer = new THREE.WebGLRenderer({ 
    antialias: true 
    }); 
    renderer.setClearColor(bg); 
    renderer.setSize(width, height); 

    var d = document.createElement('div'); 
    document.body.appendChild(d); 
    d.appendChild(renderer.domElement); 
    var c = document.getElementsByTagName('canvas')[0]; 
    c.style.width = width + 'px'; 
    c.style.height = height + 'px' 
} 

function animate() { 
    requestAnimationFrame(animate); 
    render(); 
} 

function render() { 
    renderer.render(scene, camera); 
} 

Dies macht eine AxisHelper, um die Ausrichtung der Achsen zeigt (x ist rot, grün y ist, z ist blau). Heben Sie die Kommentarzeichen für die Zeile auf, die den Aufwärtsvektor der Kamera festlegt, und führen Sie sie erneut aus, um den Unterschied zu erkennen.