Skip to content
Uyen Dang
All notes

Deep-sea flashlight viewer (three.js)

Small web scene: roaming sea creatures in near-darkness, revealed only when the flashlight beam hits them.

Date
May 3, 2025

What this is

This is a lightweight web viewer built around one interaction. The scene stays dark until a flashlight beam sweeps through it. Creatures follow simple paths and only read clearly when they cross the light.

Flashlight beam revealing multiple creatures in the dark water
Flashlight pass catching a dense cluster of fish and shells
Flashlight pass revealing a bright fish silhouette and nearby sea forms
Flashlight pass highlighting a single fish close to the camera

Build notes (three.js)

Built in three.js. The setup is simple: load the models, keep them roaming, and use a tight, focused light as the primary readability tool. The lighting is intentionally strict. Silhouettes show first, then texture and detail resolve as the beam centers.

What was being tested

  • Readability in near-darkness (silhouette first, detail second).
  • Beam reach and falloff (how quickly things appear and disappear).
  • Creature speed versus camera speed (so reveals feel controlled, not random).
  • Scene density (enough life without turning into noise).

Credits (Sketchfab assets)

Models below were imported from Sketchfab for this prototype. Credits are listed here for transparency: