# Looking for animated annotation guidance

**URL:** <https://discourse.threejs.org/t/looking-for-animated-annotation-guidance/30213>\
**Category:** Questions\
**Tags:** annotations, animation\
**Created:** [September 24, 2021, 1:31am UTC](https://discourse.threejs.org/t/looking-for-animated-annotation-guidance/30213 "2021-09-24T01:31:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alex.bristow3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alex.bristow3/32/15094_2.png) [@alex.bristow3](https://discourse.threejs.org/u/alex.bristow3)\
**Post date:** [September 24, 2021, 1:31am UTC](https://discourse.threejs.org/t/looking-for-animated-annotation-guidance/30213/1 "2021-09-24T01:31:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [September 24, 2021, 4:05am UTC](https://discourse.threejs.org/t/looking-for-animated-annotation-guidance/30213/2 "2021-09-24T04:05:05Z")

</div>

A good starting point would be to check through the other discussion on annotations on this forum:  
[https://discourse.threejs.org/tag/annotations](https://discourse.threejs.org/tag/annotations)

Also see this examples for how to add simple HTML labels to a 3d model:  
[https://threejs.org/examples/?q=css#css2d\_label](https://threejs.org/examples/?q=css#css2d_label)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 24, 2021, 6:52am UTC](https://discourse.threejs.org/t/looking-for-animated-annotation-guidance/30213/3 "2021-09-24T06:52:21Z")

</div>

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.

- functional html view put onto a 3d surface w/ occlusion: [Mixing HTML and WebGL w/ occlusion - CodeSandbox](https://codesandbox.io/s/mixing-html-and-webgl-w-occlusion-9keg6)
- animated occlusion: [HTML Markers - CodeSandbox](https://codesandbox.io/s/html-markers-6oei7)
- html controls on 3d models: [Mixing HTML and Webgl - CodeSandbox](https://codesandbox.io/s/mixing-html-and-webgl-7ucso)
- clicking things with unfolding pop-ups (which is what you seek i guess): [Sky dome with annotations - CodeSandbox](https://codesandbox.io/s/sky-dome-with-annotations-wbrfs)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [September 24, 2021, 6:58am UTC](https://discourse.threejs.org/t/looking-for-animated-annotation-guidance/30213/4 "2021-09-24T06:58:06Z")

</div>

These examples from the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315) could possibly help.

[SetRemoveMarkers](https://hofk.de/main/discourse.threejs/2018/SetRemoveMarkers/SetRemoveMarkers.html)  
[connectMeshSprite](https://hofk.de/main/discourse.threejs/2018/connectMeshSprite/connectMeshSprite.html)  
[LabelsOnSphere](https://hofk.de/main/discourse.threejs/2018/LabelsOnSphere/LabelsOnSphere.html)  
[GradientsMaterialColor](https://hofk.de/main/discourse.threejs/2020/GradientsMaterialColor/GradientsMaterialColor.html)  
[ContextMenu](https://hofk.de/main/discourse.threejs/2020/ContextMenu/ContextMenu.html)

[eXtended eXamples](https://hofk.de/main/discourse.threejs/2020/Xindex2020.html) =\> AnnotationsMoveWithModel - @author novice\_coder/prisoner849

see also [How to realize animation hotspot](https://discourse.threejs.org/t/how-to-realize-animation-hotspot/13989)

---

<div class="post-metadata">

**Author:** ![alex.bristow3](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alex.bristow3/32/15094_2.png) [@alex.bristow3](https://discourse.threejs.org/u/alex.bristow3)\
**Post date:** [September 24, 2021, 11:11am UTC](https://discourse.threejs.org/t/looking-for-animated-annotation-guidance/30213/5 "2021-09-24T11:11:42Z")

</div>

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?