企业级AI Skill：快速生成3D汽车页附完整源码

将一段2686行的Three.js 3D汽车页面代码，封装成了可被任何AI智能体（Agent）直接使用的技能。文末会放出该技能的完整源码，方便参考学习。

为什么开发这个技能

此前在公司研发时，产品提出需求：制作可360°旋转、支持车漆修改、能打开车门查看内饰的3D车型页面。当时打开编辑器，对着Three.js的相机矩阵和PBR材质，花费了半小时仍无从下手，毕竟3D相关知识较为薄弱。

更棘手的是第二次需求：更换品牌和配色时，需要从一两千行代码中手动提取硬编码的颜色值，重复劳动令人疲惫，后续接手的人也难以维护。

随着国产AI模型能力提升，思路发生转变：不再手动编写3D代码，而是打造一个能生成3D代码的能力，将这份能力沉淀为可复用的技能，让AI智能体或同事只需一句话就能产出成品。这篇文章将详细介绍该技能，建议收藏。

技能的定位与特性

一句话定位：输入一句话或一份需求文档，即可生成可交互、带动画效果的品牌3D汽车落地页。

该技能生成的产物是零构建、自包含的单HTML文件，双击即可在浏览器中运行，通过CDN的importmap加载three@0.160.0版本。

生成的3D汽车具备以下特性：物理车漆效果、可开关的车门与尾门、可转动的轮毂、刹车点头动画、引擎抖动效果、大灯与氛围灯动画，还附带右侧的参数控制台。

整体架构：三层解耦

整套技能包含10个文件，共3264行代码，分为清晰三层：契约层（定义需要修改的内容）、基线层（实现的核心逻辑）、工具链层（生成与校验的流程）。

为什么选择「模板+注入」而非让智能体直接写代码？因为直接生成的代码不可复现，还会消耗大量计算资源。模板固化了最复杂、最脆弱的2686行3D逻辑，将不确定性集中到一份经过校验的JSON配置文件中，相同配置必然生成相同产物，这就是「高可用」的落地。

执行流程：6步闭环

从一句话需求到可交付页面，标准流程为6步，最后一步的浏览器实测是为了保证模型生成质量。以下是该技能的完整数据流程。

应用场景

• 车型发布/预售落地页：更换品牌名和主色，分钟级生成页面；

• 经销商交车演示：将初始状态设为点火、行进姿态，客户打开页面即可看到行驶中的汽车；

• 展会互动大屏：观众可自行拖转、改色、点击车门查看内饰，零学习成本；

• 品牌周边/战队应援页：贴花、配色、HUD文案均可修改，一套模板生成多种皮肤；

• 设计提案可视化：当客户要求更换颜色时，修改一个字段即可当场演示；

• 3D教学演示：作为程序化建模、PBR材质与lerp动画范式的教学案例；

• 无3D背景的Agent自动产出：将能力沉淀后，人人可调用，实现终极场景。

写在最后

回顾开发过程，制作技能的本质不是编写更多代码，而是将一次性劳动沉淀为可复用、可信任的能力。

基于该技能生成的完整3D模型视频可供参考，代码已在GitHub开源，感兴趣的可参考学习：https://github.com/MrXujiang/3D-Car-Skill

如果这篇文章对你有启发，欢迎留言交流。