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 …

[image] novice_coder: Is css2d( three.js examples ) the way to achieve this Yes. That’s probably the easiest way. 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(); 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 inc…

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

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

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

How to make annotations move with the 3D model

Questions

novice_coder July 25, 2020, 8:38pm 6

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

Topic		Replies	Views
Making annotations move with 3d model Discussion javascript , threejs	0	548	March 17, 2021
Annotation Text attached to part of 3d model Questions geometry , mesh , text , scene , labels , annotations , scenechildren , save	3	1949	January 14, 2024
How can I add annotations to different mesh parts or textures and shift the camera focus to them when clicked? Questions textures	6	315	May 12, 2025
Help with sketchfab like annotations Questions labels , annotations , hotspots	4	1668	July 24, 2020
Make the annotation follow the sprite Questions labels , annotations , hotspots	0	936	February 24, 2020

How to make annotations move with the 3D model

Related topics