Three.js - etichetta su AxisHelper withTextGeometry e problema di rotazione

Question

Ho una scena principale con una sfera e un'altra sottofinestra (in basso a destra) dove ho disegnato l'asse (x, y, z) della scena principale.

In questa sottofinestra, desidero disegnare le etichette "X" "Y" e "Z" su ciascun asse (più precisamente alla fine di ciascun AxisHelper). So come usare TextGeometry ma il problema è che non riesco a far ruotare queste etichette per farle apparire sempre in faccia all'utente.

È possibile visualizzare il problema sul [collegamento seguente] [1]: l'etichetta "X" è fissa relativamente all'asse e ruota con la fotocamera, quindi non è sempre di fronte all'utente.

Da questi due link link1 e link2, ho cercato di aggiungere (nel mio esempio, ho provato con unica etichetta "X"):

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 rappresenta un PerspectiveCamera che è la telecamera di sottofinestra (ie zoomScene); aggiungo TextGeometry a zoomScene facendo:

zoomScene.add(meshText1); 

qualcuno potrebbe vedere che cosa c'è di sbagliato nel mio codice? Mi chiedo se posso fare ruotare l'etichetta "X" su se stessa, cioè l'etichetta "X" ruota come un asse ma un orientamento auto (locale) è applicato in funzione dell'angolo di rotazione theta, quindi l'etichetta è sempre tenuta in faccia dell'utente durante la rotazione della fotocamera?

Grazie per il vostro aiuto.

Answer 1

Probabilmente stai cercando THREE.SPRITE. Da the docs:

Object3D->Sprite: Uno sprite è un piano in una scena 3d che è sempre rivolta verso la telecamera.

Ecco un semplice esempio di come usarlo:

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

Ecco un working example di uno scenario simile (3 sprite scalate con diverso posizionamento). È possibile trovare il codice su github.