Interactive tropical island railway diorama with underwater cutaway

Prompt

The author shared the full prompt.

Create a polished, fully interactive 3D artwork called “Pelagia - The Ocean Line” using Three.js and WebGL. Deliver the complete experience in one standalone HTML file that opens directly in Chrome. Build the scene, interactions, animations and audio, not just a mockup.

CONCEPT AND ART DIRECTION

A miniature tropical island with a railway that travels above and below the ocean. Present the island and surrounding water as a large, rounded, elliptical diorama with a transparent water cutaway. The viewer should see the coastal village above the surface and a living underwater world below it simultaneously.

Use a richly detailed miniature aesthetic: turquoise water, pale sand, layered stone, lush palms, cream buildings, terracotta roofs and a vintage red-and-cream train. Aim for a finished interactive artwork with thoughtful composition, soft shadows and inviting lighting.

ISLAND AND TERRAIN

Build a continuous solid terrain volume, from the bedrock base to the shoreline. Show visible geological layers along the cut edge. Fill the space beneath the land completely, without floating surfaces or unexplained cavities.

Include a coastal station with a clock, striped awning, benches, luggage and platform lamps. Add cottages, a striped lighthouse, palm trees, rocks, beach vegetation and small decorative details. All structures and plants must sit correctly on the terrain.

RAILWAY AND UNDERWATER TUNNEL

Create a continuous closed railway route. The train leaves the station, follows the shoreline, crosses a supported viaduct, gradually descends into a transparent underwater tunnel, passes through the reef and returns to the station.

Model rails, sleepers, track beds, bridge supports, railings, tunnel entrances, glass panels, structural ribs and warm tunnel lights. The tunnel must fully enclose the train with sufficient clearance. Keep transitions smooth and avoid abrupt slopes or roller-coaster curves.

TRAIN AND ANIMATION

Build a detailed vintage locomotive with at least two passenger carriages. Include shaped bodywork, rounded roofs, cream window frames, warm interior lights, doors, seats, passengers, bogies, wheels and couplings.

Use an arc-length-parameterized route to maintain consistent speed and carriage spacing. Position and orient each carriage independently along the track. Wheels must remain aligned with the rails, and couplings must stay connected through curves and slopes.

Have the train stop briefly at the station, open its doors, close them and depart smoothly.

WATER AND MARINE LIFE

Create convincing translucent water with animated surface ripples, reflections, depth tint, gentle foam near the shore and moving caustics on the seabed. Keep the underwater tunnel and marine life clearly visible through the cutaway.

Populate the reef with coral, sea plants, rocks, bubbles, colorful schooling fish, a sea turtle and a spotted whale shark. Animate tails, fins and flippers naturally. Animals must swim forward and turn smoothly.

Co

Category

3D scenes

Stack

Three.js, WebGL

Made with

Three.js, WebGL

From the author

Price/value comparison post.

On X

100 likes · 11K views · 35 saves