html3d粒子球,Canvas粒子系统：3D球体

前些日子在Codepen上看到了一个很惊艳的3D特效，一时惊叹，fork下来后，读了一下作者的源码，200多行，十分精简，但是内劲无穷。这里和大家分享一下作者的思路和一些基础的数学知识，

希望能给大家带来一点思考和启发，先来看一个效果：

动画生成过程

创建canvas，设置canvas中心点，变量初始化:function setParameters

生成指定数量的例子 同时完成例子的初始化(设置粒子x,y,z 以及增量vx,vy,vz)：function createParticles

初始化不同形状:function setupFigure

给click(立即切换到下一图形) 和 onmouseover(旋转), 绑定this 因为addEventListener 会把this 绑定在DOM上:function reconstructMethod

bindEvent 给 click(立即切换到下一图形) 和 onmouseover(旋转) 绑定事件

绘图:function drawFigure

其中涉及坐标旋转的代码可以参照之前3D旋转球的博文 有详细说明 这里不做赘述:如何用Canvas做一个3D球

重点 (绘图: drawFigure)

球体制作在之前的博文里提到过，不做赘述.

对于环形制作，看看源码里的环形公式：

createTorus : function(){

var theta = Math.random() * Math.PI * 2,

x = this.SCATTER_RADIUS + this.SCATTER_RADIUS / 6 * Math.cos(theta),

y = this.SCATTER_RADIUS / 6 * Math.sin(theta),

phi = Math.random() * Math.PI * 2;

return {

x : x * Math.cos(phi),

y : y,

z : x * Math.sin(phi),

hue : Math.round(phi / Math.PI * 30)

};

}

环形 x, y, z 推导 (x屏幕面的x方向， y屏幕面的y方向， z 垂直于屏幕面的方向)

环形的z轴是相对屏幕对称的。

圆锥制作，看看源码里的公式

createCone : function(){

var status = Math.random() > 1 / 3,

x,

y,

phi = Math.random() * Math.PI * 2,

rate = Math.tan(30 / 180 * Math.PI) / this.CONE_ASPECT_RATIO;

if(status){

y = this.SCATTER_RADIUS * (1 - Math.random() * 2);

x = (this.SCATTER_RADIUS - y) * rate;

}else{

y = -this.SCATTER_RADIUS;

x = this.SCATTER_RADIUS * 2 * rate * Math.random();

}

return {

x : x * Math.cos(phi),

y : y,

z : x * Math.sin(phi),

hue : Math.round(phi / Math.PI * 30)

};

},

这里 tana 被作者替换成 1.5 tan30， 这里我们可以理解为a 为30，宽高比为1.5。

花瓶形(不知道数学里叫什么) 看看源码里的公式

createVase : function(){

var theta = Math.random() * Math.PI,

// x = Math.abs(this.SCATTER_RADIUS * Math.cos(theta) / 2) + this.SCATTER_RADIUS / 8,

x = Math.abs(this.SCATTER_RADIUS * Math.cos(theta) / 2) + this.SCATTER_RADIUS / 8,

y = this.SCATTER_RADIUS * Math.cos(theta) * 1.2,

phi = Math.random() * Math.PI * 2;

return {

x : x * Math.cos(phi),

y : y,

z : x * Math.sin(phi),

hue : Math.round(phi / Math.PI * 30)

};

}

结语

Canvas 3D 坐标转换可谓基础，掌握好canvas坐标转换，配合图形的三维方程，可以让粒子做出美妙的运动，释放无穷尽的想象。

一名在校研究生，热爱前端，热爱英语，热爱摄影，喜欢一切能表达情绪的东西，喜欢黑色，喜欢秋天，喜欢孤独。。