youpilat13 youpilat13 - 1 month ago 18
Javascript Question

Three.js - label on AxisHelper withTextGeometry and rotation issue

I have a main scene with a sphere and another subwindow (in right bottom) where I have drawn the (x,y,z) axis of main scene.

In this subwindow, I would like to draw the labels "X" "Y" and "Z" on each axis (more precisely located on the end of each AxisHelper). I know how to use TextGeometry but the issue is that I can't get to make rotate these labels in order to make them appear always in face on the user.

You can see the problem on the [following link][1] : label "X" is fixed relatively to axis and is rotating with camera, so it is not always in face of user.

From these two links link1 and link2, I tried to add (in my example, I tried with only "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
represents a
PerspectiveCamera
which is the camera of subwindow (i.e
zoomScene
) ;I add TextGeometry to
zoomScene
by doing :

zoomScene.add(meshText1);


Could anyone see what's wrong in my code ? I wonder if I can make rotate the "X" label on itself, i.e the "X" label is rotating like axis but a self (local) orientation is applied as a function of rotation theta angle, so the label is always kept in face of user during camera rotation ?

Thanks for your help.

Answer

You are probably looking for THREE.SPRITE. From the docs:

Object3D -> Sprite: A sprite is a plane in an 3d scene which faces always towards the camera.

Here's a simple example of how to use it:

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

Here's a working example of a similar scenario (3 scaled sprites with different positioning). You can find the code on github.