Threejs mountain
- 7 Devlogs
- 50 Total hours
An interactive 3D mountain landscape built with Three.js and React Three Fiber, rendered through the WebGPU renderer using TSL for custom materials and shaders.
An interactive 3D mountain landscape built with Three.js and React Three Fiber, rendered through the WebGPU renderer using TSL for custom materials and shaders.
last day was a grind, added the dynamic background transitions so the sky changes between chapters, did parallax for some depth (this little touch makes it feel so much more alive), and added the nav buttons so u can actually jump between scenes instead of just scrolling.
new scene!! the ocean one with the island. this was probably the most fun so far. made an ocean wrapping around the island, added foam near the shore and scattered some rocks around so it doesnt look empty.
improved the water movement too, reused some stuff from the lake which saved me. coastal mountains in the back tie it together. starting to feel like a real place which is sick
added a LAKE today. the meadow scene needed water and omg the reflections were a nightmare. like genuinely the water looked like cursed plastic for hours before i got it looking semi decent.
stuff i did:
added the lake
water reflections + surface (the pain)
blended the terrain around the shore so it doesnt just clip into the water
threw in some fog for depth, instantly made it look 10x better honestly
fog is so underrated it hides all my sins
2 of the 4 scenes are basically done now lets gooo. spent today on lighting mostly, the first version looked super flat and depressing so i messed with it til it had some actual mood to it.
also kept tweaking materials (probably spent too long on this, i keep going back and changing tiny things nobody will notice). and i adjusted the camera framing so each scene actually looks composed n not random. feeling good about progress
short one today, was kinda busy w school. mostly worked on the transitions between sections, getting the camera to glide instead of snapping. took way longer than expected, transitions are deceptively annoying. polished a few other things and called it.
todays the day it started feeling like an actual project. did the clouds!! they’re procedural which sounds fancy but i basically just spent 4 hours fighting with noise functions until something cloud shaped appeared.
animated them with TSL (still kinda new to me ngl) and wrote a custom material so they render right. also went back n refined the mountain peaks cause they looked too smooth/fake before. the vibe is slowly coming together, im hyped
ok so i finally started the three.js thing ive been putting off for like 2 weeks lol. spent most of today just getting the boilerplate going, canvas + camera + renderer blah blah. honestly the boring part but u gotta do it.
got my first glb model loaded in and it showed up as a giant black blob until i realized i had zero lights in the scene classic. added some lighting and boom theres my mountain. also made the canvas resize properly cause i hate when stuff looks stretched on different screens.
not much to look at yet but the bones are there. excited to actually make it pretty later