15

I've added some text to my scene with THREE.TextGeometry, and the text seems to be stuck in whichever xy plane I place it. Any way to have it adjust to always be in plane with the screen- readable for the user?

2 Answers 2

26

Try

mesh.lookAt( camera.position );

The local z-axis of the mesh should then point toward the camera.

9
  • cool this adjusts it, now how do i get it to update as i move the camera around? Oct 16, 2012 at 17:53
  • If you have a render() function, place it in there, after any changes to the camera position. Oct 16, 2012 at 18:07
  • hmm, getting closer, but now it stays fixed on the screen instead of moving around with the rest of the scene Oct 16, 2012 at 18:20
  • 3
    @user1750723 You should be using HTML and CSS for that kind of stuff.
    – mrdoob
    Oct 16, 2012 at 23:52
  • 1
    @mrdoob i know text has always been a bit tough in three.js but, it's still the case that using HTML and CSS only works for overlaying on top of a scene where you don't need to worry about occlusion, or care if the text is at a certain place in z depth, right?
    – sands
    Feb 22, 2018 at 18:08
13

To make the text always face the screen (rather than the camera):

mesh.quaternion.copy(camera.quaternion);

Note that this differs from object.lookAt(camera); since this will result in different orientation depending on where on the screen the object is located. Object3D.onBeforeRender can be used to update the orientation on each frame. It might be useful to disable frustum culling using Object3D.frustumCulled = false; to ensure that the callback always is triggered.

2
  • three.js is quaternion-based. So mesh.quaternion.copy( camera.quaternion ); is preferable. Aug 14, 2017 at 17:06
  • @WestLangley: changed to quaternion.
    – larsmoa
    Aug 14, 2017 at 19:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.