How to display points with information on 3D models using WebGL?

Question

JavaScript

Are there any free engines like three.js or is it possible to add points to the displayed 3D model, by clicking on which the information added to it will be displayed. An example of the required functionality has sketchfab.com - model

and site 3d.si.edu - model

Smithsonian sources are closed.
How else can the required functionality be implemented in a similar way and are there any ready-made solutions?
PS> The ability to embed sketchfab in your own project is not suitable.
Upd1: after loading the model, the user should be able to add the required number of points with a description.

Answer 1

The scheme is something like this
Raycasting (intersection of the ray and the model) - allows you to find the nearest (sometimes all) points of the model where the ray crossed it. Iterates over the faces of the model (usually triangles) and essentially reduces to the task of crossing a ray and a triangle whose legs grow to the intersection with the plane.
The math of the question is described here: www.ray-tracing.ru
Usually, a ray is fired by mouse click, the coordinates of which the browser gives relative to window (by the way, we need it relative to the canvas, hehe hehe). Then we translate the click coordinates from pixels into relative ones (from -1 to 1), get a 3D vector by adding 1 along the z axis, then multiply by the inverse of the product of the projection and camera matrices, so we get the direction vector in world coordinates and already make raycating from it.
Do not forget that the coordinates are often obtained in world coordinates and it is desirable to translate them into local ones, although the tasks are different.
For the model, control points must be specified in so-called local coordinates, that is, relative to the model. To convert them to screen, you need to carry out the following order of calculations.
projection matrix * model transformation matrix * point coordinates
In some cases, the order of the matrices may change, for example, a camera matrix, animations, and some other transformations can be added. By the way, in various engines (for example, three.js) there are ready-made tools for such calculations (but here is the documentation to help you)
As a result, we get coordinates from -1 to 1 and all that remains is to understand where they are on the canvas
(v * 0.5 + 0.5 ) * canvaSize
if it's not clear then it means
(vx * 0.5 + 0.5) * c.width
(vy * 0.5 + 0.5) * c.height
Now that there are coordinates, all that's left is to draw what you need there and that's it =)

Answer 2

It is easier to do such things with ordinary "floating" blocks. This is how I actually did the signatures: we learn the 2D coordinates on the screen from webGL, then we draw a floating block there.

Answer 3

blend4web has a great tool called anchors. Right in the blender you create an Empty object, sign as you need and you're done. As an example, they have a demo with a planetarium https://www.blend4web.com/ru/demo/planetarium/