ThreeJS Portfolio.
A western-themed 3D portfolio built with Three.js. A saloon scene with golden-hour lighting and a camera fly-through along predefined paths.
A western-themed interactive 3D portfolio: a desert saloon rendered in the browser with React Three Fiber, lit for golden hour, with a cinematic camera that flies you into the scene on load. It pairs a hand-written GLSL terrain shader and a curve-driven steam train with a GSAP camera rig, and reaches roughly 1,330 lines of TypeScript across 21 source files.
The world is built declaratively with React Three Fiber on top of Three.js 0.183 and React 19. Each scene element, the saloon, rails, train, rocks, cacti, mountains, tombstones and signage, is its own component composed inside a single Canvas. Lighting is tuned for a golden hour look: a low warm directional sun with a 2048px shadow map, a soft opposite-side fill, exponential fog in a matching amber, ACES filmic tone mapping, and drei volumetric clouds seeded across the sky.
The desert floor is a custom shaderMaterial rather than a textured plane. A vertex shader displaces a 150x150 segment plane with layered fbm value noise to roll the dunes, while masking out a flat road corridor with smoothstep. The fragment shader reconstructs world coordinates from UVs to paint sand grain, a darker dirt road, and subtle wheel tracks entirely procedurally, then a separate transparent shadow-catcher plane receives the scene's cast shadows on top.
Scenery placement is deterministic. A small linear-congruential PRNG (the 16807 multiplier) seeds the positions, rotations and scales of rocks, cacti and background mountains, so the layout is randomized in feel but identical on every load and across reloads. The railway is a CatmullRom curve; rails are built as TubeGeometry offset sideways along the curve normal, and the locomotive and three wagons sample the curve each frame, orienting themselves with a quaternion derived from the curve tangent and trailing each other by fixed arc-length gaps.
Camera work is the centerpiece. A GSAP intro tween flies the camera from a high wide vantage down to the saloon over three seconds, then hands control to constrained OrbitControls (clamped azimuth and polar angles, distance limits). A reusable flyTo hook tweens camera position and the OrbitControls target together so the look direction eases smoothly throughout each move, used to dock the camera against a tombstone whose face shows an in-world credits page rendered as a transform-occluded HTML iframe. A Firefox-specific overlay path swaps that embedded panel for a 2D iframe where transform HTML misbehaves, and a dev-only PointerLockControls free-fly camera (WASD plus vertical) is available for staging shots.