Looking for animated annotation guidance

I’m very new to this type of development and I am still getting familiar with the vocabulary and all.

Right now I have a model of a room with various objects placed about that are animated.

What I would like to achieve is when the user clicks on some schematics on a table, a blue print unfurls above them and the text with details and what not is written into the blue print as the user watches.

My questions are:

Would this entire visual effect be another animated model that is imported and is triggered by an on click event?

How much of the desired result is possible with just javascript and css?

A good starting point would be to check through the other discussion on annotations on this forum:

Also see this examples for how to add simple HTML labels to a 3d model:

1 Like

a lot is possible with html+js+css on top of the scene, and that’s a great escape hatch in general, but unfortunately keeping css2d in sync (with your app state) can get nasty and these annotations can’t just “hide” behind geometry and if you wanted that it will add a lot of code and complexity. so this is most definitively feasible, but it won’t be something you just choose to deploy, it will be a weekend project.

in the off chance that you can combine threejs with react, people have abstracted it and these things could not be less trivial. adding an annotation is not even an after-thought, you just do it if you need one.

These examples from the Collection of examples from discourse.threejs.org could possibly help.


eXtended eXamples => AnnotationsMoveWithModel - @author novice_coder/prisoner849

see also How to realize animation hotspot

Yes that sky dome one where there’s a pop up asking you if you want to leave is the same concept of what I’m seeking (click and pop up)

My question though is to make it more
Visually appealing with a custom model (like a blueprint) would it be as easy as just removing the models transparency on click and starting the animation? Then when lost focus just reapply the transparency so as to hide it?