效果展示：你可以玩一天

源码展示：

<!DOCTYPE >
<html>
<head><title> canvas 实现3d特效 </title><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>

算法决定未来

canvas实现2019最酷炫3D特效相关推荐

ztext - 简单几行代码创建酷炫 3D 特效文字的开源 JS 库
把网页上的文字变成酷炫的 3D 风格,还能制作旋转动效,有了 ztext.js,只需要几行代码. ztext 能做什么 ztext.js 是一个能把常规的平面文字变成 3D 样式的前端开源代码库,让开 ...
html5 canvas酷炫3D背景打开动画特效
html5 canvas酷炫3D背景打开动画特效点击跳转到演示地址点击进入资源下载地址
华丽大气酷炫光斑特效LOGO展示PR片头模板
华丽大气Premiere酷炫光斑特效LOGO展示PR片头模板,散景视觉效果和玻璃光反射以及梦幻般的粒子.水晶和优雅的钟声,为您的顶级品牌营造出积极的形象! 非常简单的背景颜色选择以匹配您的logo. ...
unity 彩带粒子_Unity粒子系统插件，打造酷炫魔幻特效
原标题:Unity粒子系统插件,打造酷炫魔幻特效儿时的你是否也会幻想自己拥有超能力,能召唤各种水光火电或是操纵世间万物?现在的我们已经不需要幻想了,因为游戏就能满足所有的这些或天真或童趣的想法.而作 ...
鼠标图标怎么自定义_酷鱼魔鼠——给鼠标添加酷炫的特效
酷鱼魔鼠是由酷鱼软件开发的一款非常有趣的鼠标特效软件.软件可以在你移动或者点击鼠标的时候,展示非常酷炫华丽的鼠标移动轨迹和点击特效.软件提供了非常多的鼠标动作特效,可以自定义设置鼠标移动.按下.双击. ...
java水果爆炸动画_5分钟快速实现Android爆炸破碎酷炫动画特效的示例
这个破碎动画,是一种类似小米系统删除应用时的爆炸破碎效果的动画. 效果图展示先来看下是怎样的动效,要是感觉不是理想的学习目标,就跳过,避免浪费大家的时间.�� 一行代码即可调用该动画 new Exp ...
用Three.js打造酷炫3D个人网站（含源码）
引言个人网站是程序员的第二张简历.如果你有酷炫的个人网页,面试官对你的好感度会蹭蹭蹭往上涨. 在疫情隔离期间,我用Three.js和Ammo.js制作了一个可交互的3D个人网页. 在线预览地址: w ...
少了五毛钱不卖的酷炫火焰特效！3D粒子哦！
先展示一下最终效果,然后再逼逼最终效果后边图片挺多的,使用流量看文章的,祝好运. 你听说过5毛钱特效吗? 我是个电视迷,在读大学的时候,经常通宵刷剧. 往往有很多引人入胜的情节,搭配着粗制滥造的特 ...
10000字详解，炫酷的3D特效Shader是如何炼成的
一.花花世界,从本文开始本文真正的标题为:<Cocos Shader入门基础五:是纹理给了你这个花花世界> 不瞒大家说,终于要续写这个系列了,麒麟子想想都激动. 时光飞逝,离上一篇文章 ...

canvas实现2019最酷炫3D特效

效果展示：你可以玩一天

源码展示：

canvas实现2019最酷炫3D特效相关推荐

最新文章

热门文章

canvas实现2019最酷炫3D特效

效果展示： 你可以玩一天

源码展示：

canvas实现2019最酷炫3D特效相关推荐

最新文章

热门文章

效果展示：你可以玩一天