如何实现html做一个粒子漩涡

最新推荐文章于 2023-06-23 13:05:10 发布

lijinda666123

最新推荐文章于 2023-06-23 13:05:10 发布

阅读量1k

点赞数 5

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_47411368/article/details/105793218

版权

                ##如何实现html做一个粒子漩涡
     ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200427155432865.png)

在这里插入图片描述

复制以下源码就可以了

<html>
<head>
<meta charset="utf-8">
<title>李俊达</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

最低0.47元/天解锁文章

lijinda666123

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
如何实现html做一个粒子漩涡

##如何实现html做一个粒子漩涡 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200427155432865.png)复制以下源码就可以了<html><head><meta charset="utf-8"><title>李俊达</title&g...
复制链接

扫一扫