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
Try
mesh.lookAt( camera.position );
The local z-axis of the mesh should then point toward the camera.
-
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.– mrdoobOct 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?– sandsFeb 22, 2018 at 18:08
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.
-
three.js is quaternion-based. So
mesh.quaternion.copy( camera.quaternion );
is preferable. Aug 14, 2017 at 17:06 -