How can we put information buttons on the model using three js?

In the three js examples, I saw the Lamborghini website and there are information buttons placed on the car. How can we put these buttons? I’ve seen posts about it not being possible to put a clipPath that will interactively overlay the model in the model-viewer. I want to do a study on this subject, how can I do it?

Please share a link to the website you are referring to.

Lamborghini Huracán STO 2020 website

One possible but naïve approach is to use HTML labels: get the 3D position where you want to show the label, then calculate the screen position and put the label there. The disadvantage is that the label will stay on top of the model. A better approach is to use CSS renderer. You may also use sprites with custom textures in them.

Here is a simple example of the naïve approach with labels that automatically pop-in or pop-out. This is far from a good demo, but can server as illustration. Good luck with your project.

https://codepen.io/boytchev/full/PoXrVVz

image

1 Like