用 GPT6 + Hyper3D MCP 搓 3D 个人网站,太夯了!(附教程)

这是苍何的第 597 篇原创!

大家好,我是苍何。

最近,我想给自己的个人网站换个玩法。

之前的网站比较常规,点开页面、浏览内容,看完就走了。

我花了一些时间,把个人网站变成了一颗可以到处逛的 3D 小星球,里面住着小精灵,还藏着等你发现的宝物。我给它起了个名字叫「苍何的小宇宙」,哈哈哈。

这个小宇宙的代码由 Codex 完成,主角和小精灵的 3D 模型则通过 Hyper3D MCP 生成,再由 Codex 接入网站。

先带大家逛一圈。进入这个小宇宙后,你可以操控「苍何」在星球上自由探索。

如果不知道往哪走,还可以呼叫小精灵,让它带你前往不同的房间。和它们互动,还能收到专属明信片。

每到达一个地标,你还能解锁一件对应的宝物,把探索路上的小收获装进口袋。

这些角色和道具是怎么做出来、又怎么放进网站的?下面展开讲讲。

1. 为什么接 Hyper3D MCP

做这个网站,我想把自己的形象和之前设计的小宠物都放进去。

参考图是有了,还得把它们做成能放进场景里的 3D 模型。

Hyper3D 也是我个人一直在使用的 AI 3D工具,生成质量十分在线,所以我第一时间想到可以使用 Hyper3D,刚好他们最近还推出了MCP,可以直接在 Codex 中使用,,十分方便。

而且经过我的对比,GPT-6 在制作 3D 人物角色模型上效果很难达到要求,接上 Hyper3D Rodin 这样的专业 3D 生成就很有必要,一方面可以快速批量生成可用的 3D 资产,另一方面还能接上大量的 token。

这样,做网站的过程中需要哪个角色,就能接着把它做出来、放进去,少了自己在几个工具之间来回搬模型的步骤。

有些模型还需要拆开处理,我也用到了 Hyper3D 的 BANG 拆件功能。后面做角色和收藏品时,再展开讲这一步。

2. 先把 Hyper3D MCP 接进 Codex

这次我用的是 Codex,模型选的是 GPT-6 Astra。

登录 /hyper3d.ai/workspace/rodin,右上角就能找到 MCP 入口。

点开后,复制弹窗里的配置提示词。

把这段提示词发给 Codex,让它完成配置,并按提示在浏览器里登录 Hyper3D、选择工作空间和完成 OAuth 授权。

java 复制代码
●●●Please configure Hyper3DMCP in the client I am using (Codex or ClaudeCode): server name hyper3d,StreamableHTTPURL https://api.hyper3d.com/api/mcp,withOAuth. Usethis client's configuration method, preserve other settings, and reuse or update any existing entry. Guide me through browser authorization, then verify the connection and list available tools. Tell me if a restart is needed.

配置完成后,我让 Codex 检查连接、列出可用工具。下面能看到生成模型、查询状态、获取结果和拆件等工具已经加载。

我按提示新开了一个会话,先用一个头盔测试:生成一个写实的中古骑士头盔,带磨损金属材质,用于游戏资产。

任务完成后,Codex 返回了模型结果页和 GLB 文件。点开看看,金属表面的划痕和磨损都做出来了。

到这里,从 Codex 发起生成、再取回模型的流程就跑通了。接下来,把它用到自己的小宇宙里。

3. 把「苍何」做成 3D 角色,再接进网站

网站原型这边,我先把个人介绍、作品和想展示的内容交给 Codex,让它规划星球和地标,搭出能移动、能触发互动的版本。

下面是接入正式模型前的效果。交互已经能跑,但人物还是基础占位模型。

要把里面的主角换成「苍何」,先准备好角色形象。

我把自己的形象图交给 Codex,让它整理成适合这个小宇宙的低多边形 Q 版风格。下面这一步得到的是参考图片,后面再用它生成 3D 模型。

有了参考图,再让 Codex 通过 Hyper3D MCP 调用 Rodin,生成对应的 3D 角色。

第一版模型出来后,整体形象已经对上了,但眼神有点呆,少了一些灵动感。转一圈看看效果:

我直接把问题告诉 Codex,让它继续调用 Hyper3D 调整,保留原来的造型和配色,把眼神优化一下。

第二版明显顺眼多了。下面是调整后的模型预览,可以和前面那版对照着看。

确认效果后,我让 Codex 把新版模型接进网站,替换原来的主角。

刚才还在模型预览里转圈的「苍何」,这就站到自己的小星球上了。

4. 批量生成小精灵,让它们住进不同区域

小精灵用的也是这套流程。它们的参考形象,来自我之前在 WeSight 里设计的小宠物。

先看准备好的参考图,机器人、水滴、火焰和小木箱,各有各的样子。

我把参考图和风格要求一起交给 Codex,让它通过 Hyper3D MCP 连续提交生成任务、查询进度,再把模型结果取回来。

生成后,还要逐个看看造型和画风是否协调。下面这段视频,就是这批小精灵的模型效果。

确认效果后,我让 Codex 把模型下载为 GLB 格式,再接入对应区域,配上靠近、对话和带路等互动。

为了实现最好的效果,我干脆将房屋建筑这些元素,也用 Hyper3D Rodin 重新生成更换了进去,给星球做了个整体升级。这样一来,小精灵就真正住进了这个小宇宙。下面能看到接入后的样子:

5. 用 BANG 拆件,继续处理模型

模型放进网站以后,还有一些细节需要处理。比如「苍何」刚接入时,移动起来像幽灵一样在星球表面漂移,脚底没有真实的行走动作。

这次我想把角色的不同部件分开处理,就用到了 Hyper3D 的 BANG 拆件功能。

BANG 可以把一个完整模型拆成多个独立部件,方便后续单独编辑、重组或使用。

我让 Codex 先通过 Hyper3D MCP 完成拆件,再把部件交给 Blender,进行骨骼绑定和行走动画制作。下面这段对话里,也能看到这两步的分工。

拆件后,头、躯干和四肢等部件可以分开处理。接着在 Blender 中完成绑定和动画,处理过程是这样的:

这一套处理下来,角色终于能贴着星球表面正常走路,不再一路漂移。

拆出来的部件也可以用到别的玩法里。这次我还用 BANG 的拆件能力制作了收藏品,把它们放进八个地标,让访客边逛边收集。

下面是收藏品和收集互动的效果:

最后再补上配乐和一些交互细节,这个小宇宙就慢慢完整了。

最后,从一个模型开始

这次做完,我觉得挺顺手的一段,就是把参考图交给 Codex,通过 Hyper3D 生成角色,再把模型接进网站。

眼神不满意,就提要求再改;需要一批小精灵,就按参考图继续生成;模型还要进一步处理,就拆件后接着编辑。

从想法到模型,再到网页里的角色,这条流程就这样一步步跑通了。

想试试,可以从一个模型开始:进入 Hyper 3D 工作台的 MCP 入口,复制配置提示词到 Codex,按提示完成授权,再生成你的第一个角色或道具。

目前我看 Hyper3D MCP 活动还有福利:免费领取 10 个 Credits,以及 1 美元体验 Creator 创作者会员首月。 具体领取资格与续费价格,以活动页面显示为准。

如果觉得有用,点个「赞」和「在看」支持一下。

相关推荐
cidy_981 小时前
05 — 分层架构设计思想
后端
虎虎(_ _)。゜zzZ1 小时前
SQLAlchemy入门教程
数据库·后端·python·sql·ai·sqlalchemy
右耳朵猫AI1 小时前
Go周刊2026W37 | Ebitengine 纯 Go 化、simd 重写 TurboPFor、json/v2 落地
后端·微服务·go
devpotato2 小时前
RPO与RTO:容灾的两个关键指标
java·后端
codigger2 小时前
程序员别再踩这 3 个坑——做了五年开发,我把能踩的坑全踩了一遍
后端·ai·程序员·架构·程序员职场
掘金挖土2 小时前
前端手摸手跑路之 AI 应用开发(六)
前端·后端
cidy_982 小时前
06 — Model 层:数据模型与操作
后端
TechLee2 小时前
一行代码防水平越权:用 PHP-Casbin 终结业务里的数据级 if-else
后端·php
步行cgn2 小时前
Spring 底层如何创建对象:反射机制与实例化策略
java·后端·spring