cómo agregar la etiqueta a THREE.Mesh?

Question

El objetivo es mostrar el nombre Three.Mesh como una etiqueta al pasar el mouse sobre la malla. Cómo podemos hacer esto en Three.js

¿Alguien puede dar un código de muestra?

Answer 1

¡Desafío aceptado!

Trabajando ejemplo de código en: http://stemkoski.github.com/Three.js/Mouse-Tooltip.html

Parece que hay tres pasos principales para este objetivo, cada uno de los cuales he roto en pequeños programas de ejemplo.

(1) Determine a qué elemento de escena apunta el mouse. Ver: http://stemkoski.github.com/Three.js/Mouse-Over.html

(2) Renderizar el texto que desea visualizar como imagen (utilicé un elemento canvas para esto). Ver: http://stemkoski.github.com/Three.js/Texture-From-Canvas.html

(3) Dibuje un sprite que contenga la imagen de la parte (2) en la ubicación del puntero del mouse. Ver: http://stemkoski.github.com/Three.js/Mouse-Sprite.html

Todos estos ejemplos (y más) son parte de mi creciente colección de ejemplos introductorios (con comentarios detallados) en http://stemkoski.github.com/Three.js/, en el que estoy tratando de mostrar las posibilidades de Three.js en una serie de mínimos ejemplos.

Además, el crédito donde es debido: piezas (1) y (3) se basan en algunos de los ejemplos de MrDoob en su página de GitHub, específicamente los cubos ejemplo interactivo: http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html