---
id: "2113200831197856096"
source: https://x.com/threejs/status/2113200831197856096
author: "Three.js (@threejs)"
media: "video, 1280x720, 35.8s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Water Globe Under Ocean Light

## Summary
A real-time 3D glass sphere floats in a deep teal underwater scene with soft light shafts; inside it a cut-away of the sea sloshes as you drag, showing a foamy surface, green water and a sandy floor. It shows how far browser 3D has come: refraction, liquid motion and atmosphere in one small interactive object.

## Style
- Theme: dark
- Mood: calm, immersive, oceanic, curious
- Tags: webgl, water-shader, glass-sphere, underwater, god-rays, drag-to-rotate, real-time
- Category: 3D, Motion

## Palette
| Role | Hex |
|---|---|
| Abyss | #022B3B |
| Deep teal | #034253 |
| Light shaft | #0E5D70 |
| Haze | #3D7A89 |
| Sea green | #2E8B6A |
| Sand | #B08A5C |
| Foam | #E8EEF0 |
| Black | #000000 |

## Typography
- Almost none: a tiny circular icon top left and two small arrow buttons below the sphere. If labels are needed, Inter (500) at 12px in white at 70% opacity.

## Layout
- 16:9 frame (1280x720), recorded inside a browser window.
- Full-bleed underwater background with vertical light shafts coming from the top.
- Sphere centred, about 35% of the frame height.
- Previous / next round buttons centred just below the sphere.

## Elements
- Glass sphere: thin highlight rim, refraction, tiny air bubbles on the inner surface.
- Water body: a horizontal cut through the sphere with a wavy foam line, translucent green below and a sand layer at the bottom.
- Background: dark teal gradient, soft god rays, drifting particles.
- Controls: small circular icon buttons with 1px light borders.

## Motion
- The scene fades in from dark teal; the sphere scales up from a small outline.
- Dragging rotates the sphere; the water inside lags and sloshes, the foam line wobbles and settles over about 1.5s.
- Bubbles drift upward slowly; light shafts shimmer constantly.
- The clip ends on a cut to black.

## Rebuild it
1. Set up three.js with a `PerspectiveCamera` and a full-screen background plane using a vertical teal gradient plus animated light shafts (additive noise stripes).
2. Make the sphere a `MeshPhysicalMaterial` with `transmission: 1`, `thickness`, `roughness: 0.05` and an environment map for the rim.
3. Inside it, render a water volume clipped by a moving plane; displace the surface with a few summed sine waves driven by angular velocity, and add a foam band where the plane meets the glass.
4. Add `OrbitControls` (rotate only) and feed rotation speed into the wave amplitude with damping for the slosh.
5. Add instanced bubble sprites and slow floating particles; keep the UI to two round arrow buttons.

## Generation prompt
A glossy glass sphere floating in a deep teal underwater scene with soft vertical light rays and drifting particles; inside the sphere a cross-section of the sea with a foamy wave line, translucent green water and a sandy floor, the water sloshing gently as the sphere rotates; cinematic, calm, realistic refraction, minimal UI, no text.