js实现3 d粒子酷炫动态旋转特效(效果比较酷炫,中途不仅有形态的变换,还有颜色的变化,希望大家能够喜欢)
代码实现过程中的静态截图
& lt; !DOCTYPE HTML公共”——//W3C//DTD HTML 4.0过渡//EN”比;
& lt; HTML>
& lt; HEAD>
& lt; TITLE>新文档& lt;/TITLE>
& lt;元NAME=胺⒌缁蹦谌?拔淖直嗉鳌北?
& lt;元名称=白髡摺蹦谌?氨?
& lt;元名称=肮丶省蹦谌?氨?
& lt;元名称=懊枋觥蹦谌?氨?
& lt; style>
html,身体{
保证金:0 px;
宽度:100%;
高度:100%;
溢出:隐藏;
背景:# 000;
}
#帆布{
位置:绝对的;
宽度:100%;
高度:100%;
}
& lt;/style>
& lt;/HEAD>
& lt; BODY>
& lt;帆布id=盎肌弊４? lt;/canvas>
& lt; script>
函数project3D (x, y, z, var) {
var p、d;
x -=vars.camX;
y -=vars.camY-8;
z -=vars.camZ;
p=Math.atan2 (x, z);
d=Math.sqrt (x * x + z * z);
x=sin (p-vars.yaw) * d;
z=Math.cos (p-vars.yaw) * d;
p=Math.atan2 (y, z);
d=Math.sqrt (y * y + z * z);
y=sin (p-vars.pitch) * d;
z=Math.cos (p-vars.pitch) * d;
var rx1=-1000;
var ry1=1;
var rx2=1000;
var ry2=1;
var rx3=0;
var ry3=0;
var rx4=x;
var ry4=z;
var uc=(ry4-ry3) * (rx2-rx1)——(rx4-rx3) * (ry2-ry1);
var ua=((rx4-rx3) * (ry1-ry3)——(ry4-ry3) * (rx1-rx3))/加州大学;
var乌兰巴托=((rx2-rx1) * (ry1-ry3)——(ry2-ry1) * (rx1-rx3))/加州大学;
如果(z) z=0.000000001;
如果(ua> 0,, ua<1,, ub> 0,, ub<1) {
返回{
x: vars.cx + (rx1 + ua * (rx2-rx1)) * vars.scale,
y: vars.cy + y/z * vars.scale,
d: (x * x + y * y + z * z)
};
其他}{
返回{d: 1};
}
}
函数高程(x, y, z) {
var dist=Math.sqrt (x * x + y * y + z * z);
如果(dist,,z/dist>=1,,z/dist & lt;=1)返回数学。这些“可信赖医疗组织”(z/dist);
返回0.00000001;
}
函数rgb (col) {
坳+=0.000001;
var r=方法(sin (col) * (0.5 + 0.5) * 16);
var g=方法((0.5 + Math.cos (col) * 0.5) * 16);
var b=方法((0.5 sin (col) * 0.5) * 16);
返回“#”+ r.toString (16) + g.toString (16) + b.toString (16);
}
函数interpolateColors (RGB1、RGB2、学位){
var w2=程度;
var w1=1-w2;
返回(w1 * RGB1 [0] + w2 * RGB2 [0], w1 * RGB1 [1] + w2 * RGB2 [1], w1 * RGB1 [2] + w2 * RGB2 [2]];
}
函数rgbArray (col) {
坳+=0.000001;
var r=方法(sin (col) * (0.5 + 0.5) * 256);
var g=方法((0.5 + Math.cos (col) * 0.5) * 256);
var b=方法((0.5 sin (col) * 0.5) * 256);
返回(r, g, b);
}
函数colorString (arr) {
var r=方法(arr [0]);
var g=方法(arr [1]);
var b=方法(arr [2]);
返回“#”+ (“0”+ r.toString (16))。片(2)+ (“0”+ g.toString (16))。片(2)+ (“0”+ b.toString (16))。片(2);
}
函数过程(var) {
如果(vars.points.length var。vortexHeight/2 | | d<.25) {
vars.points.splice(我,1);
spawnParticle (var);
}
}
}
函数drawFloor (var) {
变量x, y, z d点,一个;
(var=-25;我& lt;=25;我+=1){
(var j=-25;j & lt;=25;j +=1) {
x=我* 2;
z=j * 2;
y=vars.floor;
d=数学。√x * x + z * z);
点=project3D (x, y-d * d/85, z, var);
如果(点。d !=1) {
大?1 + 15000/(1 + point.d);=0.15,数学。战俘(d/50, 4) * 0.15;
如果(在0){
vars.ctx。fillStyle=colorString (interpolateColors (rgbArray (d/26-vars.frameNo/40),(0128年,32),5 + sin (d/6-vars.frameNo/8)/2));
vars.ctx。globalAlpha=一个;
vars.ctx.fillRect (point.x-size/2, point.y-size/2、尺寸、大小);
}
}
}
}
vars.ctx。fillStyle=" # 82 f”;
(var=-25;我& lt;=25;我+=1){
(var j=-25;j & lt;=25;j +=1) {
x=我* 2;
z=j * 2;
y=-vars.floor;
d=数学。√x * x + z * z);
点=project3D (x, y + d * d/85 z, var);
如果(点。d !=1) {
大?1 + 15000/(1 + point.d);=0.15,数学。战俘(d/50, 4) * 0.15;
如果(在0){
vars.ctx。fillStyle=colorString (interpolateColors (rgbArray (- d/26-vars.frameNo/40), [0128], 5 + sin (- d/6-vars.frameNo/8)/2));
vars.ctx。globalAlpha=一个;
vars.ctx.fillRect (point.x-size/2, point.y-size/2、尺寸、大小);
}
}
}
}
}
函数sortFunction (a, b) {
返回b.dist-a.dist;
}
函数绘制(var) {
vars.ctx.globalAlpha=含量;
vars.ctx.fillStyle=" # 000”;
vars.ctx。fillRect(0, 0,画布。宽度,canvas.height);
drawFloor (var);
var, x, y, z, a;
我(var=0; i< vars.points.length; + + i) {
x=vars.points[我]方式;
y=vars.points[我].y;
z=vars.points[我]还是z;
点=project3D (x, y, z, var);
如果(点。d !=1) {
vars.points[我].dist=point.d;
大?1 + vars.points[我].radius/(1 + point.d);
d=Math.abs (vars.points[我].y);
一个=? -数学。战俘(d/(vars.vortexHeight/2), 1000年)*。8;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
