项目简介
NAIWA 是一次以奶蛙为视觉主体的 3D 网页练习。它从一个很直接的动机开始：我喜欢这个角色，突然想拿它锻炼一下网页图形和交互技术，于是把一次模型练习继续做成了完整的滚动体验。
奶蛙角色并非由我创建。网页中的 3D 模型由我自行制作，参考的是网络公开图片。这里记录的是建模、渲染和交互实现，不主张角色原创，也不收录参考图链接。
体验结构
页面把内容拆成四个连续阶段：
ORIGIN：先展示完整模型，让用户建立形体和材质认知。SOFT：模型开始从实体转向粒子，表面细节逐步松开。STILL：粒子场进入相对稳定的状态，指针可以在模型和粒子之间形成局部反馈。RELEASE：粒子短暂收束后释放到更大的空间，滚动反向时能够回到前一状态。
滚动不是章节之间的跳转，而是把模型形态、背景场、标题、说明文字和声音触发放进同一条进度轴，让每个变化都有前后关系。
技术实现
模型以 FBX 资源载入，使用 MeshSurfaceSampler 从模型表面取得粒子初始位置。粒子数据写入 BufferGeometry，颜色和位移交给自定义 shader 在 GPU 侧处理，避免在每一帧用 JavaScript 逐粒子修改对象。
指针交互分成两层：模型阶段通过 raycast 判断指针是否真正命中实体；粒子阶段把命中点转换成局部影响范围，再将排斥、拖尾和回归效果传给 shader。模型 raycast 使用 three-mesh-bvh 加速，减少复杂网格下的命中成本。
性能策略以设备条件为输入。粒子数量不是固定常数，而是根据视口、设备类型和像素比选择预算：移动端约 12,000 个粒子，桌面端约 22,000 个粒子，同时限制高密度屏幕的渲染像素比。这样保留形态识别和交互反馈，也避免把计算量全部交给低性能设备。
声音只作为体验节点出现，不作为持续背景层。页面在用户主动交互后触发本地音频，并随滚动阶段和界面反馈保持克制，避免声音遮盖视觉叙事。
项目边界
这是一个个人技术练习和交互实验，不是奶蛙角色的原创设定，也不把网页中的模型、参考图片、音频或源代码作为公开资料分发。站点中的博客和技术库只讨论过程、原理和取舍。
关联内容：