Reduce motion is on · previews stay still
All effects Cities & architecture Golden Gate Bridge with Fog and Traffic Golden Gate Bridge with Fog and Traffic Golden Gate Bridge with Fog and Traffic is a Three.js scene from a prompt collected by petergpt (collection) (original author unknown); 3dmotion rebuilt it with Claude Opus 5.5 on 2026-11-09.
collected by petergpt (collection) on GitHub · verified 2026-11-09
Original prompt petergpt (collection) · GitHub · collected; original author unknownModel Claude Opus 5.5 Rebuild date 2026-11-09 Known limits The comet head renders close to white instead of gold, and the night foreground hill is a flat brown mass. Open demo Open demo, then press Run Saving the HTML? Running here stays free. A saved rebuild uses three@0.170.0: keep ../vendor/three-r170.min.js beside it at that relative path, or allow a network connection for the CDN fallback.
Preview or live? Prompt collected by petergpt (collection) · original author unknown. Copies include source credit.
Rebuild receipt Single HTML Model Claude Opus 5.5 Verified 2026-11-09 Runtime Three.js CDN · r170 Licence Rebuild code · MIT Fix rounds 5 Known limitation The comet head renders close to white instead of gold, and the night foreground hill is a flat brown mass.
Original prompt Free · 8,085 characters OBJECTIVE Realistic representation of the Golden Gate Bridge with a hint of the Presidio and Marin Headlands, tuned to feel like the real San Francisco Bay. Prioritize a believable atmosphere/sky, water, and traffic flow. USER CONTROLS -…
OBJECTIVE
Realistic representation of the Golden Gate Bridge with a hint of the Presidio and Marin Headlands, tuned to feel like the real San Francisco Bay. Prioritize a believable atmosphere/sky, water, and traffic flow.
USER CONTROLS
- Fog bank slider: 0 → 100%
- Controls a **height-based fog bank** that lives mostly under and around the deck.
- At 100% it should be unmistakably foggy around the bridge and water surface (even in Clear weather), rising and falling as a coherent bank, not just a global haze.
- Traffic density slider: 0 → 100%
- Controls the number of vehicles on the roadway and approaches.
- Vehicles drive continuously and loop seamlessly so traffic feels endless.
- Water waves slider: 0 → 100%
- Controls how wavy/choppy the bay looks (wave height, choppiness, and whitewater/foam presence).
- At 0% water is calmer (gentle ripples). At 100% (especially in Stormy) it should look close to storm conditions, not just a subtle height shift.
- Weather selector: presets (Clear, Marine layer, Overcast, Stormy)
- Each preset should be **meaningfully different**, not minor tweaks.
- Clouds should be visible and animated (layered drift), with cloud height/opacity responding to the active preset.
- Clear: vibrant, believable blue sky; crisp visibility; minimal cloud cover.
- Marine layer: a low fog bank/haze sitting near the water/under the deck; cooler lighting.
- Overcast: heavy cloud cover with diffuse lighting; muted contrast but still clearly visible (not “can’t see anything”).
- Stormy: dark clouds, rain, lightning; stronger waves; dramatic but still readable (not pure black or an overly aggressive rectangular haze layer). Lightning should briefly illuminate the scene/water.
- Rain should be visibly present and make surfaces look wet (road/bridge sheen, occasional puddling).
- Time of day slider: Morning → Night
- Drives sun/moon position, sky color, exposure, water color, stars, and intensities for night-time lights (deck lights, vehicle lights, skyline, Alcatraz).
- Sunrise/sunset should be clearly visible and “golden hour” should feel distinct from midday.
- Comet button (available at night)
- Pressing the button sends a visible comet across the sky **above the bridge**, traveling roughly perpendicular to the bridge’s span.
- The comet should have a believable head + glowing tail (golden tint), without hard-edged halos.
- It should briefly light up the environment in an impressive way and produce a visible reflection/response on the water.
- Whales button
- Pressing the button spawns **1–5 humpback whales** in the bay (randomized count), behaving as a loose group.
- Whales should look recognizable (not like submarines) and do typical behaviors: swimming, surfacing, breaching/tail slaps, etc.
- They must stay in the water, avoid land, and avoid intersecting the bridge/structures.
- Their motion should produce visible water interaction: ripples, spray/splashes, and disturbance that reads with the current wave conditions.
- Camera: Free orbit / pan / dolly (OrbitControls-style).
- UI readout: show current values for fog %, traffic %, waves %, whales count, and a time-of-day label.
SCENE CONTENT & BACKGROUND
- Golden Gate Bridge
- Two Art Deco towers, suspension cables, and vertical hangers in correct “International Orange”.
- Suspension system must read as structurally connected:
- Main cables attach at tower tops and continue to both ends (anchorages), not terminating mid-air.
- Vertical hangers run continuously from main cables down to the deck along the main span.
- Bridge shape should be coherent and believable:
- Towers are not floating; they connect to believable bases/footings at water/land.
- Road deck and side edges/catwalk elements connect cleanly to approaches (no mismatched “edgy” shapes where a rounded/circular edge is expected).
- Roadway and traffic
- Roadway on top of the deck plus approach roads on both sides with lane markings.
- Approach roads should extend far enough that the visible road doesn’t end abruptly near the bridge (traffic should disappear off-screen naturally).
- Multi-lane traffic in both directions:
- Mix of cars and heavier vehicles (trucks/buses), with **10+ visually distinct vehicle archetypes** and realistic scale variation.
- Vehicle colors must be varied and realistic (traditional automotive palette; avoid toy-like saturation; avoid “all grey”).
- Vehicles must not overlap/clip through each other; maintain believable spacing so both directions read correctly.
- Headlights/taillights are emissive and brighten as it gets darker.
- Terrain and shoreline
- Natural terrain for Presidio (south) and Marin (north): rolling hills framing the bridge down to shoreline.
- Vegetation shading: deeper greens near water, pushing into slightly dry/golden tones at higher elevations; avoid neon/flat greens.
- Shoreline should look **natural**, not like a square cutout; land should extend to the edges of the simulation so the world doesn’t feel like a clipped rectangle.
- Ensure water/shore interaction doesn’t flicker at shallow areas (no “z-fighting” look).
- San Francisco skyline (distant silhouette) on the Presidio side
- Simple skyline silhouette with soft window/emissive detail that becomes more noticeable at night.
- Night emissives should feel plausible (not overly harsh/glowy).
- Alcatraz hint
- Small island with rocky base, a main prison block mass, and a simple tower/lighthouse element with subtle emissive at night.
- Bay water
- Visually impressive water that avoids obvious tiling/square artifacts.
- Multi-scale wave motion with foam/whitewater accents, especially at higher wave settings and stormy weather.
- Reflects sun/moon and overall sky color in a believable, non-blinding way (avoid “white-out” reflections at midday).
- Integrates with fog and weather (fog bank sits on/over it; stormy rain affects its look).
- Vessels
- Several varied boats/ships (not just rectangles) such as cargo/container ships, tankers, and a ferry.
- Ships should follow **purposeful routes** (e.g., recognizable shipping lanes / ferry route), not aimless drifting, and move independently with distinct speeds/phases.
- Ships remain in the water and do not intersect land/bridge; light bobbing/wake is a plus if it reads well.
- Additional environment detail
- Instanced trees placed on hillsides (no floating trees, none in water).
- Small flock of birds circling/gliding near/around the bridge.
- Distant background/bowl geometry to close the horizon.
- Sky, Sun, Moon, Stars
- Day sky must be clearly **blue** in Clear weather, with a natural horizon haze gradient (not pale grey/white).
- The sun should be visible as a disc/bright element when above the horizon, not just an overexposed white screen.
- Morning vs midday vs afternoon should feel different; sunrise/sunset should be clearly warmer and more dramatic.
- Night sky should be dark but not empty: visible moon and a tasteful starfield (stars present and noticeable, but not overly dense).
- Stars fade in/out smoothly during the day→night transition.
TECHNICAL SPECIFICATIONS
- Create a Self-contained output that runs in a blank Chrome tab with no bundler/build step.
- Use Three.js as ES modules only:
- Include an import map (before the module script) mapping `"three"` and `"three/addons/"` to the same pinned Three.js version.
- Import only via those names (no other bare specifiers).
- Performance:
- Use instanced meshes for repeated objects (cars, trees, skyline windows/buildings, etc.) and avoid unnecessary per-frame allocations.
- Code quality:
- Never reuse identifiers in the same scope or shadow variables; prefer descriptive names.
- Rendering:
- Physically plausible lighting setup (sun/moon directional, hemisphere/ambient fill as appropriate).
- ACES-Filmic tone mapping and sRGB output.
- Avoid deprecated Three.js settings and avoid any console errors/warnings (e.g., shader compile errors, WebGL feedback loop errors). Prompt collected by petergpt (collection) ; the original author is unknown on GitHub. github.com/petergpt/3d-prompt-collection#prompt-05 . Copies include this credit.
Claude Opus 5.5 · Claude Code · 2026-11-09 · 5 fix rounds
Original prompt, credited
@MengTo Open, then Run
Original prompt, credited
collection · petergpt Open, then Run
Original prompt, credited
collection · petergpt Open, then Run
Original prompt, credited
victorsodre Open, then Run
Golden Gate Bridge with Fog and Trafficpetergpt (collection) · Cities & architecture