Tag on 3D character or model

Questions
,
1

Hello, I am new to three js and I am trying to create a simple project using the library. So in my project, I want to

  1. load the 3D model to the scene
  2. then if a cursor hovers over the model, a text or tag shows basic information on the model then if the cursor does not hover over the model, the tag won’t be displayed. For example, if I have a character and I hovered my mouse over the character a tag would display or show the character name, age, id, etc.
    If anyone has any advice on how to start number 2, that would be really awesome or have an example for it, I would appreciate it if you could share it with me.
2

This simple example is a good start for implementing the interaction: three.js webgl - interactive cubes

Instead of changing the color of the cubes, you have to show/hide the mentioned label/tag. Consider to implement the label with HTML/CSS (the CSS renderers might be helpful) or by using a textured sprite.

1 Like
3

thank you so much for the example.

4

Do you have any suggestions on how to show/hide the label or tag? I got it working but I don’t know how to hide it (if the cursor is not in contact with the object).