火遍抖音的3D旋转特效

火遍抖音的3D旋转特效代码前端代码实现：

3d旋转特效.html                                                                                 0000644 0000764 0000765 00000015444 13577153703 014745  0                                                                                                    ustar   www                             www                                                                                                                                                                                                                    <!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>

效果图：
点击查看效果

有问题欢迎小伙伴留言！！！

火遍抖音的3D旋转特效相关推荐

抖音html 3d旋转扩大图片数量,抖音怎么上传高清照片抖音多张图片怎么上传
据了解,一键发布和分享功能早在今年3月开始陆续上线,目前除了各种视频工具类应用外,还覆盖了超过200个硬件拍摄设备,游戏类和电商类等应用的接入. 此外,抖音还将会积极的与传统媒体合作,为传统媒体提供系 ...
抖音html 3d旋转扩大图片数量,抖音短视频，超详细的三合一封面图制作实操方法...
我们平时在抖音看电影的时候,如果你仔细观察,你会发现大部分做电影解说的抖音号,个人主页视频作品的封面都是比较凌乱.不统一.有时候看着很难受,非常影响用户体验,关注你的粉丝想找相关的电影也很困难.比如下 ...
火遍抖音的八卦时钟matlab源代码来了
在浏览抖音的时候看见一款名叫"八卦时钟"的视频,看起来很炫酷,于是小编决定亲自动手采用matlab来实现. 实现原理并不难,要求相应的年.月.日.星期.时.分和秒能跟随本地时间实时 ...
【Turtle合集】火遍抖音的五款魔法阵终于被我找到了（初代萌王，童年的小樱回来了）
导语小编在昨天看了一个非常好玩的充电器,就是魔法阵充电器.这种感觉,完全是满满的中二气息啊.魔法阵开启!哈哈哈(感觉有点儿幼稚,但是还挺有趣的) 魔法阵一直都出现在小说.动漫.电影.电视剧 ...
视频教程-一夫AE视频教程After EffectsCC 2018零基础入门抖音快手影视后期制作特效教学课程-After Effects（AE）
一夫AE视频教程After EffectsCC 2018零基础入门抖音快手影视后期制作特效教学课程中国电商服务联盟品牌讲师.中国国际互联网节品牌顾问. 12年视觉设计经验,5年视觉讲师经验.电商品牌 ...
用python+pillow模块实现抖音晃眼睛的特效，图像处理之路（附源码）
前言利用Python实现抖音晃眼睛的特效,让我们愉快地开始吧~ 开发工具 Python版本: 3.6.4 相关模块: pillow模块: numpy模块: argparse模块: 以及一些Pytho ...
ae手机版特效软件如何制作抖音热门视频飞天特效的教程
ae手机版特效软件如何制作抖音热门视频飞天特效的教程 ae手机版下载ae手机版特效软件下载ae手机版特效软件教程抖音热门视频上的飞天特效.腾云驾雾特效等等视频很多人看完感觉惊奇,问手机可以做吗,其实 ...
android 视频画面切割,抖音三屏黑白特效在哪里?安卓手机画面分割器将视频画面分割成黑白三屏的方法...
注意此教程方案是『安卓手机端教程方案』如果在手机端操作不方便或对眼睛不好也可以用另外电脑端的教程方案操作:抖音一屏变三屏视频[找更多方案] 今天要介绍的画面分割器,并不是解决同一点呢屏幕左右分屏的 ...
超火的抖音表情包制作教程
喜欢玩抖音的小伙伴都知道抖音聊天里有很多超火的GIF表情包,比如跳舞.蹦迪.疯狂甩头.穿衣服.要红包.撩人.抱胸生气等多种表情包在抖音聊天记录里面简直是层出不穷.大家知道抖音里这些超火的GIF表情包是 ...

火遍抖音的3D旋转特效

火遍抖音的3D旋转特效相关推荐

最新文章

热门文章