从平面参考图到网页 3D 模型

问题定义

从平面参考图制作网页 3D 模型，目标不是复刻图片中的每个像素，而是提取足以支撑网页体验的形体、比例、材质和识别特征。对于需要后续粒子化的模型，还要额外考虑表面连续性、三角面分布和采样稳定性。

参考图来自网络公开图片。角色归属和原创性不属于本项目的技术范围，网页实现只把它作为练习对象使用，不公开参考链接或原始素材包。

从轮廓开始

建模前先确定三个层级的信息：

1. 轮廓：在小尺寸和低对比度下仍能认出的外形。
2. 结构：头部、四肢、眼睛和其他主要体块之间的比例关系。
3. 表面：颜色分区、粗糙度和少量能帮助阅读的材质差异。

网页展示通常会受到相机距离、屏幕尺寸和背景对比度影响。因此，轮廓和结构优先级高于隐藏面细节。模型如果只在近距离看起来精细，缩小到首屏之后反而会失去识别度，就不适合这个场景。

为运行时整理资产

网页运行时更关心以下条件：

• 坐标原点和朝向稳定，便于相机、旋转和滚动状态复用。
• 网格密度足够支撑轮廓，但不会让 raycast 和粒子采样失去可控性。
• 材质和纹理路径明确，载入失败时不会产生无法诊断的空白模型。
• 需要粒子化的表面尽量保持连续，避免粒子采样集中在少数高密度区域。

模型导出后先以实体形式检查，再检查不同尺寸视口下的构图。只有实体模型的比例、落点和旋转都稳定，后续粒子状态才有可靠的基准。

表面采样的意义

粒子不是凭空生成的点云。通过 MeshSurfaceSampler 从模型三角面表面采样，可以让粒子初始位置保留实体模型的外轮廓。采样过程中需要注意各个网格的面积差异：面积较大的表面如果没有合理权重，粒子会集中在局部，解构后形体会显得失真。

颜色可以从材质、纹理或预先计算的属性中取得。颜色不只是装饰，它帮助用户在粒子阶段继续识别原来的形体，因此需要保留主要色块之间的关系，而不是把所有粒子统一成单色。

适合网页的取舍

这类练习不需要把建模文件做成公开下载资源。更稳妥的发布边界是：云端只发布体验页面和过程说明，模型文件、参考图片、音频和项目源代码留在本地或受控的部署产物中。

最终判断标准也不是模型在建模软件里是否足够复杂，而是它能否稳定完成三件事：在首屏被认出，在粒子状态中保持轮廓，在不同设备上以合理成本完成交互。

相关项目：NAIWA / 奶蛙。