用 Three.js 模拟液体粉底扩散效果

Spreading Liquid with Three.js

在 Vue Fes Japan 2026 上，我分享了为日本化妆品品牌实现液体粉底扩散效果的幕后故事。这项技术并非依赖几何形变，而是通过 fluid simulation 生成 velocity map，结合 height map 记录液体厚度，并利用 alpha map 保留扩散痕迹。通过 fragment shader 计算法线并配合 Matcap 纹理渲染，实现了逼真的液体流动与残留视觉效果。虽然这不是物理上完全守恒的模拟，但通过视觉优先的调整，成功还原了手指拖动时液体隆起、流动并逐渐贴合表面的动态过程。