3D Animation with PopUps

Questions
, , ,
1

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)

2

Yep.

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

Well, you didn’t ask any specific question with which we could help - but maybe this demo can put you on a right track regarding pop-ups over 3D models :thinking: ?

3

/сс

4

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

5

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

6

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

7

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

8

that is the house I am using

9

that is the house I am using

10

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