What Is This?
Island Explorer is a real-time 3D experience that procedurally generates a tropical island and lets you explore it from your browser — no downloads, no installs, no game engine. The entire world is built on the fly using GPU-accelerated heightmaps, Gerstner wave mathematics, and a lightweight physics system, then rendered through Three.js's WebGL pipeline.
It ships as the cinematic landing page for ericrhea.com. When you first arrive, a scripted fly-through camera sweeps around the island over roughly 60 seconds. Once the sequence completes — or whenever you choose — you can drop into first-person explore mode and walk the island yourself.
Two Modes of Interaction
🎬 Cinematic Fly-Through
An automated orbital camera smoothly circles the island, sweeping through low angles over the ocean and rising to reveal the terrain, foliage, and temple from above. Designed as an introduction — visitors see the world before they interact with it. A "Skip to Site →" button is always available.
🎮 Free-Roam Explore
Click "Explore Island" to activate FPS-style controls. Walk across the terrain, jump between elevation changes, circle the temple, and wade along the shoreline. Physics keep you grounded (literally), and collision detection prevents you from falling through the world.
Controls
| Input | Desktop | Mobile |
|---|---|---|
| Move | W A S D | Virtual joystick (on-screen) |
| Look | Mouse | Touch drag |
| Jump | Space | Jump button |
| Enter explore | "Explore Island" button | "Explore Island" button |
| Exit to site | "Skip to Site →" | "Skip to Site →" |
On mobile, an ExploreControls overlay provides a virtual WASD pad, jump button, and action button — all touch-optimized and rendered as a transparent HUD so the 3D scene stays fully visible underneath.
Features & Capabilities
- Procedural terrain generation — GPU-based heightmap creates a unique island shape with beaches, hills, and a central peak. No hand-modeled geometry.
- Gerstner wave ocean — Realistic wave motion using the Gerstner wave model, producing rolling peaks and troughs that respond to configurable wind parameters.
- Dynamic sky & atmosphere — Procedural sky dome with sun position, atmospheric scattering, and horizon color gradients.
- Foliage system — Instanced palm trees, generic trees, and grass blades placed procedurally based on terrain slope and elevation thresholds.
- Temple structure — A geometric landmark placed at a focal point on the island, serving as a visual anchor and exploration target.
- Post-processing pipeline — Bloom and vignette effects applied in screen-space to give the scene a cinematic, slightly dreamy quality.
- Physics & collision — Gravity, ground collision via heightmap sampling, and jumping with velocity-based arc — lightweight but convincing.
- Responsive & mobile-ready — Adapts to any screen size. Touch controls appear automatically on devices without a keyboard and mouse.
- No build step required — The scene runs from ES module source directly in the browser. No webpack, no bundler, no compile.
Tech Stack & Libraries
The island is built with a deliberately minimal dependency tree — Three.js for rendering, and everything else is hand-rolled.
Three.js
Core 3D engine. Handles the WebGL rendering pipeline, scene graph, materials, lights, and the camera system. Imported as ES modules from three/.
Custom Terrain Generator
Procedural heightmap built with layered noise functions. Outputs a PlaneGeometry with vertex displacement — no textures, just math. Exposed via terrain-generator.js.
Gerstner Water Shader
GLSL vertex shader implementing the Gerstner wave equation for realistic ocean surface deformation. Runs entirely on the GPU each frame.
FPS Controller
Custom first-person controller in fps-controller.js with pointer lock, WASD input mapping via input-manager.js, and gravity/jump physics.
Post-Processing (Bloom + Vignette)
Screen-space effects using Three.js EffectComposer with UnrealBloomPass and a custom vignette shader pass.
Instanced Foliage
Palm trees, generic trees, and grass rendered via InstancedMesh for GPU-efficient batch drawing. Placement governed by slope and elevation rules.
Physics Engine
Minimal custom physics in physics.js — gravity integration, velocity-based jumping, and ground collision via real-time heightmap queries.
Mobile Touch Controls
On-screen HUD built with explore-controls.js — virtual WASD pad, jump button, and action button using touch event listeners and CSS overlays.
Architecture
The codebase lives in src/ and is organized by concern:
src/main.js—IslandSceneclass. Owns the animation loop, scene initialization, camera modes, and the explore-mode toggle.src/terrain/— Heightmap generation and terrain mesh construction.src/water/— Gerstner wave ocean plane and shader material.src/sky/— Procedural sky dome and atmospheric parameters.src/foliage/— Palm trees, generic trees, and grass instancing.src/scene/— Static scene objects like the temple.src/controls/— FPS controller and input manager.src/physics/— Gravity, jumping, and collision.src/postfx/— Bloom and vignette post-processing passes.src/ui/— Mobile explore controls overlay.
No build tools, no bundler, no transpiler. The browser loads ES modules directly from src/main.js and Three.js is resolved via an import map or local copy.
Why Build This?
Because the browser is a vastly underestimated runtime. Most personal sites are flat pages. This one asks: what if your landing page was a place you could actually walk around in?
It's also a stress test — of WebGL performance on commodity hardware, of procedural generation without a game engine, and of how far you can push vanilla JavaScript + Three.js before you need heavier tools. The answer: surprisingly far.