用 Codex + GPT Images 2 从 UI 设计到上线：做一个可互动的 3D 生物结构科普 App

你有没有这种时刻：脑子里有个很酷的互动科普点子，但一想到要画 UI、写代码、调 3D、再部署上线……直接想躺。😵

Codex 这波真的狠。UI 可以直接走 GPT Images 2 出图，Codex 还能把“从项目骨架到上线”那堆杂活全包了。

这篇就带你做一个具体项目：

• 生成 3D 生物结构（比如 DNA 双螺旋、细胞器、蛋白结构）
• 做成一个 可旋转、可缩放、可点击讲解 的互动 App
• 最后 部署上线，发给朋友直接玩

目标很明确：你照着抄，能跑起来；你改改内容，能变成自己的作品。

你要准备什么

工具清单

• Codex（用来写代码、改代码、补功能、排错）
• GPT Images 2（用来出 UI 视觉稿/组件风格）
• 本地环境：Node.js 18+（建议 20+）
• 一个现代浏览器（Chrome/Edge）

技术路线（不绕弯）

• 前端：Vite + React（你也可以换 Vue，思路一样）
• 3D：Three.js
• 3D 模型格式：glTF / GLB（轻量，网页友好）
• 部署：Vercel / Netlify / GitHub Pages（三选一都行）

你会做出什么效果

一个网页 App，打开后：

• 中间是 3D 生物结构
• 鼠标拖拽旋转，滚轮缩放
• 点击结构的“热点点位”，右侧弹出解释卡片
• 顶部有结构切换（DNA / 细胞 / 蛋白质…）

场景就像那种博物馆互动屏：能玩、能学、不无聊。

Step A：把需求喂给 Codex（让它先搭骨架）

你别上来就说“给我写个 App”。那样它会写，但大概率不合你口味。

你要给一个“产品级”的需求单。下面这段直接复制，改几个名词就能用：

我要一个网页端互动科普 App，主题是“3D 生物结构探索”。技术栈：Vite + React + Three.js。

功能：
1) 首页展示一个 3D 模型（glb），支持拖拽旋转、滚轮缩放。
2) 右侧有信息面板：标题、简介、3 个知识点。
3) 支持切换 3 个模型（DNA 双螺旋、线粒体、蛋白质），切换时有加载状态。
4) 模型上支持 3 个热点（hotspot），点击热点会在信息面板显示对应解释。
5) 代码要结构清晰：components、scenes、data、utils。
6) 给我完整项目文件结构、关键文件代码、以及本地启动命令。

要求：
- 可运行，不要伪代码。
- 尽量用 @react-three/fiber + drei 简化 Three.js。
- 加一个简单的性能优化（比如按需渲染或降低像素比）。

你会得到：

• 项目目录
• 关键组件
• 数据结构
• 启动命令

接下来就进入“按图施工”。

Step B：用 GPT Images 2 出 UI 方向图（别纠结，先定风格）

UI 这事最耗人。你想的是“简洁高级”，落地就是“像个作业”。

把 UI 先用 GPT Images 2 定调，很省命。

1）直接让它出一张「网页截图风格」

提示词可以这样写（可复制）：

生成一张现代科普互动网页 App 的 UI 设计稿（desktop）。
布局：左侧大区域是 3D 画布，右侧是信息面板（标题、简介、知识点、热点说明）。
顶部有模型切换 Tabs（DNA、线粒体、蛋白质）。
风格：深色背景、轻拟物玻璃卡片（glassmorphism）、清晰的层级、专业科学感。
配色：深蓝/青色点缀。
需要包含：加载状态、按钮 hover 状态。
画面像真实产品截图，16:9。

你拿到图后别只看“好看”。你要做两件事：

• 把颜色、字体、间距记下来（或者让 Codex照着还原）
• 把组件拆出来：Tabs、InfoPanel、HotspotTooltip、Loading

2）让 Codex 把“图片”转成可落地的样式

你可以把图丢给 Codex（如果你的环境支持图片输入），然后说：

请根据这张 UI 设计稿，用 React + CSS（或 Tailwind）实现同款布局和风格。
要求：
- 3D 区域占 70%，右侧面板 30%
- 深色背景 + 玻璃卡片
- Tabs、按钮、加载骨架屏都做出来

UI 这块的关键不是“100% 还原”。关键是：

• 有层级
• 有一致性
• 别土

做到这三点就够了。

Step C：3D 场景搭建（用 r3f，别手搓 Three.js）

如果你以前被 Three.js 折磨过，这里给你一条活路：

• @react-three/fiber 负责把 Three 场景变成 React 组件
• @react-three/drei 提供现成轨道控制、加载器、环境光

让 Codex 按这个方向写。

关键依赖

npm i three @react-three/fiber @react-three/drei

你要的核心能力

• 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 小球 + 点击”。够稳。

数据结构建议

把热点写成数据，别写死在组件里：

// data/models.ts
export const MODELS = {
  dna: {
    name: "DNA 双螺旋",
    file: "/models/dna.glb",
    intro: "展示双螺旋结构与碱基对。",
    points: [
      "A-T、C-G 配对",
      "双螺旋的沟（大沟/小沟）",
      "复制与转录的结构基础"
    ],
    hotspots: [
      { id: "backbone", label: "磷酸骨架", position: [0.2, 0.5, 0.1], text: "外侧重复的磷酸-脱氧核糖骨架。" },
      { id: "basepair", label: "碱基对", position: [-0.3, 0.1, 0.2], text: "A-T 与 C-G 通过氢键配对。" },
      { id: "groove", label: "大沟/小沟", position: [0.0, -0.2, -0.1], text: "蛋白常在沟区域识别 DNA 序列。" }
    ]
  }
}

这样你换内容就像换 PPT。

Step E：3D 生物结构模型从哪来（别硬生成，先能用）

你说“生成 3D 生物结构”，现实里分两条路：

路线 1：直接用现成模型（最快上线）

• Sketchfab（注意授权）
• NIH/公开数据项目（有的提供 3D 资源）
• Blender 自己简单建（DNA 双螺旋其实不难）

导出成 .glb，丢进 public/models/。

路线 2：AI/程序生成（酷，但更费时间）

• DNA：可以用脚本生成螺旋曲线 + 实例化小球圆柱
• 蛋白：可以从 PDB 数据渲染（需要额外库）

建议你先用路线 1 把产品跑通。跑通的那一刻，你会非常上头。

Step F：性能别翻车（不然你朋友打开就卡）

3D App 最容易死在“我电脑很流畅，别人手机巨卡”。

给你几个很实用的控制点：

• 限制像素比：dpr={[1, 1.5]}
• 模型面数别太夸张（glb 体积能控制在 5–15MB 内就舒服）
• 加载时显示占位（别白屏）
• 需要时再渲染（静止时不每帧重绘，可选）

你可以直接让 Codex 加这一条：

给 Canvas 加 dpr 限制，并在模型加载时显示 Loader。模型加载失败要有错误提示。

Step G：一键部署上线（把“能跑”变成“能发链接”）

本地跑起来只是及格。发链接才叫作品。

方案 1：Vercel（省心）

• 推到 GitHub
• Vercel 导入项目
• 构建命令默认：npm run build
• 输出目录：Vite 默认 dist

方案 2：Netlify

同理，选择 Vite preset 就行。

方案 3：GitHub Pages

适合纯静态，但要处理 base 路径。让 Codex 帮你改 vite.config 更快。

直接可用的 Codex“迭代指令”（你就这样催它）

你做项目时，最爽的用法是把 Codex 当“带班工程师”。下面这些指令非常好使：

想加功能

在模型上增加 hover 高亮：鼠标移到 hotspot 球体上时变亮，并在鼠标旁显示 label。

想修 bug

我点击 hotspot 没反应。请你检查 raycaster 事件绑定、对象层级、pointer events，给出可运行修复方案。

想换 UI 风格

把整体 UI 改成更“科研仪表盘”风格：更强的网格背景、细线分割、右侧信息面板像控制台。
只改样式和布局，不要动 3D 逻辑。

想更像科普产品

给每个模型增加“引导模式”：按步骤高亮 3 个热点，用户点击“下一步”继续。
需要一个 Progress 指示器。

避坑清单（真的别踩）

• 模型太大：glb 50MB 那种，网页基本没法玩。先压到 15MB 内。
• 灯光瞎配：太暗像没加载，太亮像塑料。用 HDRI 环境光会舒服很多（drei 的 Environment）。
• 热点坐标不对：模型中心点、缩放比例、导出轴向很容易乱。坐标别靠猜，让 Codex 加一个“调试模式”把坐标打印出来。
• 交互冲突：OrbitControls 和点击热点经常抢事件。要处理 pointer events，必要时点击热点时临时禁用旋转。
• 没做加载态：白屏 3 秒，用户直接关掉。

你可以怎么扩展（把小玩具变成作品集）

• 加“知识卡片引用来源”（像正经科普）
• 加“截图分享”按钮（生成海报图，传播力直接起飞）
• 加“结构对比模式”（左右两个模型同步旋转）
• 加“手机端手势优化”（双指缩放、单指旋转）

结尾

Codex 最震撼的点，不是写代码快。

是它把“想法 → UI → 可交互 → 能上线”这条路，变得像搭积木。

你只要盯住一件事：内容有没有意思。

想做哪个 3D 科普主题？DNA、细胞、病毒、太阳系、化学分子？你给我一个方向，我可以把提示词和项目结构按你的主题定制到能直接开工。