javascript - how to add Label to a THREE.Mesh?

Question

The objective is to display the Three.Mesh name as a label while hovering the mouse over the mesh. How we can do this in Three.js

Can someone give a sample code ?

Answer 1

Challenge accepted!

Working code example at: http://stemkoski.github.com/Three.js/Mouse-Tooltip.html

There appear to be three major steps to this goal, each of which I have broken into smaller example programs.

(1) Determine which scene element the mouse is pointed over. See: http://stemkoski.github.com/Three.js/Mouse-Over.html

(2) Render the text you want to display as an image (I used a canvas element for this). See: http://stemkoski.github.com/Three.js/Texture-From-Canvas.html

(3) Draw a sprite containing the image from part (2) at the location of the mouse pointer. See: http://stemkoski.github.com/Three.js/Mouse-Sprite.html

All these examples (and more) are part of my growing collection of introductory examples (with detailed comments) at http://stemkoski.github.com/Three.js/ , in which I am trying to showcase the possibilities of Three.js in a series of minimal examples.

Also, credit where it's due: parts (1) and (3) are based on some of MrDoob's examples on his github page, specifically the interactive cubes example: http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html