How to make annotations move with the 3D model

Questions
, ,
1

I am trying to render a 3D model with annotations similar to https://sketchfab.com/3d-models/interactive-test-778258c754a74d37a72d3274b80c6ce1. I have been using https://manu.ninja/webgl-three-js-annotations/ as a reference to get this https://codepen.io/codepen_novide_coder/pen/YzwdxBe . 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(https://threejs.org/examples/?q=css#css2d_label) the way to achieve this ?
Attached code https://codepen.io/codepen_novide_coder/pen/YzwdxBe

2
  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.
2 Likes
3

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

4

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

var parent = new Object3D();
parent.add(sprite);
parent.add(model);
scene.add(parent);
}

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 ?

5

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) ?

6

Sure. Have posted the code here https://codepen.io/codepen_novide_coder/pen/YzwdxBe.

7

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

1 Like
8

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 ?

9

[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.

10

@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 ?

11

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

1 Like
12

https://threejsfundamentals.org/threejs/lessons/threejs-align-html-elements-to-3d.html ?

1 Like
14

@prisoner849 @NicolasRannou Thank you ! Will look into these

15

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.

16

try this