文章摘要
创作者受AI建模行业案例启发,利用GPT-6 Astra、Meshy、Blender等工具,将原本静态的原创IP夕小瑶打造为网页端可手势交互的3D互动玩偶,不同手势可触发打招呼、走秀、旋转等对应动作。作者公开项目,还分步分享了完整制作流程供无建模基础的创作者参考,成品未来还可用于3D打印。

现在只要对着摄像头比个手势,就能让虚拟角色做出对应的动作——比耶就打招呼,点赞就走秀,画圈就能转身,这是我最近完成的小项目:把夕小瑶做成了可交互的3D网页玩偶。对着镜头比耶,她会抬手打招呼;竖起大拇指点赞,她就会自信地走秀;用食指在画面里画圈,她还会跟着旋转身体。

我把这个互动网页分享了出来,感兴趣的朋友可以体验:夕小瑶3D手势互动。初次加载3D模型可能需要一点时间,请耐心等待;建议使用带摄像头的电脑访问,点击页面右下角开启互动权限,允许调用摄像头后,将手放入画面中即可触发手势识别。

在此之前,夕小瑶一直是静态的视觉形象,出现在头像、封面和配图中,这次我希望让她从平面图片里“活”过来,成为可以和大家实时互动的3D角色。

这个想法的灵感来自近期的行业案例:不少创作者使用GPT-6 Astra操作Blender,无论是搭建城市场景还是制作游戏资产,都获得了不错的评价,其建模能力让人印象深刻。有创作者Hirokazu Yokohara分享过测试过程:将一张参考图片输入GPT-6 Astra后,工具可以直接在Blender中生成完整的城市背景,还能自动剪辑展示建模流程的视频。另一位创作者Tom Krcha则提交了一张蒸汽火车的设计图,要求在Blender中重建实体模型,最终工具成功生成了带有烟囱、锅炉、车轮和驾驶室的完整火车模型,清晰展示在软件窗口中。

受到这些案例的启发,我决定复刻这个流程,把自己的IP夕小瑶改造成Q版3D角色,嵌入网页中实现手势交互功能,让她可以走路、打招呼、跳舞和旋转。虽然整体思路清晰,但实际操作过程远比预想的复杂,整个项目几乎耗尽了我一周的使用额度,最终才完成了当前的版本。接下来我会详细分享整个制作流程,即使没有建模基础的朋友也可以跟着操作,我会把过程中遇到的问题和需要检查的细节都整理在内。

本次项目主要使用了三款工具:在Codex中调用GPT-6 Astra完成生图和代码处理;通过Meshy生成3D角色模型、完成贴图、绑定骨骼并挑选适配的动作;最后用Blender对模型进行检查和局部修整。

第一步:整理角色三视图与Q版风格参考素材

首先需要准备角色的三视图,即同一角色的正面、侧面和背面视图,确保形象统一。如果没有手绘基础也不用担心,可以将现有的角色图片提交给Codex,让工具自动补齐缺失的侧面和背面视角;如果还没有专属角色形象,可以先描述发型、服装、配色等细节,生成一张满意的正面图,再以此为基础补充另外两个视角的视图。

可以参考以下提示词来生成三视图:“请以这张人物图为基础,生成同一角色的正面、侧面和背面三视图,保持发型、五官、服装、配色和身体比例完全一致,不要在不同视角中重新设计角色形象,使用简洁背景确保全身完整可见,三个视角的尺寸和站姿尽量统一。”

我先整理了夕小瑶的原始IP三视图,作为基础素材。准备好基础三视图后,我额外准备了一张Q版风格的参考图,参考的是穿着绿色卫衣、背着书包的卡通角色,我看中了它大头小身的比例、圆润的面部线条和宽松的卫衣版型,希望夕小瑶的Q版形象也能贴合这些特征。

这两类素材的作用各不相同:夕小瑶的原始三视图用于保留角色的核心形象,而Q版参考图则用于明确我想要的比例和整体画风。因此我在生成时特别要求,必须保留夕小瑶的粉色头发、蓝色眼睛、猫耳、发饰和尾巴,不要直接套用参考图中的绿色衣服和白色头发。可以使用以下提示词:“图1是夕小瑶的三视图,图2是Q版风格参考,请保留图1中的粉色头发、蓝色眼睛、猫耳、发饰和尾巴,参考图2的大头小身比例、圆润画风和宽松卫衣版型,制作专属夕小瑶的Q版形象,请勿直接照搬图2的角色外观和配色。先生成完整的正面图,待我确认造型后,再制作统一风格的侧面和背面视图。”

经过调整确认后的Q版夕小瑶形象,保留了原IP的核心特征,同时贴合了Q版风格的设计要求。Q版造型确认后,再按照这个版本补充完整三个视角的视图。需要注意的是,AI生成的侧面和背面视图可能会和正面存在细微差异,生成完成后需要仔细对照检查尾巴、发夹、发丝和服装的细节是否统一。同时背景要尽量简洁,避免复杂道具或光影干扰角色的轮廓识别。

第二步:通过Meshy生成基础3D白模

这里先解释一下,我最初尝试直接让Codex在Blender中完成角色建模,但生成的形象和我想要的夕小瑶相差甚远,效果甚至有些出乎意料。之后我查阅了更多行业案例,发现这类工具在建筑场景的表现相对稳定,但在人物建模上很难达到预期效果,因此我调整了流程:先通过图片生成基础3D形象,再用Blender进行局部修整。

本次我选择的工具是Meshy,这是一款网页端的AI 3D建模工具,可以将文字描述或图片素材转换为可导出的3D模型。当然市场上还有其他同类工具可供选择,比如Tripo、腾讯旗下的混元Hyper3D等。最初我也曾尝试让Codex直接操作Meshy网站,但发现该过程耗时较长,且消耗了大量使用额度。因此我改为直接手动操作工具,实际流程并不复杂:打开网站进入工作区,上传第一步生成的三视图,记得勾选“多视图”和“拆分”两个选项。其中“拆分”选项的作用是将生成的模型的身体、衣服、配饰等部分拆分为独立网格,方便后续在Blender中单独调整各部件。

这一步生成的基础模型通常被称为“白模”,也就是还未上色的立体雏形,此时可以先关注模型的整体形状,颜色和细节纹理可以后续再处理。生成白模后不要只查看正面视角,需要拖动模型旋转查看各个角度:检查侧面的手臂是否和衣服粘连,背面的头发和尾巴是否存在变形,放大细节确认面部和手部的造型是否准确。我第一次生成的模型就出现了尾巴造型异常的问题,不过不必担心,只需在页面点击导出按钮,将生成的文件提交给Codex,让工具直接操作Blender进行修复即可。

第三步:使用Codex在Blender中修复模型细节

拿到基础白模后,Blender的工作就变得清晰:只需修复明显的造型瑕疵,保留已经符合要求的部分即可。让Codex操作Blender有两种常见方式:一种是直接通过软件界面手动操作,如同日常使用软件点击菜单、选择物体一样完成任务;另一种是通过MCP接口连接,让Codex直接调用Blender的工具功能并执行脚本。

MCP可以理解为两者之间的连接接口,在处理重复或批量任务时,程序化操作可以减少手动截图、查找按钮的流程,通常更适合这类建模工作,因此我推荐使用Blender MCP,不仅速度更快还能节省使用额度。首先需要在Codex中安装Blender MCP插件,然后将刚才从Meshy导出的模型文件地址提交给工具,按照要求进行修改。

以本次的尾巴修复为例,可以使用以下提示词:“导入我提交的模型文件,先另存为修复版本,仅对尾巴的尖刺、连接处和整体形状进行调整,保留面部、头发、服装和整体人物比例不变,完成后提供正面、侧面和背面的截图,并说明具体修改的位置。”经过修复后的白模正面和侧面造型都得到了明显改善,虽然整体过程耗时超过一个小时,但最终效果符合预期。

完成基础白模的修复后,接下来需要进行减面处理,在这之前先了解一个关键知识点:面数。面数指的是模型表面由大量小平面组成,三角面是其中最常见的一种。我最初在Meshy生成的白模拥有3,074,822个三角面,面数越多,模型的形状描述越精细,但同时也会增加后续处理和网页加载显示的负担。考虑到我的网页需要同时运行摄像头识别、手势检测和动画播放,不需要用极高的面数来体现所有细节。

因此只需要让Codex在完成修复后进行减面处理,将模型面数调整到适合网页交互的水平即可,可以使用以下提示词:“保留原始高面数模型,另外制作适配网页使用的减面版本,优先保留面部、手指、猫耳和尾巴的轮廓细节,完成后提供当前面数信息和前后对比图,并检查是否存在破洞、尖角、手指粘连或轮廓明显变形的问题。”

第四步:为模型添加贴图,还原夕小瑶的外观细节

完成模型结构修复和减面后,可以让Codex将修正减面后的模型重新导入Meshy,完成贴图处理。贴图是附着在白模表面的图像文件,可以用来表现角色的眼睛颜色、服装图案等细节,同时材质设置还能调整表面的反光效果,比如哑光质感或塑料亮面效果。

操作时选中修复完成的模型,进入贴图功能模块,使用第一步确认的角色形象图作为参考,生成贴图后仔细检查最终效果。我在Meshy中完成手动贴图后,重点检查了眼睛、眉毛和嘴巴的位置,同时旋转模型查看侧面和背面,确认头发和衣服之间没有出现颜色串色的问题——这类细节在正面视角中往往难以发现。

第五步:绑定骨骼并添加适配的动作

完成贴图后的模型还无法自主运动,接下来需要为角色绑定骨骼,也就是给模型安装可以活动的骨架结构。Meshy提供自动绑骨和预设动画功能,选中角色模型后进入绑骨或动画模块,按照界面提示确认骨架或定位点,完成后可以先预览几个预设动作,再选择符合角色风格的动画。

我为夕小瑶设置了基础跑步动画作为默认动作,除此之外还添加了自信走秀、挥手打招呼、跳舞和摆臂舞步等多种适配角色风格的动作。

第六步:导出GLB格式模型并搭建交互网页

当模型和动画都准备完成后,将文件下载到本地,提交给Codex进行网页端集成,本次使用的是GLB格式的3D模型文件。GLB格式可以将模型、材质、贴图和动画等所有内容整合到单个文件中,便于网页快速加载和使用。

在Meshy导出时选择GLB格式,确认需要的动画都包含在导出文件中,如果动画分为多个文件,需要将它们放在同一个文件夹中并保留原始文件名,方便Codex进行整理和调用。在开发网页项目时,需要了解核心技术栈:Three.js负责3D模型的渲染显示,MediaPipe用于提供手部识别的关键数据,而代码逻辑则决定了触发对应手势时播放哪段动画、调整模型的缩放和旋转参数。

可以使用以下提示词完成网页搭建:“使用我提交的GLB模型和动画文件,制作支持摄像头手势交互的网页,按照预设规则配置手势控制:每个手势对应唯一动作,待手势稳定后再触发切换,避免频繁误触发;默认播放自信走秀动画,食指画圈控制角色旋转,手势停止后模型平滑回正;页面需要提供开启和关闭互动的入口,并说明本地测试的打开方法。”

本次网页的背景设计采用了虚化的霓虹城市效果和倾斜的透明代码卡片,开启摄像头后会在角色后方添加动态连接线,切换动作时卡片内的代码内容也会同步变化,增强互动感。确认本地测试版本运行正常后,即可让Codex将项目部署到支持HTTPS的托管平台,我本次使用的是免费部署平台Netlify,可以在Codex中直接搜索该插件进行安装,部署完成后就可以将链接分享给其他用户体验了。

至此,夕小瑶终于从静态的图片形象,变成了可以在网页中行走、跳舞,还能通过手势控制旋转的3D互动玩偶。虽然过程中修复尾巴、调整动画花费了大量时间,也消耗了不少使用额度,但看到自己的IP真正“活”在屏幕中,依然充满了成就感。不仅如此,这个3D模型后续还可以用于3D打印,未来大家或许就能将屏幕里的夕小瑶实体化摆放在桌面上,想想都让人期待。如果你也有自己的原创IP,可以按照上述步骤尝试制作,文中整理了所有用到的工具和提示词,动手操作时可以随时查阅参考。

以上内容不代表本平台立场,仅供读者参考