1

How to create a tooltip when I hover on Three.js elements (i.e sphere).

I have a 3D scatter-plot, each time I mouse-over on the spheres in the scatter plot I want a tooltip to popup.

How can I make this tooltip in pure WebGL?

How to make it with DOM?

trusktr
  • 44,284
  • 53
  • 191
  • 263
Deeksha Mulgaonkar
  • 453
  • 6
  • 20

2 Answers2

1

What you are looking for is called "raycasting" and you'll find some more information in the documentation and the examples.

With raycasting you will get the information which object is currently under the mouse-cursor. Based on that, you can fill data into the tooltip and position it using the mouse-position (alternatively, use something like this to compute the screen-position of the 3d-object and position the tooltip there).

Martin Schuhfuß
  • 6,814
  • 1
  • 36
  • 44
1

I started with Martin Schuhfuß's answer as the foundation for this answer:

Making it with DOM:

What you are looking for is called "raycasting" and you'll find some more information in the documentation and the examples.

With raycasting you will get the information which object is currently under the mouse-cursor. Based on that, you can fill data into the tooltip and position it using the mouse-position.

Alternatively, ese something like this to compute the screen-position of the 3d-object and position the DOM tooltip there in screen space coordinates.

Making the tooltips with DOM is the easiest way, but the downside is that you don't get the benefits of WebGL rendering if you want to do things like add shine, shadow, bump maps, etc, to your tooltips.

Making it with WebGL is more complicated:

Use something like this to compute the screen-position of the 3d-object and position the tooltip there in screen space coordinates.

Then, use you need to figure out how to orient content relative to your Three.js camera so that the size and position of the items is in screen space. For that, see these Three.js forum posts:

Once you figure out how to draw in screen space in Three.js, then you can use the techniques mentioned in the previous Making it with DOM section to determine where in screen space you want to draw the WebGL tooltips.

To draw the WebGL tooltips, you have some options:

  • Draw the elements all in the same scene. You may want to adjust the renderOrder of the objects, so that UI stuff always renders on top. See three.js: how to control rendering order
  • Draw the elements onto a quad (PlaneGeometry) as a texture (you will need to learn about render targets for this), then use the aforementioned renderOrder technique (or similar, see the previous bullet point's link) to make sure that this quad renders on top of everything.
    • Alternatively, render the quad on top of the scene using a post-processing effect to ensure that it always renders on top without messing with the original scene's render orders. For this you'll need to learn about post processing.
  • Render the screen-space WebGL stuff into a second Thee.js Scene to a second canvas, then simply place the second canvas on top of the first using DOM techniques. This will also ensure that the UI stuff doesn't interfere with render orders of the first scene, but this approach may use the most resources.

The first of the three possibilities may be fastest, but most difficult. THe last of the three possibilities may be easiest, but slowest (but maybe it doesn't matter in your case depending on what you are trying to draw).

I didn't list all the possible options. There are other ways to do it too! Someone feel free to edit this to add more possible ways or more details.

Feel free to ask any more questions too, then maybe I can expand the answer.

trusktr
  • 44,284
  • 53
  • 191
  • 263