问：程序员闲着没事干的时候会干什么？
答：写代码吖~
这是今天早上和部门一个男性程序员之间的真实对话，没有逛街，没有美食，没有煲剧，小声逼逼：怪不得还没女朋友~zzzzzzz
不过确实有一些程序员确实以码代码为乐，闲着没事干的时候，会写一些好玩的，好看的代码锻炼自己能力的同时，让自己开心，今天分享的这个3D旋转特效就是一个国外的程序员小哥哥闲时之作，看起来确实让人非常震撼！下面就和大家来分享下这个特效和源码。
3D旋转特效
由于不能上传视频所以只上传了图片，有点不清晰，用浏览器打开的时候超级震撼，配上点背景音乐，简直不属于好莱坞特效，也特别像《数码宝贝》里面超进化的样子！
3D旋转特效源码
function spawnParticle(vars){
var p,ls;
pt={};
p=Math.PI2Math.random();
ls=Math.sqrt(Math.random()vars.distributionRadius);
pt.x=Math.sin§ls;
pt.y=-vars.vortexHeight/2;
pt.vy=vars.initV/20+Math.random()vars.initV;
pt.z=Math.cos§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();
PS：由于代码太长，所以只展示部分JavaScript代码，需要的朋友可以关注下面福利区自助领取完整源码。
福利区：
关注公众号“蝌蚪前端”回复“源码”，自助领取3D旋转源码完整版。
分享下我总结的一些干货，我自己是一名从事了5年web前端开发工程师，辞职目前在做线上教育讲师，整理了一份最适合2019年web前端学习的干货，包括基础+资料+视频，都是免费的，在这里相信有许多想要学习web前端的同学，加QQ群：931661106