网页 3D 动画：Spline 中的塔和鸽子

用鸟和建筑打造网站互动3D动画

设计总监打造了一个包含优化后的斯大林时代塔楼模型和通过神经网络生成的动画鸽子的3D场景。手动重拓扑将建筑多边形数量从40万降至1.7万，鸽子模型从150万降至仅1000个。在Spline中集成飞行路径与骨骼动画，实现流畅交互，同时避免浏览器过载。

优化建筑模型

原始斯大林风格塔楼模型包含402,383个多边形——这是高精度工程建模中常见的细节水平，涵盖立面、徽章和星形装饰。由于需要精确的几何控制，自动优化不可行。在Blender中，采用顶点吸附技术：将长方体附着于关键点，并手动沿轮廓描边。

对称性使工作量减半——仅需构建四分之一立面并镜像复制。最终多边形数为17,693。核心结构简化，但立面细节得以保留。在Spline中，模型转换为可调色、密度和粒子大小的点云。

网格对比显示差异：原模型密集，优化版则在简单曲面上使用大面片，显著降低复杂度。

鸽子模型生成与重拓扑

鸽子模型使用Tripo生成，提示词为“展开翅膀的城市鸟类”。结果是一个150万面的模型，存在缺陷：喙部有凸起，腿部歪斜。在Blender中进行手动重拓扑，包括轮廓勾勒、比例修正和多余体积清理。

为动画做准备：调整腿部位置以支持运动，对齐喙部。多边形数量减少超过1000倍，降至1,284个，足以满足小屏幕对象需求。重拓扑流程：高精度基础 → 低精度表面，保留轮廓形态。

基于真实参考的骨骼动画

骨架由模型内部的三角形骨骼构成，呈对称结构（仅建一半后镜像）。在Blender中将几何体绑定到骨骼：旋转骨骼即可带动网格变形。

参考来源：YouTube慢动作视频中的鸽子——起飞时拍打翅膀、腿部伸展、下降过程。着陆动画：设定目标平面 + 关键帧控制。

翅膀折叠简化处理：采用缩放而非逐羽动画，因远距离观察无需细节。微动画包括：

• 尾羽：沿骨骼上下摆动。
• 头部：旋转动作。
• 抓痒：翅膀抬起 + 头部移动。
• 次要动作：起飞前蹲伏、尾巴抽动。

微动画与网站集成

鸽子以三段短片形式呈现（抵达、着陆、起飞），嵌入一个由JavaScript控制的小型可移动方块中。Logo适配测试：将设计导入Blender进行表面微调。

在Spline中工作：轨迹与帧率

从Blender导出时帧率为24fps。在Spline中：采用条纹风格的鸽子，飞行路径为偏心圆，营造自然运动感。相机设置：拉远 + 居中，扩大视野范围。

挑战：

• 帧率不固定：高性能电脑可达24+，低端设备则更低 → 翅膀拍打出现不同步。
• 动画重置：通过保持元素始终在屏幕上最小化影响。

建筑随鼠标移动而旋转；背面多边形已恢复。

用于网页3D的工具与工作流

• Blender：建模、绑定、动画制作。
• Tripo：生成初始模型。
• Spline：场景搭建、交互设计、点云处理。
• After Effects：制作2D动画用于视频输出。

核心要点：

• 手动重拓扑大幅降低负载，同时保留轮廓清晰度。
• 对称建模效率提升四倍。
• 慢动作参考是实现真实骨骼动画的关键。
• Spline需技巧应对：相机角度定位、飞行轨迹设计。
• 24fps + 微动画在极小文件体积下实现生动效果。

整体流程：生成 → 重拓扑 → 绑定 → 动画 → 导出 → Spline。

— Editorial Team