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 ?
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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 ?
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