Website with interactive 3d background

Hi all,
Kindly check the below link, In this website, you can see a 3d scene at background. and normal html at front, how can we do this, how the interaction on the normal html div passing through the background. and what is the effect like small small particle or fog with the 3d model at background

Thanks in advance.

1 Like

You may try to have a look at the source code. It is made with Three.js so shouldn’t be a problem to make it with Babylon.js.

1 Like

Check out this recent thread:
Website with Babylon animation on scroll - Demos and projects - Babylon.js (babylonjs.com)

1 Like

Thanks for your reply @labris and @brianzinn . I am trying out this. I want to know, there is some effect like fog (small particles) with that model. What is that, how to get it?

and @brianzinn . Any source code for the thread you have shared?

1 Like

That’s a new thread and OP has already shared some code (plus it’s available on the website). Kindly ask there and hopefully your will get the answers you are looking for. Typically we try to share a playground/codepen/repo as that makes it easier to help with examples and clearer what we are trying to accomplish or where we got stuck. :smile:

1 Like

It looks like a vignette post process, but I didn’t check the code. There is an example PG in the docs:

2 Likes

Vignette effect makes a dark corner only, It won’t create that small small particles or smoky effect. @brianzinn . Check this website too.

Is this of help Environment | Babylon.js Documentation ?

1 Like

I believe the smoke comes from texture. like this:

You can turn the grain effect on and off with pipeline.

2 Likes

Wow, thanks for your help through PG . How this smoke is working?

It’s called a particle system. You can create your particle system. Like this:

You can learn from doc:

And Deltakosh’s video lessons: