0

I have a Three.js Scene where I have a simple THREE.Mesh I call cube. I want to add a label to cube that always displays above cube (so in the positive y direction, given that y is up).

Therefor, the label should inherit the position of the cube, but not the rotation or scale. I want the label to always be same size relative to the camera I am looking through.

Given that I already have initialized cube, I now create the label:

var label = new THREE.Mesh(geometry, material);
label.position.set(0, 1, 0); // above cube

Then I add the label to the cube to inherit its position:

cube.add(label);

Fair enough. However, when I rotate or scale the cube, the label goes with it relative to the cube.

I would like the label to stay above the cube, remain the same size, ignore both rotation and scale, but inherit position of the cube.

How would I achieve this effect?

gman
  • 100,619
  • 31
  • 269
  • 393
Nicky
  • 3,607
  • 6
  • 33
  • 64
  • 1
    I think that you want is a sprite. http://threejs.org/docs/index.html#Reference/Objects/Sprite – Radio Aug 10 '16 at 22:41
  • @Radio Thank you, that solves part of my problem already. I was not aware of this feature. The label is now indeed always facing the camera. However, ``rotation`` and ``scale`` still affect the ``label``. Any further suggestions? – Nicky Aug 10 '16 at 22:49
  • I recommend then that you use a div. You can convert an object's position to it's screen position. Use the screen position to move your div. See the r.75 (the latest I could find) example here: http://stackoverflow.com/questions/11586527/converting-world-coordinates-to-screen-coordinates-in-three-js-using-projection – Radio Aug 10 '16 at 23:31
  • I forgot about this, see the last answer: http://stackoverflow.com/questions/20396150/three-js-how-to-keep-sprite-text-size-unchanged-when-zooming – Radio Aug 10 '16 at 23:39

0 Answers0