HTML实现3D漩涡代码

最新推荐文章于 2024-06-02 12:59:33 发布

AS761379193

最新推荐文章于 2024-06-02 12:59:33 发布

阅读量4.4k

点赞数 4

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/AS761379193/article/details/81666117

版权

<!doctype html>
<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(col){

        col += 0.000001;
        var r = parseInt((0.5+Math.sin(col)*0.5)*

最低0.47元/天解锁文章

AS761379193

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
3
评论
HTML实现3D漩涡代码

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;粒子涡旋&lt;/title&gt; &lt;style&gt; html,body{ margin:0px;
复制链接

扫一扫

专栏目录