How to make annotations move with the 3D model

I am trying to render a 3D model with annotations similar to I have been using as a reference to get this . I can see the annotations on the model but as i move the model around, the annotation seems to be fixed . I understand that since i use scene.add(sprite) , the annotation is bound to the scene as opposed to the model. My question here is how do i ensure that the annotation moves with the model? Is css2d( the way to achieve this ?
Attached code

  1. Yes. That’s probably the easiest way.
  2. If you don’t want to use CSS2D, you can place annotations and the model in a Group, and the transform this group instead of the model.

Also, maybe this topic will be helpful: HTML on different faces of cube

I did read up on scene graph and implemented something like this

var parent = new Object3D();

Is this what you mean by transform the group instead of the model?
I tried the above and still dont see the desired result. Am i doing this incorrectly or is there an article you can point me to for a better reference ?

I don’t know any articles, sorry. Can you share the code that is actually rotating the model (or a jsfiddle example, that may also help) ?

Sure. Have posted the code here

Set the same vector for position of the sprite and for annotation (0, 0, 10 - for example):

1 Like

Thank you @prisoner849 . I tried changing the annotation and the sprite position to (0, -2, 0) so that the annotation is on the model and i tried rotating it and it seems like the model and annotation are not rotating together. Does this seem so because i am not hiding the annotation while rotating ?

[0, -2, 0]?
Movement will be noticeable only when you move the camera up and down. As the annotation and sprite are aligned along Y-axis.

@prisoner849 I think i understand that . My end goal is to have the annotations on different parts of the model and having the ability to click on the annotations. I used (0,-2,0) over (0,0,10) as it seems like the annotation is on the model. Am i missing something here ?

@novice_coder Have a look at this post: HTML on different faces of cube and its jsfiddle (it uses CSS2Renderer).

1 Like ?

1 Like

@prisoner849 @NicolasRannou Thank you ! Will look into these

Hi, I am also working on similar project and a newbie in threejs. I have to add multiple annotations on a 3D model (gltf model), but I am not able to get that with multiple annotations. Could you please help me with the same.