Annotation Text attached to part of 3d model

Hi guys
We are creating a 3d tool in a company.
It contains different capabilities like adding a 3d model , Transforming it , adding textures, etc.
The next one is adding text annotations on each layer of 3d model that the user will select.
but we face some problems : We add annotation text but when we save the position and reload they do not load correctly. Sometimes some annotations have problems with rotation of the 3d model.
What is the best way tto add annotation, attach them to model objects, and don change by changing the camera or model position and rotation and save and reload.

I will be happy if you know any good ways to let me know.


Not sure what you mean by saving and reloading, but CSS2DRenderer should be all you need in this case :eyes:

1 Like

you must pick one of these two classes, css2d or css3d, copy it into your project and rewrite it. out of the box these css annotations can not occlude behind geometry, they are always on top of everything. occlusion would normally require raycasting, which is expensive. there is another way using blending which has zero expense and looks better, but is harder to implement.

if it’s not too late move your project to react-three-fiber which is threejs paired with react, it has a large eco system and stuff like that is basically for free. these annotations do not raycast, they blend, and behave as if they were part of the actual scene.

otherwise you have to implement this from scratch. i think bruno simons threejs journey has a good implementation that could get you started, although it’s raycast based, so performance won’t be optimal.

1 Like

I have to save all 3d models and their data like pos,scale,rotation and all data about annotation texts.
And then when the user login again I have to load thos data again .all of them shoul be editable.
By selecting each model ,a transfor control will enable and user can change pos,scalemrotation of 3d model .I want to change attached annotation text too .At the same time