提示词
尽可能精确地复刻附带视频中展示的网页应用。它是一个深色电影感的 3D「意图 → 基础设施」城市可视化（「用 Gemini Cloud Assist 把意图变成基础设施」）——一个 AI 代理在一张用户可以飞行、悬停、检查的深色 3D 地图上构建一座发光的霓虹城市，同时一个实时代理日志持续滚动。忠实还原它的外观、布局、动效和交互。
必须精确匹配：
- 3D 场景：一座近乎全黑的深色城市——扁平的街道网格，低矮的深色挤出建筑块，逐渐淡入朦胧的地平线，远处有隐约的山脉和星星。中央有一个结构集群，以鲜艳的霓虹色发光（品红、电光绿、青色、蓝色、橙色），带强烈的辉光。动画化的虚线路线（蓝 / 绿 / 黄）在街道中流动。发光的垂直光束信标（蓝色），一个脉动的绿色地面光环，漂浮的图钉。
- POI 悬停：一个圆角 Material 风格药丸提示框，带图标和标签淡入显示（例如「Spectators」「Medical Station」）。
- UI 外壳（Material 风格，圆角、玻璃质感，叠加在画布之上）：
· 顶部栏：汉堡菜单加暗淡标题「Intent to infrastructure with Gemini Cloud Assist」
· 左侧竖直工具栏：收藏（心形）、定位 / 盾牌、相机、轨道 / 重新居中、全屏，加相机预设切换「A / B / C」
· 底部居中操作栏：一个彩虹渐变的 Gemini 风格光球、一个对比 / 切换图标、一个 ">_" 终端 / 日志切换按钮
· 右下角：设置齿轮加刷新
· 右侧「LOG」面板（点击 ">_" 时滑入）：PLANNER / RUNNER 两个标签；表格列为 TIME · AGENT · TYPE · MESSAGE；行数据持续流入（PLANNER·TOOL、SIMULATOR·RUN、PLANNER·RUN），带彩色类型标签（红色 TOOL / 蓝色 TOOL / 绿色 RUN）和每行的彩色圆点。
需要还原的行为：
- 自由轨道 / 平移 / 缩放相机；在俯视全景和低角度地平线视角之间平滑飞行切换。
- 相机预设 A/B/C：点击后用 GSAP 平滑飞向已设定好的取景视角。
- 悬停 POI → 弹出提示药丸；切换日志面板；新日志行以细微高亮持续流入。
- 电影感的「构建」揭示动画：结构逐个集群升起并点亮霓虹，路线逐渐绘出，信标弹出。
- 霓虹发光材质带强烈辉光，动画化虚线路线，脉动信标，缓慢的相机怠速漂移，平滑缓动的过渡（不允许跳变）。
技术栈：Next.js + TypeScript + Tailwind，React Three Fiber（Three.js）+ drei（OrbitControls、GLTF Draco），相机动画用 GSAP，UI 面板用 Framer Motion，后期处理（发光层的辉光、暗角、细微颗粒）。60fps、响应式，并提供 prefers-reduced-motion 的降级方案。
我会以 GLTF 格式提供城市模型——围绕一个占位的 /public/city.glb 搭建整个场景（如果没有素材，则生成一个程序化的深色网格城市，带挤出建筑块），并让霓虹集群、路线、信标、POI、相机预设和实时流动的日志面板围绕它完整运作起来。构建完整的应用。原文提示词（English）
Rebuild the web app shown in the attached video as closely as possible. It's a dark, cinematic 3D "intent → infrastructure" city-visualization ("Intent to infrastructure with Gemini Cloud Assist") — an AI agent builds a glowing neon city on a dark 3D map that the user flies around, hovers, and inspects while a live agent log streams. Recreate the look, layout, motion, and interactions faithfully.
MATCH THIS EXACTLY:
- 3D scene: a dark near-black city — flat street grid with low dark extruded building blocks fading to a hazy horizon with faint mountains + stars. A central CLUSTER of structures glowing in vivid neon (magenta, electric green, cyan, blue, orange) with heavy bloom. Animated dashed route lines (blue/green/yellow) flowing through the streets. Glowing vertical light-beam beacons (blue), a pulsing green ground ring, floating pins.
- POI hover: a rounded Material pill tooltip with an icon + label fades in (e.g. "Spectators", "Medical Station").
- UI chrome (Material style, rounded/glassy, over the canvas):
· top bar: hamburger menu + dim title "Intent to infrastructure with Gemini Cloud Assist"
· left vertical tool rail: favorite (heart), location/shield, camera, orbit/recenter, fullscreen + camera-preset toggles "A / B / C"
· bottom-center action bar: a rainbow Gemini-style gradient orb, a compare/swap icon, a ">_" terminal/log toggle
· bottom-right: settings gear + refresh
· right "LOG" panel (slides in on ">_"): tabs PLANNER / RUNNER; table columns TIME · AGENT · TYPE · MESSAGE; rows streaming (PLANNER·TOOL, SIMULATOR·RUN, PLANNER·RUN) with colored type tags (red TOOL / blue TOOL / green RUN) + a colored dot per row.
BEHAVIOR TO REPRODUCE:
- Free orbit / pan / zoom camera; smooth camera fly between top-down overview and low horizon angle.
- Camera presets A/B/C: click to smoothly fly (GSAP) between framed viewpoints.
- Hover POI → tooltip pill; toggle the Log panel; new log rows stream in with a subtle highlight.
- A cinematic "build" reveal: structures rise and light up neon cluster-by-cluster, routes draw in, beacons pop.
- Heavy bloom on neon emissives, animated dashed routes, pulsing beacons, slow idle camera drift, smooth eased transitions (no snapping).
STACK: Next.js + TypeScript + Tailwind, React Three Fiber (Three.js) + drei (OrbitControls, GLTF Draco), GSAP for camera, Framer Motion for UI panels, postprocessing (bloom on emissive layer, vignette, faint grain). 60fps, responsive, prefers-reduced-motion fallback.
I'll supply the city as a GLTF — scaffold everything around a placeholder /public/city.glb (or generate a procedural dark grid city with extruded blocks if none), and make the neon cluster, routes, beacons, POIs, camera presets, and streaming Log panel fully working around it. Build the complete app.建议模型
Fable 5
视频地址
https://media.goodcase.ai/media/video/fable-5-3d-a5e10adb776e.mp4
