类型：Site模板 · 收录：2026-10-25 13:38:26 · 源码：会员可见
# Prompt: Abyss Atlas, an interactive 3D deep-sea specimen viewer
Build a single-file, one-screen **interactive 3D field guide to deep-sea creatures** called **Abyss Atlas**. Use plain HTML, CSS and a vanilla JS module, with **three.js 0.170** from jsDelivr through an import map, the GLTF, DRACO and Meshopt loaders, and RoomEnvironment. There's no build step. It should feel like a calm natural-history museum at night: a deep navy room with one creature floating under a cool rim light, flanked by a quiet sidebar and an editorial species card.
## Look and feel
- **Abyss theme (default):**
- **Background:** `#060d18`; panels `#0b1626`; hairlines `#18293e`.
- **Text:** ink `#e6eef5`, muted `#8497ab`.
- **Accent:** aqua-teal `#5fd0d8`, with a dark tint `#0f2737` for selected states.
- **Lamp theme:** a sun button switches the whole page to a pale lab look.
- **Colours:** background `#eef3f5`, panels `#f7fafb`, lines `#d9e2e7`, ink `#101a24`, accent `#1f6f7a`.
- **Transitions:** colours cross-fade over 0.6s, and the 3D lighting eases to a warm key light.
- **Type:** **Newsreader** (serif, regular and italic) for the brand, creature names, Latin names, headings and the caption; **Nunito Sans** 400/600/700 for the interface. Load both from Google Fonts.
## Layout (desktop)
A full-viewport grid with three columns: **196px sidebar · flexible stage · clamp(300px, 27vw, 356px) info column**.
1. **Sidebar:**
- **Brand:** "Abyss Atlas" in 26px serif.
- **Nav:** Home, Featured (current, teal-tint pill), Anglerfish (12 species), Octopuses (9), Squid (14), Jellies (15), Sharks (8) and Siphonophores (6), each with a thin line icon and a small grey count.
- **Featured-species card** at the bottom: an eyebrow label, the creature's cut-out image, a one-line serif title (for example "A net made of jaw.") with a short line under it, and "Learn more →".
2. **Centre column:**
- **Tabs:** a row of six 130px creature tabs, each with a cut-out thumbnail, the name in serif and the Latin name in grey italics. The selected tab gets the teal tint and border.
- **Stage:** below the tabs, the creature's 3D model floats over a soft radial "ground" glow.
- **Tool rail:** on the stage's left, four round buttons: zoom in (lit teal), zoom out, expand, and the lamp toggle.
- **Turn control:** at the bottom, a pill with ⟲ · 360° · ⟳.
- **Caption:** an italic serif line under it, for example "A mouth that opens like a sail, and the current fills it."
- **Hint:** "Drag to turn · scroll to zoom" fades out after the first touch.
3. **Info column:**
- **Top bar:** a rounded search field ("Search species, habitats, or regions…"), a bell and an avatar.
- **Detail card**, scrollable:
- the family name as a letter-spaced eyebrow
- a big serif name (clamp 40–54px)
- three pill tags
- a lede paragraph
- **Key Traits:** Length, Depth, Diet and Range, each with an icon
- **Habitat:** with a waves icon
- a **Close-up Detail** button with a circular magnified crop of the creature image (each creature sets its own background-position)
## Creatures (image = cut-out PNG for tabs and cards · model = GLB)
| # | Name | Latin | Family | Image | Model |
|---|---|---|---|---|---|
| 1 | Dumbo Octopus | *Grimpoteuthis sp.* | Grimpoteuthididae | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261012_045733_06274b43-b15e-4948-b9a6-dd92b25f975b.png | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261012_045729_a517c79e-4cfa-4589-a235-fef41b07cece.glb |
| 2 | Anglerfish | *Melanocetus johnsonii* | Melanocetidae | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261012_045732_1015f561-e21e-4919-aec8-6072c2318478.png | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261012_045726_0b0e19bf-1703-43f7-9654-bf84876c03c7.glb |
| 3 | Vampire Squid | *Vampyroteuthis infernalis* | Vampyroteuthidae | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261020_041431_808af24b-eab5-4194-b05d-c33bf695774b.png | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261020_041422_5ee4af88-e2d0-41e0-b23d-25490c7dd561.glb |
| 4 | Barreleye | *Macropinna microstoma* | Opisthoproctidae | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261020_041433_37187d00-31dd-4426-b2b2-ee3c4db378ff.png | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261020_041424_ea346d5e-4d33-4ab3-8426-5b13ce0a5e31.glb |
| 5 | Gulper Eel | *Eurypharynx pelecanoides* | Eurypharyngidae | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261020_041435_c12b6e67-4382-4625-9b09-de0bb415b568.png | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261020_041427_2e82f647-d599-4867-8d5b-96e3c9ee41bd.glb |
| 6 | Nautilus | *Nautilus pompilius* | Nautilidae | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261020_041437_bff464c2-d42e-4353-a2c1-99ad72a860cd.png | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261020_041429_ec6d09da-b8aa-4a87-b6be-89014b4615a9.glb |
Each creature also carries:
- **Card content:** three tags, a lede, four trait rows, a habitat line, a caption, close-up text, a close-up lens position, and a two-line featured blurb.
- **Default view:** a yaw of 0.45 and a pitch of 0.12.
- **Default selection:** Anglerfish.
## 3D viewer
- **Canvas:** one WebGL canvas covers the whole hero behind the UI, so a model is never clipped by a panel. The camera's principal point is shifted onto the stage centre (re-measured with ResizeObserver).
- **Renderer:** alpha, NeutralToneMapping, exposure 1.1, PMREM RoomEnvironment at 0.55.
- **Lights:**
- a cool key light (`#d6ecff`, 2.4) from the upper right
- an aqua rim light (`#5fd0d8`, 2.6) from behind-left
- the lamp theme eases these to a warm key, a weak rim and a stronger environment
- **Model rig:** each model is centred and normalised to radius 1 inside pivot → spin → holder groups, and loads lazily (DRACO decoder from gstatic).
- **Interaction:**
- drag rotates the creature freely with inertia; scroll or pinch zooms (0.55–3.4); double-click resets
- ⟲/⟳ turn 45°; 360° spins a full turn
- after a few idle seconds the creature eases back to its home pose and keeps a slow sway
- **Switching creatures:** the current model slides and shrinks away as the next one slides in. The ground glow squeezes and returns, the detail card's rows sink out and rise back in one by one, and the caption, featured card and fallback image update.
- **Expand:** the sidebar, tabs and info column slide out, and the creature re-centres on the full screen.
- **Fallback:** if WebGL or a model fails, the creature's cut-out PNG shows on the stage instead.
## Responsive
- **≤1100px:** the sidebar is hidden.
- **≤760px:** stacked. The tabs scroll sideways, the stage takes the top half, and the detail card becomes a bottom sheet that slides away in expanded mode.
- **Short screens:** spacing is tightened.
- **Reduced motion:** transitions are instant and there's no idle sway.
## Acceptance check (1440×900)
- **Default view:** dark navy UI with the Anglerfish selected and rendered in 3D at the centre, the rim light glowing on its edges.
- **Interactions:** dragging turns it smoothly; clicking another tab slides the next creature in and refreshes the card; the sun button flips the whole page to the pale lamp theme.