I want Onclick event of threejs on 3d object to display html content(2d annotations) on screen…
Please me out !!!
1.It is to display 2d annotations of 3d object after onclick…
Check this link for example: https://deeajith.github.io/
I didn’t make it clickable so help me out,
In that page there is a bogie I want information of each part of the bogie to be shown in HTML when we click on particular part of it. And also if there is a chance of storing the information on database how can it be done and connected to three js 3d objects.
You can implement a basic 3D interaction with raycasting. This approach is demonstrated in the following official example: three.js webgl - interactive cubes
Instead of mouseMove you have to add an event listener to the click event. In this way, you will find out whether an 3D object was clicked or not. You also get the exact intersection point that can be used to display a HTML based annotation. However, this point is usually in world space and needs to be converted to screen coordinates. The following post might help in this context:
Becoming an advanced three.js dev means you have a good understanding of the library AND computer graphics in general. You can find a lot of useful resources here:
