基于ThreeJs Heart animation 动画
基于ThreeJs Heart animation 动画
效果
https://bilibiliou.github.io/assets/download/animations/heart-animation.gif
思路
基于ThreeJs设置一个 PlaneGeometry ，加载图片 Texture，获取 PlaneGeometry 下的所有 vertices , 依照 心形函数
x = 16sin³(t)
y = 13Cos(t) - 5Cos(2t) - 2Cos(3t) - Cos(4t)
t ∈ [0,2π]将原有Mesh内的点集均匀的排布在心形的轨迹上，渲染函数
间补动画通过位移差进行计算
坑 和 Caveats
加载Texture
加载Texture 一定要在服务器环境下（推荐Http-server）
心形轨迹计算
var vdeg = ((2 * Math.PI) / _obj._geo.vertices.length) * _id
var _tx = 11 * 16 * Math.pow( Math.sin(vdeg) , 3);
var _ty = 11 * (13 * Math.cos( vdeg ) - 5 * Math.cos( 2 * vdeg ) - 2 * Math.cos( 3 * vdeg ) - Math.cos( 4 * vdeg ));众所周知，圆 === 2π 所以心形也是一样
这里将 2π除以点集数，等到每一份的度数，在根据公式计算出具体的位置（x,y）
注意，原有函数所绘制的心形太小，这里我给x和y都乘以了一个 11 的倍数
这个参数可以自行调整
速度算法
随机生成一个速度倍率 s
this._speedA = Math.random() * 18 * 0.01 + 0.08; // 我们称为sthis._currentV.x = ( this._currentV.x * this._speedB ) + ( this._trgV.x * this._speedA );新当前点位置 === 旧当前点位置 s + 目标点位置 （1 - s）
目标点 s > 旧当前位置 s
所以每次渲染实际上点的增量为 s * (目标点 - 当前旧位置)
原理
由于Three 的核心是 几何体（Geometry） + 材质（Material） => 网格模型（Mesh）
内置的 几何体模型 就包含了很多 Vector3 (三维向量) 本质就是点
这里我们可以在声明 Geometry 的时候通过设置 几何体分段来实现
this._geo = new THREE.PlaneGeometry( this._world._stageWidth, this._world._stageHeight, this._segW, this._segH );
// 这里的_segW 和 _segH 分别为 x轴的分段和y轴的分段
// 分别为 12 和 6
// 也就是说产生了 (12+1) * (6+1) 个 Vector3
// 我们所操控的 vertices 就是由这些 Vector3 来组成的 Three 会自动将 Vector3 连起来， 这个我们可以通过 设置 wireframe: true 来看到
这样如果我们将 PlaneGeometry 的透明度调低，就能够看到这个互相连线心形点集
如果想要心画的更密集，可以增加分段数，但是过多的分段数将会影响性能体验
感谢
感谢 homunculus （https://homunculus.jp/ ）株式会社的创意，有些东西，咱们真的暂时还没法超过人家
最后
本文章严禁用于商业行为，仅供学习参考