← 返回全部文章
实验 / 3D · 2026-08-10

没做过游戏，我用 AI 把一个页面改成了 3D

8 min read

我没有游戏开发经验。

但我手里有一个二维小页面：像素风铁匠铺、几个会说话的 NPC，以及一个“能不能把它变成真 3D”的念头。

最后，从决定开始到基本可用，只用了几个小时。

先看结果：打开 3D NPC 实验。

它当然不是游戏，也远谈不上完整的 3D 世界。但它能旋转视角，模型有真实空间关系，NPC 会冒气泡、轻微转头。对一个完全没做过游戏的人来说，已经足够证明一件事：3D 的门槛正在快速下降。

第一步不是建模，是准备一张适合建模的图

我最初想直接复用旧素材，效果很差。

原因很简单：图生 3D 不是“看懂画面后自由发挥”，它需要从单张图片里恢复形体。像素图分辨率低、轮廓断裂、远近关系不明确，模型只能猜。猜得越多，结构越容易崩。

后来重新生成了一套低多边形参考图，并明确告诉图片模型：这些图会用于后续图生 3D。

有效的参考图有几个共同点：

  • 主体完整，不裁切；
  • 背景干净，不和主体粘连；
  • 光照均匀，避免大片死黑或过曝；
  • 视角能同时看见正面、侧面和厚度；
  • 结构不要过细，轮廓比纹理更重要；
  • 人物和道具之间不要互相遮挡。

这一步比“提示词写得多华丽”重要得多。二维图如果没有把结构交代清楚，后面的 3D 模型只能在错误上继续加工。

图生 3D 已经够完成一个 MVP

这次我使用 Hyper3D 把参考图转换成模型。它允许在生成过程中继续追加提示词，并支持导出常见 3D 格式。

实际效果比预期好。角色的衣服、工具和大体比例都能保留下来；场景模型也能恢复主要空间结构。

但它并不神奇。单图生成最容易丢的是：

  • 看不见的背面；
  • 被遮挡的连接关系；
  • 细小手指和面部；
  • 薄片、绳索和复杂镂空；
  • 人物关节与可动画骨骼。

因此，图生 3D 很适合快速做静态资产和风格化模型，却不能默认得到一套可以直接进入游戏生产的资产。

Three.js 让网页直接承载 3D

前端展示反而是最简单的一段。

页面只需要加载几个 GLB 模型：

  • 一个铁匠铺场景；
  • 三个 NPC；
  • 环境光与方向光；
  • OrbitControls 控制视角。

Three.js 的 GLTFLoader 可以直接加载 GLB，浏览器本身就是运行容器，不需要额外安装客户端。

真正花时间的并不是 API，而是空间关系：

  • 人物被工作台挡住；
  • 模型原点不一致；
  • 三个角色比例不同；
  • 朝向与相机不匹配；
  • 相机转动后人物像飘在空中；
  • 嵌入小窗口后，默认视角看不清重点。

这些问题都不高级，却必须逐个看、逐个调。3D 页面与普通页面最大的区别，是你不能只看 CSS 盒模型，还要同时管理位置、旋转、缩放、相机和光照。

T-Pose 是捷径，也是坑

生成人物参考图时，我一度要求使用 T-Pose，也就是人物双臂水平张开的标准姿势。

这样做的理由很合理：T-Pose 便于后续绑定骨骼和制作动画。

问题在于，图生 3D 默认生成的是没有骨骼的静态网格。如果后续自动绑骨失败，页面里就会站着几个永远张开双臂的人。

我尝试过自动绑定工具，也尝试过手动处理。现实很直接：自动识别会受模型结构影响，手动绑骨又需要真正的 3D 基础。为了一个 MVP 在这里继续消耗并不划算。

最后的解决办法并不优雅，但有效：重新生成自然站立姿势的角色。

这是整个实验里最重要的取舍。不是每个技术问题都必须正面打穿。先问自己：当前目标真的需要它吗？

模型压缩不是优化项，是上线前提

模型生成时我选择了高精度，结果单个 GLB 接近 100 MB。

本地打开当然没问题，一放到网页上就不现实。首屏加载一个 100 MB 模型，用户在看到内容之前已经离开了。

我使用 gltf-transform 做了三件事：

  1. 减少网格面数；
  2. 把贴图转成 WebP，并限制最大尺寸；
  3. 使用 Meshopt 或 Draco 压缩几何数据。

低多边形模型本来就不依赖极高网格精度，压缩后每个模型可以控制在几 MB，肉眼差异很小。

这次个人主页里的环形飞船也用了同样思路：原模型约 35 MB，真正的大头是两张 4K PNG 贴图。把网格减半、贴图降到 2K WebP，再做几何压缩后，最终模型约 1.5 MB。

先测清楚体积来自哪里，再决定减面还是压贴图，比套一个固定压缩比例可靠得多。

让角色“活着”，不一定需要复杂动画

没有骨骼动画，不代表页面只能完全静止。

我最后加了几个成本很低的细节：

  • NPC 说话时，在头顶显示小气泡；
  • 角色轻微朝向镜头；
  • 用小幅正弦变化模拟摇头；
  • 随机触发独白，但控制最短间隔；
  • 小窗口里默认收起控制面板。

这些动作都很克制。它们不负责展示技术，只负责让用户感到“这个角色还活着”。

沉浸感经常来自很多低成本信号，而不是一套昂贵的完整动画系统。

几个小时能完成，是因为没有追求完美

这次实验能快速跑起来，依赖四件事：

  1. 图片模型能生成适合建模的干净参考图；
  2. 图生 3D 已经足够承担风格化静态资产；
  3. Three.js 能直接在网页里加载 GLB；
  4. glTF 工具链能把模型压到适合网络分发的体积。

更重要的是，我没有把“做一个 3D 页面”偷换成“学会完整游戏开发”。

先确定想验证什么，再只补齐完成验证所需的能力。MVP 不是为粗糙找借口，而是拒绝让暂时不重要的问题拖死真正重要的目标。