Three.js - label on AxisHelper withTextGeometry and rotation issue

Question

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.

Use THREE.Sprite. See stackoverflow.com/a/35433819/1461008 — WestLangley

Dan Mindru Dan Mindru · Accepted Answer · 2016-10-23T01:58:13

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.

Three.js - label on AxisHelper withTextGeometry and rotation issue

1 Answers