Codex + Images 2 从 UI 设计到上线：可互动的3D生物结构科普App
✅
这篇就带你做一个具体项目：
•
生成 3D 生物结构（比如 DNA 双螺旋、细胞器、蛋白结构）
•
做成一个 可旋转、可缩放、可点击讲解 的互动 App，最后 部署上线，发给朋友直接玩
你要准备什么
最终效果展示
一个网页 App，打开后：
•
中间是 3D 生物结构
•
鼠标拖拽旋转，滚轮缩放
•
点击结构的"热点点位"，右侧弹出解释卡片
•
顶部有结构切换（DNA / 细胞 / 蛋白质…）
场景就像那种博物馆互动屏：能玩、能学、不无聊。
Step A：把需求喂给 Codex
你别上来就说"给我写个 App"。那样它会写，但大概率不合你口味。
你要给一个"产品级"的需求单。下面这段直接复制，改几个名词就能用：
代码块
Plain Text
我要一个网页端互动科普 App，主题是"3D 生物结构探索"。技术栈：Vite + React + Three.js。
功能：
首页展示一个 3D 模型（glb），支持拖拽旋转、滚轮缩放。
右侧有信息面板：标题、简介、3 个知识点。
支持切换 3 个模型（DNA 双螺旋、线粒体、蛋白质），切换时有加载状态。
模型上支持 3 个热点（hotspot），点击热点会在信息面板显示对应解释。
代码要结构清晰：components、scenes、data、utils。
给我完整项目文件结构、关键文件代码、以及本地启动命令。
要求：
- 可运行，不要伪代码。
- 尽量用 @react-three/fiber + drei 简化 Three.js。
- 加一个简单的性能优化（比如按需渲染或降低像素比）。
Step B：用 GPT Images 2 出 UI 方向图
UI 这事最耗人。你想的是"简洁高级"，落地就是"像个作业"。
把 UI 先用 GPT Images 2 定调，很省命。
4.1 直接让它出一张「网页截图风格」
提示词可以这样写（可复制）：
代码块
Plain Text
生成一张现代科普互动网页 App 的 UI 设计稿（desktop）。
布局：左侧大区域是 3D 画布，右侧是信息面板（标题、简介、知识点、热点说明）。
你拿到图后别只看"好看"。你要做两件事：
•
把颜色、字体、间距记下来（或者让 Codex 照着还原）
•
把组件拆出来：Tabs、InfoPanel、HotspotTooltip、Loading
4.2 让 Codex 把"图片"转成可落地的样式
你可以把图丢给 Codex（如果你的环境支持图片输入），然后说：
代码块
Plain Text
请根据这张 UI 设计稿，用 React + CSS（或 Tailwind）实现同款布局和风格。
要求：
- 3D 区域占 70%，右侧面板 30%
💡
UI 这块的关键不是"100% 还原"。关键是：有层级、有一致性、别土。做到这三点就够了。
Step C：3D 场景搭建（用 r3f，别手搓 Three.js）
如果你以前被 Three.js 折磨过，这里给你一条活路：
•
@react-three/fiber 负责把 Three 场景变成 React 组件
•
@react-three/drei 提供现成轨道控制、加载器、环境光
让 Codex 按这个方向写。
5.1 关键依赖
代码块
Bash
npm i three @react-three/fiber @react-three/drei
5.2 你要的核心能力
•
Canvas：3D 画布
•
OrbitControls：拖拽旋转、缩放
•
useGLTF：加载 glb
•
Html：在 3D 上叠加热点 UI（可选）
你可以让 Codex 按这个组件结构来写：
•
ModelViewer.tsx：Canvas + 灯光 + 控制器
•
BioModel.tsx：加载 GLB、挂热点
•
Hotspots.tsx：热点位置和点击事件
•
InfoPanel.tsx：右侧信息
六、Step D：热点（Hotspot）怎么做才不痛苦
热点有两种常见做法：
•
3D 物体小球 + Raycaster：真 3D，点中更稳
•
drei 的 Html：看着像悬浮标签，好做但有遮挡问题
建议你上来就用"3D 小球 + 点击"。够稳。
6.1 数据结构建议
把热点写成数据，别写死在组件里：
代码块
JavaScript
// data/models.ts
export const MODELS = {
dna: {
name: "DNA 双螺旋",
file: "/models/dna.glb",
intro: "展示双螺旋结构与碱基对。",
points: [
"A-T、C-G 配对",
"双螺旋的沟（大沟/小沟）",
这样你换内容就像换 PPT。
七、Step E：3D 生物结构模型从哪来（别硬生成，先能用）
你说"生成 3D 生物结构"，现实里分两条路：
7.1 路线 1：直接用现成模型（最快上线）
•
Sketchfab（注意授权）
•
NIH/公开数据项目（有的提供 3D 资源）
•
Blender 自己简单建（DNA 双螺旋其实不难）
导出成 .glb，丢进 public/models/。
7.2 路线 2：AI/程序生成（酷，但更费时间）
•
DNA：可以用脚本生成螺旋曲线 + 实例化小球圆柱
•
蛋白：可以从 PDB 数据渲染（需要额外库）
⚡
建议你先用路线 1 把产品跑通。跑通的那一刻，你会非常上头。
八、Step F：性能别翻车（不然你朋友打开就卡）
3D App 最容易死在"我电脑很流畅，别人手机巨卡"。
给你几个很实用的控制点：
•
限制像素比：dpr={[1, 1.5]}
•
模型面数别太夸张（glb 体积能控制在 5–15MB 内就舒服）
•
加载时显示占位（别白屏）
•
需要时再渲染（静止时不每帧重绘，可选）
你可以直接让 Codex 加这一条：
代码块
Plain Text
给 Canvas 加 dpr 限制，并在模型加载时显示 Loader。模型加载失败要有错误提示。
九、Step G：一键部署上线（把"能跑"变成"能发链接"）
本地跑起来只是及格。发链接才叫作品。
9.1 方案 1：Vercel（省心）
•
推到 GitHub
•
Vercel 导入项目
•
构建命令默认：npm run build
•
输出目录：Vite 默认 dist
9.2 方案 2：Netlify
同理，选择 Vite preset 就行。
9.3 方案 3：GitHub Pages
适合纯静态，但要处理 base 路径。让 Codex 帮你改 vite.config 更快。
十、直接可用的 Codex"迭代指令"（你就这样催它）
你做项目时，最爽的用法是把 Codex 当"带班工程师"。下面这些指令非常好使：
10.1 想加功能
代码块
Plain Text
在模型上增加 hover 高亮：鼠标移到 hotspot 球体上时变亮，并在鼠标旁显示 label。
10.2 想修 bug
代码块
Plain Text
我点击 hotspot 没反应。请你检查 raycaster 事件绑定、对象层级、pointer events，给出可运行修复方案。
10.3 想换 UI 风格
代码块
Plain Text
把整体 UI 改成更"科研仪表盘"风格：更强的网格背景、细线分割、右侧信息面板像控制台。
只改样式和布局，不要动 3D 逻辑。
10.4 想更像科普产品
代码块
Plain Text
十一、避坑清单（真的别踩）
•
模型太大：glb 50MB 那种，网页基本没法玩。先压到 15MB 内。
•
灯光瞎配：太暗像没加载，太亮像塑料。用 HDRI 环境光会舒服很多（drei 的 Environment）。
•
热点坐标不对：模型中心点、缩放比例、导出轴向很容易乱。坐标别靠猜，让 Codex 加一个"调试模式"把坐标打印出来。
•
交互冲突：OrbitControls 和点击热点经常抢事件。要处理 pointer events，必要时点击热点时临时禁用旋转。
•
没做加载态：白屏 3 秒，用户直接关掉。
十二、你可以怎么扩展（把小玩具变成作品集）
•
加"知识卡片引用来源"（像正经科普）
•
加"截图分享"按钮（生成海报图，传播力直接起飞）
•
加"结构对比模式"（左右两个模型同步旋转）
•
加"手机端手势优化"（双指缩放、单指旋转）
十三、结尾
Codex 最震撼的点，不是写代码快。
是它把"想法 → UI → 可交互 → 能上线"这条路，变得像搭积木。
你只要盯住一件事：内容有没有意思。
想做哪个 3D 科普主题？DNA、细胞、病毒、太阳系、化学分子？你给我一个方向，我可以把提示词和项目结构按你的主题定制到能直接开工。
相关标签：#UI设计 #前端开发 #Codex #Three.js #提示词技巧 #GPT Images 2 #3D可视化 #科学科普App #Vite #部署上线