Hello guys, I am learning 3js by recreating some pages that I found really nice.
One of this site’s is this…
I created mountains but what I can’t make is this snow-fog which is always visible in bottom of the mountains. How to make it fog like this so it looks realistic, and how to make it like it is always stuck in bottom of the mountains like on mont-ford page, so when user scrolls back it is always visible.
What is best way to do it?
I pasted code in codepen so you can just see idea of what I have made, and I will paste vercel…
Hey! I don’t think that’s fog. It looks more like a cloud made with point particle shaders.
You could achieve a similar effect using smoke or cloud sprite textures, or go lighter with low-res textures combined with more fragment shader work.
Okay, if you’re following the Three.js Journey course, imho would be not to rush, you’ll learn more about shaders and particles from a very solid source as you go.
After that, you can look into volumetric cloud particle tutorials for more advanced stuff.
Here’s a good explanation of the logic behind it:
I think you expect a .smoke div to simulate smoke (red). It uses css, absolutely positioned at 50% bottom. Yes, you could use forced-perspective properly for a simple project. Or in the case of 360° video or image sequences. But it requires careful alignment/synchronization and mastery of the related technical APIs. This effect likely doesn’t justify this approach, unless provided by requirements… or just experimentation.
Instead, this reference uses forced perspective with… layered materials (on geometry), a sprite emitter (from ground plane), and linear fog (to affect contrast). Whatever snow “sticks to the ground” is one of the aforementioned 3 principles. If your project complexity is radically greater or less, you may employ alternate strategies: 360° video, parallax image sequences, a generative terrain simulation, nanite LOD voxels…?
Since I am in the office at work, I regret further correspondence must be coordinated with a degree of taste.