js实现3D粒子酷炫动态旋转特效


Posted in Javascript onSeptember 13, 2020

js实现3D粒子酷炫动态旋转特效(效果比较酷炫,中途不仅有形态的变换,还有颜色的变化,希望大家能够喜欢)

代码实现过程中的静态截图

js实现3D粒子酷炫动态旋转特效

js实现3D粒子酷炫动态旋转特效

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <style>
 html,body{
 margin:0px;
 width:100%;
 height:100%;
 overflow:hidden;
 background:#000;
}

#canvas{
 position:absolute;
 width:100%;
 height:100%;
}

 </style>
 </HEAD>

 <BODY>
 <canvas id="canvas"></canvas>
 <script>
 function project3D(x,y,z,vars){

 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=Math.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=Math.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))/uc;
 var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
 if(!z)z=0.000000001;
 if(ua>0&&ua<1&&ub>0&&ub<1){
 return {
 x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,
 y:vars.cy+y/z*vars.scale,
 d:(x*x+y*y+z*z)
 };
 }else{
 return { d:-1 };
 }
}


function elevation(x,y,z){

 var dist = Math.sqrt(x*x+y*y+z*z);
 if(dist && z/dist>=-1 && z/dist <=1) return Math.acos(z / dist);
 return 0.00000001;
}


function rgb(col){

 col += 0.000001;
 var r = parseInt((0.5+Math.sin(col)*0.5)*16);
 var g = parseInt((0.5+Math.cos(col)*0.5)*16);
 var b = parseInt((0.5-Math.sin(col)*0.5)*16);
 return "#"+r.toString(16)+g.toString(16)+b.toString(16);
}


function interpolateColors(RGB1,RGB2,degree){
 
 var w2=degree;
 var w1=1-w2;
 return [w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]];
}


function rgbArray(col){

 col += 0.000001;
 var r = parseInt((0.5+Math.sin(col)*0.5)*256);
 var g = parseInt((0.5+Math.cos(col)*0.5)*256);
 var b = parseInt((0.5-Math.sin(col)*0.5)*256);
 return [r, g, b];
}


function colorString(arr){

 var r = parseInt(arr[0]);
 var g = parseInt(arr[1]);
 var b = parseInt(arr[2]);
 return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2);
}


function process(vars){


 if(vars.points.length<vars.initParticles) for(var i=0;i<5;++i) spawnParticle(vars);
 var p,d,t;
 
 p = Math.atan2(vars.camX, vars.camZ);
 d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
 d -= Math.sin(vars.frameNo / 80) / 25;
 t = Math.cos(vars.frameNo / 300) / 165;
 vars.camX = Math.sin(p + t) * d;
 vars.camZ = Math.cos(p + t) * d;
 vars.camY = -Math.sin(vars.frameNo / 220) * 15;
 vars.yaw = Math.PI + p + t;
 vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
 
 var t;
 for(var i=0;i<vars.points.length;++i){
 
 x=vars.points[i].x;
 y=vars.points[i].y;
 z=vars.points[i].z;
 d=Math.sqrt(x*x+z*z)/1.0075;
 t=.1/(1+d*d/5);
 p=Math.atan2(x,z)+t;
 vars.points[i].x=Math.sin(p)*d;
 vars.points[i].z=Math.cos(p)*d;
 vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2);
 if(vars.points[i].y>vars.vortexHeight/2 || d<.25){
 vars.points.splice(i,1);
 spawnParticle(vars);
 }
 }
}

function drawFloor(vars){
 
 var x,y,z,d,point,a;
 for (var i = -25; i <= 25; i += 1) {
 for (var j = -25; j <= 25; j += 1) {
 x = i*2;
 z = j*2;
 y = vars.floor;
 d = Math.sqrt(x * x + z * z);
 point = project3D(x, y-d*d/85, z, vars);
 if (point.d != -1) {
 size = 1 + 15000 / (1 + point.d);
 a = 0.15 - Math.pow(d / 50, 4) * 0.15;
 if (a > 0) {
  vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2));
  vars.ctx.globalAlpha = a;
  vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
 }
 }
 }
 } 
 vars.ctx.fillStyle = "#82f";
 for (var i = -25; i <= 25; i += 1) {
 for (var j = -25; j <= 25; j += 1) {
 x = i*2;
 z = j*2;
 y = -vars.floor;
 d = Math.sqrt(x * x + z * z);
 point = project3D(x, y+d*d/85, z, vars);
 if (point.d != -1) {
 size = 1 + 15000 / (1 + point.d);
 a = 0.15 - Math.pow(d / 50, 4) * 0.15;
 if (a > 0) {
  vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2));
  vars.ctx.globalAlpha = a;
  vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
 }
 }
 }
 } 
}

function sortFunction(a,b){
 return b.dist-a.dist;
}

function draw(vars){

 vars.ctx.globalAlpha=.15;
 vars.ctx.fillStyle="#000";
 vars.ctx.fillRect(0, 0, canvas.width, canvas.height);
 
 drawFloor(vars);
 
 var point,x,y,z,a;
 for(var i=0;i<vars.points.length;++i){
 x=vars.points[i].x;
 y=vars.points[i].y;
 z=vars.points[i].z;
 point=project3D(x,y,z,vars);
 if(point.d != -1){
 vars.points[i].dist=point.d;
 size=1+vars.points[i].radius/(1+point.d);
 d=Math.abs(vars.points[i].y);
 a = .8 - Math.pow(d / (vars.vortexHeight/2), 1000) * .8;
 vars.ctx.globalAlpha=a>=0&&a<=1?a:0;
 vars.ctx.fillStyle=rgb(vars.points[i].color);
 if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
 }
 }
 vars.points.sort(sortFunction);
}


function spawnParticle(vars){

 var p,ls;
 pt={};
 p=Math.PI*2*Math.random();
 ls=Math.sqrt(Math.random()*vars.distributionRadius);
 pt.x=Math.sin(p)*ls;
 pt.y=-vars.vortexHeight/2;
 pt.vy=vars.initV/20+Math.random()*vars.initV;
 pt.z=Math.cos(p)*ls;
 pt.radius=200+800*Math.random();
 pt.color=pt.radius/1000+vars.frameNo/250;
 vars.points.push(pt); 
}

function frame(vars) {

 if(vars === undefined){
 var vars={};
 vars.canvas = document.querySelector("canvas");
 vars.ctx = vars.canvas.getContext("2d");
 vars.canvas.width = document.body.clientWidth;
 vars.canvas.height = document.body.clientHeight;
 window.addEventListener("resize", function(){
 vars.canvas.width = document.body.clientWidth;
 vars.canvas.height = document.body.clientHeight;
 vars.cx=vars.canvas.width/2;
 vars.cy=vars.canvas.height/2;
 }, true);
 vars.frameNo=0;

 vars.camX = 0;
 vars.camY = 0;
 vars.camZ = -14;
 vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
 vars.yaw = 0;
 vars.cx=vars.canvas.width/2;
 vars.cy=vars.canvas.height/2;
 vars.bounding=10;
 vars.scale=500;
 vars.floor=26.5;

 vars.points=[];
 vars.initParticles=2000;
 vars.initV=.01;
 vars.distributionRadius=800;
 vars.vortexHeight=25;
 }

 vars.frameNo++;
 requestAnimationFrame(function() {
 frame(vars);
 });

 process(vars);
 draw(vars);
}
frame();

 </script>
 </BODY>
</HTML>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
原生JS实现九宫格抽奖
Sep 13 #Javascript
jQuery实现带进度条的轮播图
Sep 13 #jQuery
js+canvas实现画板功能
Sep 13 #Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 #jQuery
jQuery实现简单全选框
Sep 13 #jQuery
jQuery+ajax实现用户登录验证
Sep 13 #jQuery
js+audio实现音乐播放器
Sep 13 #Javascript
You might like
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
js实现简单进度条效果
2020/03/25 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
Python中操作MySQL入门实例
2015/02/08 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
对于Python深浅拷贝的理解
2019/07/29 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Python3 翻转二叉树的实现
2019/09/30 Python
python 变量初始化空列表的例子
2019/11/28 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
python列表返回重复数据的下标
2020/02/10 Python
python2和python3哪个使用率高
2020/06/23 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
公积金贷款承诺书
2015/04/30 职场文书
期中考试后的感想
2015/08/07 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
python实现简单反弹球游戏
2021/04/12 Python
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
详细了解MVC+proxy
2021/07/09 Java/Android