AI 生成 3D 模型网页，不只是将一张图变成“看起来立体”的画面。对教学、科普和产品讲解来说，真正有价值的是用户能够旋转模型、改变参数、拆开部件，并看到操作如何影响结构。只要把装置结构、要演示的变量和交互方式说清楚，AutoClaw 可以从需求拆解、代码实现一直推进到可运行的网页交付物。
先定义“要讲清什么”
三维网页最容易出现的问题，是模型看起来很复杂，但用户不知道自己要观察什么。因此需求应该先回答三个问题：哪些部件必须被看到，用户能够操作哪些参数，每次操作应该导致什么可观察变化。
这次镜头案例的学习目标很清楚：观察镜筒、镜片和六叶片光圈的相对位置；调节光圈，看到叶片和开口同步变化；再通过爆炸图和剖面图理解内部结构。这些目标比“做一个酷炫的 3D 镜头”更容易被实现和验收。
这次给 AutoClaw 什么
输入指定了一个完整可运行的 React 与 TypeScript 网页应用，镜头和六叶片光圈需要通过代码生成，不使用预制 3D 模型或预渲染动画。可见控件包括光圈滑块、旋转查看、爆炸视图、剖面视图和光线演示。
Build a complete, runnable React and TypeScript web app featuring an interactive 3D camera lens. Model the lens and a six-blade iris procedurally in code. Add an aperture slider, orbit controls, an exploded view, a cross-section view and visible light rays. All parts must remain aligned when switching views.
AutoClaw 做了什么
它先把任务拆成模型、状态和视图三部分。模型层生成镜筒、镜片和六片重叠光圈叶片；状态层让光圈滑块与叶片位置联动；视图层负责默认工作台、爆炸图和剖面图之间的切换。用户将滑块从 f/1.7 调到 f/22 时，六片叶片向内合拢，开口随之缩小。
最终交付了什么
本次交付包含一套 React 18 与 TypeScript 项目，以及一个约 731 KB 的单文件 HTML 演示版。项目文件适合后续继续开发，单文件版适合快速打开展示。已有功能包括 f/1.7 至 f/22 的光圈调节、六叶片光圈、Studio、Exploded 和 Section 三种视图，以及光线路径。
怎么复用到其他 3D 交互讲解
这种方法不只适合镜头。发动机、工业设备、人体器官、建筑构件和产品爆炸图都可以用类似方式。输入时请分别说明：必须出现的部件，部件之间的关系，用户可以操作的参数，参数变化后的视觉结果，以及需要交付源码还是单文件演示版。
如果要做教学用途，还可以继续让 AutoClaw 增加指引顺序、中文标注和练习题。不过这些是后续可扩展的需求，不应写成本次成品已经具备的功能。
发布前需要人工检查
首先检查模型的结构是否足够支撑讲解目标，特别是爆炸和复位后的位置是否一致。然后逐个操作滑块和视图按钮，确认数值、叶片和画面反馈同步。最后在不同屏幕上测试拖拽、触摸、文字遮挡和加载性能。对专业教学内容，结构名称和科学说明还应由领域人员审核。
常见问题
AI 生成 3D 模型网页需要提供 3D 模型吗？不一定。结构较规则的对象可以通过代码生成；追求高精度外形时，提供已授权模型通常更合适。重点是先说清精度和用途。
3D 交互网页适合哪些场景？适合用平面图难以解释的空间关系、部件层次和参数变化。如果用户只需要查看文字和图片，普通图文网页反而更轻。
