Hello, I am using three fiber drei html element (GitHub - pmndrs/drei: 🌭 useful helpers for react-three-fiber) to add labels to some meshes in a 3D scene. This works fine for a small number of labels, but performance in chrome degrades to (<5 fps) once the number of html elements exceeds around 50. There is no performance issue in firefox.
Is it feasible to have that number of labels in a scene and what way of implementing them would you recommend?
Thanks a lot for your help!
Each label is a new root, like calling ReactDOM.render(…). But still, it just renders once and then the html is in your body tag and then it’s in the browsers hands. If you have interactions, local state and so on in them that could be worse, it just isn’t made for that. Css otherwise is slow and transitioning a high number of divs around is expensive. I would re-think the approach if i needed that many annotations. perhaps use threejs labels, sdf text or something like that.
thanks a lot for your quick reply! I tried sdf text which also had a hard time dealing with a large number of labels and will try threejs labels.