Three.js - Label auf AxisHelper withTextGeometry und Rotationsproblem

Question

Ich habe eine Hauptszene mit einer Kugel und einem anderen Unterfenster (unten rechts), wo ich die (x, y, z) Achse der Hauptszene gezeichnet habe.

In diesem Unterfenster möchte ich die Bezeichnungen "X", "Y" und "Z" auf jeder Achse (genauer gesagt am Ende jedes AxisHelper) zeichnen. Ich weiß, wie man TextGeometry benutzt, aber das Problem ist, dass ich diese Labels nicht rotieren lassen kann, damit sie immer im Gesicht des Benutzers erscheinen.

Sie können das Problem auf dem [folgenden Link] [1] sehen: Label "X" ist relativ zur Achse fixiert und dreht sich mit der Kamera, so dass es nicht immer vor dem Benutzer ist.

Aus diesen beiden Links link1 und link2 habe ich versucht, hinzuzufügen (in meinem Beispiel habe ich versucht, mit nur "X" label):

function addLabelAxes() { 

    // Axes label 
    var loader = new THREE.FontLoader(); 
    loader.load('js/helvetiker_regular.typeface.js', function (font) { 

    var textGeo1 = new THREE.TextGeometry('X', { 
     font: font, 
     size: 5, 
     height: 0.1, 
     bevelThickness: 0.1, 
     bevelSize: 0.1, 
     bevelEnabled: true, 
    }); 

    var color = new THREE.Color(); 
    color.setRGB(255, 255, 255); 
    textMaterial = new THREE.MeshBasicMaterial({ color: color }); 
    var meshText1 = new THREE.Mesh(textGeo1, textMaterial); 

    // Position of axes extremities 
    var positionEndAxes = axes2.geometry.attributes.position; 

    var label1X = positionEndAxes.getX(0); 
    meshText1.position.x = label1X + axisLength; 
    meshText1.position.y = 0; 
    meshText1.position.z = 0; 

    // Rotation of "X" label 
    //meshText1.rotation = zoomCamera.rotation; 
    meshText1.lookAt(zoomCamera.position); 

    // Add meshText to zoomScene 
    zoomScene.add(meshText1); 

    }); 

} 

zoomCamera ein PerspectiveCamera darstellt, die die Kamera von Subwindow ist (dh zoomScene), füge ich hinzu TextGeometry zu zoomScene by doing:

zoomScene.add(meshText1); 

Könnte jemand sehen, was in meinem Code falsch? Ich frage mich, ob ich das "X" -Label auf sich selbst drehen lassen kann, dh das "X" -Label dreht sich wie eine Achse, aber eine selbst (lokale) Ausrichtung wird als Funktion des Theta-Winkels angewendet, so dass das Etikett immer im Gesicht gehalten wird Benutzer während der Kamerarotation?

Danke für Ihre Hilfe.

Answer 1

Sie suchen wahrscheinlich nach THREE.SPRITE. Von the docs:

Object3D->Sprite: Ein Sprite ist eine Ebene, in einer 3D-Szene, die immer in Richtung der Kamera zugewandt ist.

Hier ist ein einfaches Beispiel dafür, wie man es benutzt:

var map = new THREE.TextureLoader().load("sprite.png"); 
var material = new THREE.SpriteMaterial({ map: map, color: 0xffffff, fog: true }); 
var sprite = new THREE.Sprite(material); 
scene.add(sprite); 

Hier ist ein working example ein ähnliches Szenario (3 skaliert Sprites mit unterschiedlicher Positionierung). Sie finden den Code unter github.