java实现3D动态效果_js实现3D粒子酷炫动态旋转特效
js实现3D粒子酷炫动态旋转特效(效果比较酷炫,中途不仅有形态的变换,还有颜色的变化,希望大家能够喜欢)
代码实现过程中的静态截图
New Document
html,body{
margin:0px;
width:100%;
height:100%;
overflow:hidden;
background:#000;
}
#canvas{
position:absolute;
width:100%;
height:100%;
}
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
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
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
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-1&&point.y
}
}
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();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
java实现3D动态效果_js实现3D粒子酷炫动态旋转特效相关推荐
- Cocos Creator 3D 粒子系统初战,不要钱的酷炫火焰拿走不谢!
cocoscreator3.0终于上线了我们看看牛逼的特效 引擎下载地址:https://www.cocos.com/creator 先展示一下最终效果,然后再说废话 你听说过5毛钱特效吗? 我是个电 ...
- php 3d animation,基于three.js的酷炫Canvas 3D线条动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效 ...
- 2023跨年烟花3D最炫烟花,html最酷炫动态烟花源码分享,点击即可直接运行
- Java有趣的小功能_Java8 中有趣酷炫的小技巧你用到了那些
执行注释 大多数开发人员认为 注释 永远不会在程序中执行,并用于帮助代码理解.但是,它们却 可以被执行:public class Main{ public static void main(Strin ...
- vue中使用动画vue-particles实现背景粒子酷炫效果
参考官网:https://vue-particles.netlify.com/ 安装插件 npm install vue-particles --save-dev 在main.js中引入 import ...
- cocos creator粒子不变色_Cocos Creator 3D 粒子系统初战: 不要钱的酷炫火焰拿走不谢!...
原标题:Cocos Creator 3D 粒子系统初战: 不要钱的酷炫火焰拿走不谢! 五维:技术经理, 10年编程经验, 专注游戏领域,不断进击财富自由.分享实用的教程.经验.源码.心得! 先展示一下 ...
- JAVA三维可视化组件:Matplot 3D for JAVA(V2.0) 发布 欢迎使用JAVA平台 类似 Python 的 matplotlib
目录 概述 V3.0介绍 V4.0介绍 组件下载及项目地址: V2.0版本主要改进: 概述 本人独立研发的一款JAVA平台可视化组件:Matplot3D for JAVA(V2.0) .基于JAVA ...
- 长远发展java还是cocos_聊聊 Cocos Creator 3D 的未来
Hi,各位开发者,很高兴跟大家见面.在我们发布了 Cocos Creator 3D 之后,得到了许多积极的反馈和建议,在此真诚地感谢大家的支持! 从去年十月份 Cocos Creator 3D 诞生 ...
- java 投影转换算法_java – 如何将3D点转换为2D透视投影?
我看到这个问题有点老了,但我决定给那些谁通过搜索找到这个问题的答案. 现在表示2D / 3D变换的标准方式是通过使用齐次坐标. [x,y,w]表示2D,[x,y,z,w]表示3D.由于在3D和翻译中有 ...
最新文章
- 10篇论文带你入门深度学习图像分类(附下载)
- 揭秘星际2人工智能AlphaStar:DeepMind科学家回应一切
- 回归ASP,学习ADO,熟悉VBScript
- Aptana 安装jQuery库 智能提示
- python深拷贝和浅拷贝的使用场景_深拷贝、浅拷贝的理解与使用场景
- 项目: 用c++写一个养成类的游戏【QQ宠物】
- Android210更新2---支持喇叭
- 分支管理---创建与合并分支
- openshift_云上的播放框架变得简单:Openshift模块
- 使用Stream API的类Java产量
- 安卓流行布局开源库_如何使用流行度在开源库之间进行选择
- Spark Structured SQL : JDBC写入Oracle
- MyEclipse用(JDBC)连接SQL出现的问题~
- html开发列表搜索,前端实例练习 - 可搜索列表
- android应用程序优化之布局优化
- 项目进度管理工具——甘特图
- STM32_ADC模数转换的基本原理
- C#控制定位Word光标移动到任意行或者最后一行,取得光标位置等操作
- java+jsp+mysql实现学习资源推荐系统LearningResourceRS 个性化推荐系统 个性化学习网站推荐系统 协同过滤推荐算法 SSH(Spring+Struts+Hiber)开发框架
- 江在川上曰:webpack前端工程化