How to display an html annotation in the center of the selected geometry in React-Three-Fiber?

Here is another example of annotations which you can refer to.

Example : Annotations

image

In blender, I create some empty’s, with custom properties. They can be positioned anywhere you like, and you can have as many as you want. The custom properties are converted into Drei Html when the model is loaded.


And here’s another example : House
When you press the number 3, the annotation becomes visible.

image
These annotations are dynamically created from a loaded json file.

2 Likes