2012-07-12 9 views
7

L'obiettivo è visualizzare il nome Three.Mesh come un'etichetta mentre si passa il mouse sopra la mesh. Come possiamo farlo in Three.jscome aggiungere Label a THREE.Mesh?

Qualcuno può fornire un codice di esempio?

+0

Si sta tentando di rendere realtà il testo come parte della scena? Deve essere un testo 3D? Oppure sovrapporrà la marcatura 2D sopra il renderer con CSS ok? Inoltre, potresti voler accettare alcune risposte precedenti o non molte saranno inclini ad aiutarti. –

+0

ho solo bisogno dell'etichetta per essere proprio come una punta di strumento. Sarebbe meglio avere l'etichetta quando il passaggio del mouse si ferma/si ferma su una mesh. Un markup 2D sovrapposto sopra il renderer con CSS dovrebbe essere ok. Per favore, fammi sapere quali delle mie domande/risposte non sono accettate. Ho appena guardato e spero che nessuno rimanga non accettato. Ho visto tali etichette nell'API XTK.js –

risposta

27

Sfida accettata!

Lavorare esempio di codice a: http://stemkoski.github.com/Three.js/Mouse-Tooltip.html

Ci sembrano essere tre grandi passi per questo obiettivo, ognuno dei quali mi sono suddivisi in programmi di esempio più piccoli.

(1) Determina su quale elemento di scena viene puntato il mouse. Vedi: http://stemkoski.github.com/Three.js/Mouse-Over.html

(2) Rendere il testo che si desidera visualizzare come immagine (ho usato un elemento canvas per questo). Vedere: http://stemkoski.github.com/Three.js/Texture-From-Canvas.html

(3) Disegnare uno sprite contenente l'immagine dalla parte (2) nella posizione del puntatore del mouse. See: http://stemkoski.github.com/Three.js/Mouse-Sprite.html

Tutti questi esempi (e più) sono parte della mia crescente collezione di esempi introduttivi (con commenti dettagliati) a http://stemkoski.github.com/Three.js/, in cui sto cercando di mostrare le possibilità di Three.js in una serie di minimo esempi.

Inoltre, il credito dove è dovuto: parti (1) e (3) si basano su alcuni degli esempi di MrDoob sulla sua pagina GitHub, in particolare il interattivo cubetti esempio: http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html

+1

Grazie mille Lee Stemkoshi. I tuoi esempi sono fantastici e davvero utili. –

+1

@lee C'è un modo con l'ultima versione ... Ho avvertimenti ed errori con la versione attuale ... è V71 –

+2

C'è una soluzione più semplice a questo ora? Esempio se hai delle skin skinedmeshes sulla scena e vuoi visualizzare i nomi sopra ogni mesh? Il problema con gli sprite ora è scalabile dentro e fuori a seconda dello zoom. Voglio che rimanga lo stesso. Dovrebbe solo seguire la maglia intorno (rimanere sulla testa). – majidarif