月薪3万程序员多强?300行代码写超震撼3D旋转特效

400 阅读2分钟

问:程序员闲着没事干的时候会干什么? 答:写代码吖~ 这是今天早上和部门一个男性程序员之间的真实对话,没有逛街,没有美食,没有煲剧,小声逼逼:怪不得还没女朋友~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(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();

PS:由于代码太长,所以只展示部分JavaScript代码,需要的朋友可以关注下面福利区自助领取完整源码。

福利区:

关注公众号“蝌蚪前端”回复“源码”,自助领取3D旋转源码完整版。

分享下我总结的一些干货,我自己是一名从事了5年web前端开发工程师,辞职目前在做线上教育讲师,整理了一份最适合2019年web前端学习的干货,包括基础+资料+视频,都是免费的,在这里相信有许多想要学习web前端的同学,加QQ群:931661106