# 3D Animation with PopUps

**URL:** <https://discourse.threejs.org/t/3d-animation-with-popups/22286>\
**Category:** Questions\
**Tags:** 3d-applications, javascript, animation, threejs\
**Created:** [January 10, 2021, 8:40pm UTC](https://discourse.threejs.org/t/3d-animation-with-popups/22286 "2021-01-10T20:40:27Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![wod1234](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wod1234/32/15532_2.png) [@wod1234](https://discourse.threejs.org/u/wod1234)\
**Post date:** [January 10, 2021, 8:40pm UTC](https://discourse.threejs.org/t/3d-animation-with-popups/22286/1 "2021-01-10T20:40:28Z")

</div>

I have a small issue and I really do not know how to solve it in a easy way.

I would like to develop a 3D animated Hous using javascript. I would like to move the house in 360 degrees, but without seeing the bottom ground. Additionally, there should appear some Pop Ups. For example, if you move the mouse over a window or the roof, there should appear a message popup, describing the window(or the roof). Its possible to develop it in a easy way ?

Please help

(I already developed a small 3D House which is moving by it self and i used a scene.gltf file)

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 10, 2021, 9:08pm UTC](https://discourse.threejs.org/t/3d-animation-with-popups/22286/2 "2021-01-10T21:08:04Z")

</div>

> [@wod1234](#):
>
> Its possible to develop it

Yep.

> [@wod1234](#):
>
> in a easy way

Depends on how fast you learn and how creative you are.

> [@wod1234](#):
>
> Please help

Well, you didn’t ask any specific question with which we could help - but maybe [this demo](https://threejs.org/examples/?q=css#css2d_label) can put you on a right track regarding pop-ups over 3D models 🤔 ?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 10, 2021, 9:13pm UTC](https://discourse.threejs.org/t/3d-animation-with-popups/22286/3 "2021-01-10T21:13:12Z")

</div>

/сс

> <https://stackoverflow.com/questions/65652503/3d-animation-with-pop-ups>

---

<div class="post-metadata">

**Author:** ![wod1234](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wod1234/32/15532_2.png) [@wod1234](https://discourse.threejs.org/u/wod1234)\
**Post date:** [January 10, 2021, 9:16pm UTC](https://discourse.threejs.org/t/3d-animation-with-popups/22286/4 "2021-01-10T21:16:06Z")

</div>

Oh plase help me  
I already developed a house which you can move with three.js (I Used a gltf. file I did not construct a house from scratch). Now I would like to integrate some mouseovers. For example if you move the mouse over a window or the roof, there should appear a message popup, describing the window(or the roof).  
My only Idea is doing that by defining the position of the mouse and making a pop up on the right position. But I need a function which always finds the right position

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 10, 2021, 9:19pm UTC](https://discourse.threejs.org/t/3d-animation-with-popups/22286/5 "2021-01-10T21:19:56Z")

</div>

[This demo](https://threejs.org/examples/?q=interac#webgl_interactive_cubes) shows how to do interactions (ie. mouse hover / clicks events on 3D models.) (source code)

As for pop-ups - I linked a CSS2D demo for you above. It should be enough for the pop-ups you mention (moreover, if you use CSS `:hover`, you can skip raycasting all along and just work with CSS opacity.)

---

<div class="post-metadata">

**Author:** ![wod1234](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wod1234/32/15532_2.png) [@wod1234](https://discourse.threejs.org/u/wod1234)\
**Post date:** [January 10, 2021, 9:22pm UTC](https://discourse.threejs.org/t/3d-animation-with-popups/22286/6 "2021-01-10T21:22:09Z")

</div>

thx  
The key point is, I do not know, hot to target specific areas of the house, because I used an existing housescene.gltf

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 10, 2021, 9:23pm UTC](https://discourse.threejs.org/t/3d-animation-with-popups/22286/7 "2021-01-10T21:23:28Z")

</div>

You can try to use Blender to assign id / names to specific elements on the model (or just use existing ids on the model.)

---

<div class="post-metadata">

**Author:** ![wod1234](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wod1234/32/15532_2.png) [@wod1234](https://discourse.threejs.org/u/wod1234)\
**Post date:** [January 10, 2021, 9:25pm UTC](https://discourse.threejs.org/t/3d-animation-with-popups/22286/8 "2021-01-10T21:25:48Z")

</div>

> [@mjurczyk](#):
>
> CSS opacity

that is the house I am using

---

<div class="post-metadata">

**Author:** ![wod1234](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wod1234/32/15532_2.png) [@wod1234](https://discourse.threejs.org/u/wod1234)\
**Post date:** [January 10, 2021, 9:27pm UTC](https://discourse.threejs.org/t/3d-animation-with-popups/22286/9 "2021-01-10T21:27:00Z")

</div>

https://sketchfab.com/models/20ea8edb2b7043b1a98a0b6ae18684bb/embed?

that is the house I am using

---

<div class="post-metadata">

**Author:** ![wod1234](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wod1234/32/15532_2.png) [@wod1234](https://discourse.threejs.org/u/wod1234)\
**Post date:** [January 10, 2021, 9:28pm UTC](https://discourse.threejs.org/t/3d-animation-with-popups/22286/10 "2021-01-10T21:28:25Z")

</div>

where do I find existing IDs and how do I target them?