Html+Js 3D 龙卷风

最新推荐文章于 2024-06-21 17:36:28 发布
最新推荐文章于 2024-06-21 17:36:28 发布
阅读量5k 收藏 28
点赞数 13
分类专栏： Html Js
Html 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
Js
3 篇文章 0 订阅
订阅专栏

看到其他人发的，自己稍加自己的理解（做了部分注释）及少数修改，只为留作记忆，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>龙卷风</title>
    <style type="text/css">
                html,body {
            margin:0px;
            width:100%;
            height:100%;
            background:#000;
            overflow:hidden;
        }
        canvas{
            position:absolute;
            width:100%;
            height:100%;
        }
    </style>
    <script type="text/javascript">
        function rgbToString(rgb) {
            rgb += 0.000001;
            var r = parseInt((0.5 + Math.sin(rgb) * 0.5) * 16);
            var g = parseInt((0.5 + Math.cos(rgb) * 0.5) * 16);
            var b = parseInt((0.5 - Math.sin(rgb) * 0.5) * 16);
            return "#" + r.toString(16) + g.toString(16) + b.toString(16);
        }
        //获取rbg数组
        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 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 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);
        }
    </script>
</head>
<body>
    <canvas id="wind"></canvas>
    <script type="text/javascript">
        //获取点（x,y,z）与原点的线段与y轴形成的角度大小，特殊情况返回默认值0.00000001;
        function elevation(x, z, y) {
            var dist = Math.sqrt(x * x + y * y + z * z);//获取三维点（x,y,z）与原点距离长
            var num = y / dist;//三维空间的坐标（x,y,z）与原点的的线段和y轴形成的角度的余弦值
            if (dist && num >= -1 && num <= 1) return Math.acos(num);//获取num的反余弦值，即是上述的角度大小
            return 0.00000001;
        }
        //生成颗粒
        function createParticle(vars) {
            var pt = {};
            var p = Math.PI * 2 * Math.random();
            var 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.frameNumber / 250;
            vars.points.push(pt);
        }
        function project3D(x, y, z, vars) {
            x -= vars.camX;
            y -= vars.camY - 8;
            z -= vars.camZ;
            var p = Math.atan2(x, z);
            var 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 drawSomeFloor(vars, isFalse) {
            for (var i = -25; i <= 25; i++) {
                for (var j = -25; j <= 25; j++) {
                    var x = i * 2;
                    var z = j * 2;
                    var y = -vars.floor;
                    var d = Math.sqrt(x * x + z * z);
                    y = y + d * d / 50;//让上下背景产生弯曲感
                    if (isFalse) {
                        y = -y;
                    }
                    var point = project3D(x, y, z, vars);
                    if (point.d != -1) {

                        var rgb1, rgb2; var degree;
                        var size = 1 + 15000 / (1 + point.d);
                        var a = 0.15 - Math.pow(d / 50, 4) * 0.15;
                        if (a > 0) {
                            if (isFalse) {
                                rgb1 = rgbArray(d / 26 - vars.frameNumber / 40);
                                rgb2 = [0, 128, 32];
                                degree = .5 + Math.sin(d / 6 - vars.frameNumber / 8) / 2;
                            }
                            else {
                                rgb1 = rgbArray(-d / 26 - vars.frameNumber / 40);
                                rgb2 = [32, 0, 128];
                                degree = .5 + Math.sin(-d / 6 - vars.frameNumber / 8) / 2;
                            }
                            vars.context.fillStyle = colorString(interpolateColors(rgb1, rgb2, degree));//选色
                            vars.context.globalAlpha = a;//透明度
                            vars.context.fillRect(point.x - size / 2, point.y - size / 2, size, size);//用颜色涂满方框
                        }
                    }
                }
            }
        }
        //绘制背景效果
        function drawFloor(vars) {
            drawSomeFloor(vars, true);//下面背景
            vars.context.fillStyle = "#82f";
            drawSomeFloor(vars, false);//上面背景
        }
        function sortFunction(a, b) {
            return b.dist - a.dist;
        }
        //绘制颗粒
        function drawParticles(vars) {
            vars.context.globalAlpha = .15;
            vars.context.fillStyle = "#000";
            vars.context.fillRect(0, 0, vars.canvas.width, vars.canvas.height);
            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.context.globalAlpha = a >= 0 && a <= 1 ? a : 0;
                    vars.context.fillStyle = rgbToString(vars.points[i].color);
                    if (point.x > -1 && point.x < vars.canvas.width && point.y > -1 && point.y < vars.canvas.height)
                        vars.context.fillRect(point.x - size / 2, point.y - size / 2, size, size);
                }
            }
            vars.points.sort(sortFunction);
        }
        function process(vars) {
            if (vars.points.length < vars.MaxParticles)
                for (var i = 0; i < 5; i++) {
                    createParticle(vars);
                }
            var angle_xz = Math.atan2(vars.camX, vars.camZ)//camX/camZ的反正切值，即对应角度大小
            //也可： var angle_xz = Math.atan(vars.camX/vars.camZ)
            //xz页面上的斜边长
            var hypotenuse_xz = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
            hypotenuse_xz -= Math.sin(vars.frameNumber / 80) / 25;
            var t = Math.cos(vars.frameNumber / 300) / 165;
            vars.camX = Math.sin(angle_xz + t) * hypotenuse_xz;
            vars.camZ = Math.cos(angle_xz + t) * hypotenuse_xz;
            vars.camY = -Math.sin(vars.frameNumber / 220) * 15;
            vars.yaw = Math.PI + angle_xz + t;
            vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;

            for (var i = 0; i < vars.points.length; ++i) {
                var x = vars.points[i].x;
                var y = vars.points[i].y;
                var z = vars.points[i].z;
                var d = Math.sqrt(x * x + z * z) / 1.0075;
                var t = .1 / (1 + d * d / 5);
                var 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);
                    createParticle(vars);
                }
            }
        }
        //创建设置页面
        function createFrame() {
            var newVars = {};
            newVars.canvas = document.querySelector("canvas");//回文档中匹配指定 CSS 选择器的一个元素
            newVars.context = newVars.canvas.getContext("2d");
            //设置画布的高和宽
            newVars.canvas.width = document.body.clientWidth;
            newVars.canvas.height = document.body.clientHeight;
            newVars.cx = newVars.canvas.width / 2;
            newVars.cy = newVars.canvas.height / 2;
            //窗体高宽发生改变时，触发事件
            window.onresize = function () {
                //重新再次设置画布的高和宽
                newVars.canvas.width = document.body.clientWidth;
                newVars.canvas.height = document.body.clientHeight;
                newVars.cx = newVars.canvas.width / 2;
                newVars.cy = newVars.canvas.height / 2;
            }

            newVars.frameNumber = 0;
            newVars.camX = 0;
            newVars.camY = 0;
            newVars.camZ = -14;
            newVars.pitch = elevation(newVars.camX, newVars.camZ, newVars.camY) - Math.PI / 2;
            newVars.yaw = 0;
            newVars.bounding = 10;
            newVars.scale = 500;
            newVars.floor = 26.5;

            newVars.points = [];//点集合
            newVars.MaxParticles = 500;//最大数量
            newVars.initV = .01;
            newVars.distributionRadius = 800;
            newVars.vortexHeight = 25;
            return newVars;
        }
        //打开页面
        function OpenFrame(vars) {
            if (vars == undefined) {
                vars = createFrame();
            }
            vars.frameNumber++;
            //页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求,
            requestAnimationFrame(function () { OpenFrame(vars) });

            process(vars);
            drawFloor(vars);
            drawParticles(vars);
        }
        OpenFrame();
    </script>
</body>
</html>
caojunzhi96
关注
  • 13
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript龙卷风粒子特效
06-14
通过JavaScript代码实现龙卷风例子特效
HTML龙卷风特效代码
m0_69821465的博客
04-20 3374
今天，我给大家带来了短视频平台上超火的HTML龙卷风特效代码，如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>粒子漩涡特效</title> <style> html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000; } #canv.
win10立即关机bat脚本示例
最新发布
学亮编程手记
06-21 364
保存后，桌面上会出现一个名为“立即关机.bat”的文件。双击这个文件，如果出现UAC用户账户控制提示，选择“是”以允许程序进行修改，随后计算机将立即开始关机过程。：执行关机命令前，请确保已经保存所有重要的工作和数据，以避免不必要的数据丢失。此外，执行此脚本可能需要管理员权限。：点击“文件” > “另存为…”，在“文件名”框中输入“立即关机.bat”，确保在“保存类型”处选择“所有文件(：在桌面或其他文件夹内右键点击，选择“新建” > “文本文档”。
JS龙卷风效果
m0_75057974的博客
08-17 102
使用JS实现龙卷风效果
H5画布canvas特效（旋转跳跃不停歇）
Tino's Space
12-27 3690
.panel{ margin:20% auto auto 35%; } .input{ width:500px; height:30px; } .btn{ width:515px; height:40px; } .input_form{ float:left; margin:-35% 0 0 25%; position:absolute; } Login function proje
html3d龙卷风特效代码,使用Canvas 2D模拟出来的3D龙卷风动画特效
weixin_29666489的博客
06-09 693
JavaScript语言：JaveScriptBabelCoffeeScript确定var canvas = document.getElementsByTagName('canvas')[0];var ctx = canvas.getContext('2d');canvas.width = canvas.height = 400;aaa();function aaa() {var a, b, c...
html5基于three酷炫3D龙卷风动画场景特效.zip
09-27
在这个"html5基于three酷炫3D龙卷风动画场景特效.zip"压缩包中，我们可以看到一个利用HTML5、CSS和JavaScript构建的3D龙卷风动画场景。Three.js是一个基于WebGL的JavaScript库，它极大地简化了在浏览器中进行3D图形...
HTML5 canvas龙卷风动画代码
05-06
总结来说，HTML5 Canvas与Three.js的结合为我们提供了一种强大而灵活的方式，能够在网页上实现龙卷风或其他3D效果的动画。通过深入研究这个实例，你可以了解到WebGL编程的基本概念，以及如何用JavaScript控制3D图形...
html5基于three酷炫3D龙卷风动画场景特效
06-11
本项目利用HTML5的Canvas元素和Three.js库，构建了一个酷炫的3D龙卷风动画场景特效。下面我们将详细探讨这个项目的知识点。 1. **HTML5 Canvas**: HTML5的Canvas是一个基于矢量图形的画布元素，它允许开发者通过...
HTML5 Canvas龙卷风特效特效代码
03-20
在龙卷风特效中，开发者可能利用three.js的几何体、材质、光源和相机等组件，构建出一个3D空间，并在其中渲染龙卷风模型。 项目中的index.html文件应该是网页的入口文件，包含了HTML结构以及对JavaScript和CSS资源...
HTML5 Canvas龙卷风特效.zip
07-04
在本资源"HTML5 Canvas龙卷风特效.zip"中，我们看到的是利用Three.js库，一个基于JavaScript的3D库，来实现Canvas上的龙卷风动画效果。 Three.js是一个非常流行的JavaScript库，它简化了WebGL的使用，WebGL是一种在...
龙卷风代码.html
02-15
龙卷风代码.html
网页制作龙卷风(html)
09-11
网页制作龙卷风
html实现的龙卷风特
10-21
html实现的龙卷风特效，有兴趣的小伙伴们可以下载研究学习
奔梦向前-用代码实现炫酷粒子龙卷风
奔梦向前
04-22 6459
从这里复制代码，一直复制到最后的</html>即可。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>奔梦向前</title> <style> html,body{ margin:0px; width:...
粒子龙卷风效果
xxxxxlzp的博客
08-17 138
title>粒子漩涡特效</title>
粒子特效 代码(龙卷风)
xiaozgm的博客
07-19 1316
粒子特效 代码(龙卷风)
HTML——3D移动、3D透视、3D效果、3D呈现案例效果
zx2014567296的博客
04-29 2637
灵活运用3D效果制作两盒翻转与旋转木马案例 ※两盒翻转案例 一、效果展示 ※旋转木马案例
HTML 3D效果+形变动态（球体、立方体、螺旋体、层次模型）
breakCSDN的博客
10-30 2622
文章主要实现了立方体、球体、螺旋体、层次体的3D模型 主要是使用： -webkit-perspective:1000px;/*透视距*/ transform-style: preserve-3d;/*指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。*/ transform对3D模型进行操作；
html龙卷风特效代码
10-26
这是一个HTML页面的代码，其中包含了一个名为“龙卷风”的标题和一个CSS样式表的链接。在页面的主体部分，它引用了两个JavaScript文件，一个是three.min.js，另一个是script.js。这些文件用于创建一个三维的龙卷风特效。在这个页面中，使用了HTML5的<canvas>标签来绘制图像。通过JavaScript脚本，使用getContext()方法来获取一个绘图上下文对象，然后使用该对象的方法和属性来完成实际的绘图任务。请注意，这个特效可能不支持Internet Explorer 8及更早的版本。如果您想了解更多关于HTML5<canvas>标签的信息，可以参考菜鸟教程网站www.runoob.com。 下面是一个简单的HTML龙卷风特效代码的例子： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>龙卷风特效</title> <style> body { margin: 0; padding: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <script src="js/three.min.js"></script> <script src="js/script.js"></script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值