【HTML】简单制作一个3D动态粒子效果的时空隧道

news2024/11/28 8:50:39

目录

前言

开始

HTML部分

CSS部分

效果图

总结

前言

        无需多言，本文将详细介绍一段HTML，具体内容如下：

 

开始

        首先新建文件夹，创建两个文本文档，其中HTML的文件名改为[index.html]，CSS的文件名改为[Babylon.js]，创建好后右键用文本文档打开，再把下面相对应代码填入后保存即可。

HTML部分

        这段HTML代码是一个使用Babylon.js库创建的3D动画效果页面。Babylon.js是一个强大的JavaScript库，用于创建和显示3D内容在网页上。下面是对这段代码的详细总结：

  1. HTML结构：

    • <!doctype html> 声明了文档类型为HTML5。
    • <html> 标签定义了整个HTML文档的根。
    • <head> 部分包含了文档的元数据，如字符编码设置为UTF-8，页面标题设置为“canvas时空隧道”，以及引入外部的JavaScript文件“script.js”和Babylon.js的类定义。

  2. CSS样式：

    • 全局样式重置默认的边距和内边距为0。
    • canvas 元素的宽度和高度被设置为视口宽度和高度的100%，以确保全屏显示。
    • .infos 类定义了一个使用网格布局的固定位置元素，具有一定大小的内边距。
    • 链接颜色被设置为浅灰色。
    • body 的滚动条被隐藏。

  3. JavaScript逻辑：

    • 使用严格模式声明，有助于捕捉错误和避免不安全的行为。
    • 引入Babylon.js库中的类，如引擎（Engine）、场景（Scene）、相机（ArcRotateCamera）、向量（Vector3）、网格构建器（MeshBuilder）、材质（PBRMaterial）、光源（PointLight）、粒子系统（SolidParticleSystem）等。
    • 创建一个canvas元素，并初始化Babylon.js引擎和场景。
    • 设置场景背景颜色为黑色且不透明。
    • 创建一个围绕物体旋转的相机，并设置视场角和最小Z值。
    • 创建一个点光源，并设置光源强度和漫反射颜色。
    • 创建默认的渲染管线，并启用Bloom效果。
    • 创建一个基于物理的渲染（PBR）材质，并设置粗糙度。
    • 定义随机数生成函数，用于生成粒子的位置、缩放和颜色。
    • 创建一个多面体网格，并将其添加到实体粒子系统中。
    • 初始化粒子并构建网格。
    • 设置粒子系统的网格材质和旋转。
    • 添加事件监听器以在场景渲染前更新粒子位置，并在窗口大小变化时调整引擎大小。
    • 开始渲染循环，确保3D动画能够持续播放。
<!doctype html>
<!-- 声明文档类型为HTML5 -->
<html>
<head>
<meta charset="utf-8">
<!-- 设置字符编码为UTF-8 -->
<title>canvas时空隧道</title>
<!-- 页面标题 -->

<style>
*{margin:0;padding:0;}
/* 重置默认的边距和内边距 */
canvas {
  display: block;
  width: 100vw; /* 将canvas宽度设置为视口宽度的100% */
  height: 100vh; /* 将canvas高度设置为视口高度的100% */
}
.infos {
  padding: 5vmin; /* 设置内边距 */
  display: grid; /* 通过网格布局显示 */
  position: fixed; /* 固定位置 */
  top: 0;
  left: 0;
}
.infos a {
  color: #eee; /* 设置链接颜色为浅灰色 */
}
body{overflow: hidden} /* 隐藏body的滚动条 */
</style>
</head>
<body>

<script type="text/javascript" src="script.js"></script>
<!-- 引入外部JavaScript文件 -->

<canvas></canvas>
<!-- 创建一个canvas元素，用于绘制3D动画 -->

<script type="text/javascript">
"use strict";
// 严格模式声明，有助于捕捉错误和避免不安全的行为

// 引入Babylon.js库中的类
var Engine = BABYLON.Engine, Scene = BABYLON.Scene, ArcRotateCamera = BABYLON.ArcRotateCamera, Vector3 = BABYLON.Vector3, MeshBuilder = BABYLON.MeshBuilder, PBRMaterial = BABYLON.PBRMaterial, PointLight = BABYLON.PointLight, SolidParticleSystem = BABYLON.SolidParticleSystem, SolidParticle = BABYLON.SolidParticle, DefaultRenderingPipeline = BABYLON.DefaultRenderingPipeline;

// 获取canvas元素并创建Babylon.js引擎和场景
var canvas = document.querySelector('canvas');
var engine = new Engine(canvas);
var scene = new Scene(engine);
scene.clearColor.set(0, 0, 0, 1); // 设置场景背景颜色为黑色且完全透明
var camera = new ArcRotateCamera('', -Math.PI / 2, Math.PI / 2, 10, new Vector3(0, 0, 0), scene); // 创建一个围绕物体旋转的相机
camera.fov = Math.PI / 2; // 设置相机的视场角
camera.minZ = 1e-4; // 设置相机的最小Z值

// 创建一个点光源
var light = new PointLight('', new Vector3(0, -1, 0), scene);
light.intensity = 5e3; // 设置光源强度
light.diffuse.set(1, 1, 1); // 设置光源的漫反射颜色为白色

// 创建默认的渲染管线
var pp = new DefaultRenderingPipeline('');
pp.bloomEnabled = true; // 启用Bloom效果，增加图像的亮度和光晕效果
pp.bloomThreshold = 0.2; // 设置Bloom效果的阈值

// 创建一个PBR（基于物理的渲染）材质
var mat = new PBRMaterial('', scene);
mat.roughness = 1; // 设置材质的粗糙度

// 定义随机数生成函数
var urnd = function (a, b) {
    if (a === void 0) { a = 0; }
    if (b === void 0) { b = 1; }
    return a + Math.random() * (b - a);
};
var rnd = function (a, b) {
    if (a === void 0) { a = 0; }
    if (b === void 0) { b = 1; }
    return urnd(a, b) * (Math.random() < 0.5 ? -1 : 1);
};

// 创建一个多面体网格
var box = MeshBuilder.CreatePolyhedron('', { type: 1, sizeX: 0.2, sizeY: 1, sizeZ: 0.2 });

// 创建一个实体粒子系统
var sps = new SolidParticleSystem('', scene);
var vy = new WeakMap(); // 使用WeakMap存储粒子的垂直速度

// 添加形状到粒子系统中，并设置粒子数量
sps.addShape(box, 8e2);

// 初始化粒子
sps.initParticles = function () {
    var _a;
    var a = 0;
    for (var _i = 0, _b = sps.particles; _i < _b.length; _i++) {
        var p = _b[_i];
        a = rnd(0, Math.PI); // 生成随机角度
        p.position.set(5 * Math.sin(a), urnd(-10, 100), 5 * Math.cos(a)); // 设置粒子位置
        p.scaling.y = Math.random() * 2 + 1; // 设置粒子在Y轴方向的缩放
        (_a = p.color) === null || _a === void 0 ? void 0 : _a.set(Math.random(), Math.random(), 1, 1); // 设置粒子颜色
        vy.set(p, Math.random() * 0.1 + 0.1); // 设置粒子的垂直速度
    }
};

// 更新粒子位置
sps.updateParticle = function (p) {
    p.position.y -= vy.get(p); // 根据速度更新位置
    if (p.position.y < -10) { // 如果粒子超出视野范围
        p.position.y = 100; // 重置粒子位置
    }
    return p;
};

// 初始化粒子并构建网格
sps.initParticles();
sps.buildMesh();

// 释放创建的多面体网格
box.dispose();

// 设置粒子系统的网格材质
sps.mesh.material = mat;

// 设置粒子系统的网格旋转
sps.mesh.rotation.set(Math.PI / 2, 0, 0);

// 添加事件监听器以在场景渲染前更新粒子
scene.onBeforeRenderObservable.add(function () { return sps.setParticles(); });

// 添加事件监听器以在窗口大小变化时调整引擎大小
window.onresize = function () { return engine.resize(); };

// 开始渲染循环
engine.runRenderLoop(function () { return scene.render(); });
</script>
</body>
</html>

JS部分

        JS部分的代码很长，发不出来，发在资源处了，在文章顶部也可下载。如果不是免费的，可以私聊我，我直接发给你们。

效果图

总结

        整体而言，这段代码通过Babylon.js库创建了一个具有动态粒子效果的3D场景。粒子系统生成了大量的粒子，这些粒子在场景中随机生成并随时间下落，创建出了一种动态的视觉效果，类似于一个时空隧道。 通过设置相机、光源和材质，页面上呈现出一个具有深度和光照效果的3D环境。此外，通过监听窗口大小变化和渲染循环，确保了动画的流畅性和适应不同设备的显示需求。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1581901.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【数据库】数据库应用系统生命周期

【数据库】数据库应用系统生命周期

目录 1.为什么提出”软件工程“的思想&#xff1f; 2.为什么提出”瀑布模型“&#xff1f;缺点是什么&#xff1f; 3.为什么提出”快速原型模型“&#xff1f; 4.为什么提出”螺旋模型“&#xff1f; 5.关于数据库的英文缩写。 6.模型设计中的3条设计主线&#xff1a;数…
阅读更多...
C++实现list容器

C++实现list容器

目录 1.前言 2.实现list容器 2.1链表结构体 2.2list迭代器 迭代器的成员变量 迭代器的构造函数 迭代器的&#xff0c;-- 迭代器的&#xff0c;&#xff01; 迭代器的解引用 迭代器的-> 3.list类 构造函数 析构函数 插入 删除 头插、尾插 头删、尾删 begin、end size empty 拷…
阅读更多...
第23次修改了可删除可持久保存的前端html备忘录:增加了百度引擎

第23次修改了可删除可持久保存的前端html备忘录:增加了百度引擎

第22次修改了可删除可持久保存的前端html备忘录视频背景分离&#xff0c;增加了本地连接&#xff0c;增加了纯CSS做的折叠隐藏修改说明 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport…
阅读更多...
采用Flink CDC操作SQL Server数据库获取增量变更数据

采用Flink CDC操作SQL Server数据库获取增量变更数据

采用Flink CDC操作SQL Server数据库获取增量变更数据 Flink CDC 1.12版本引入了对SQL Server的支持&#xff0c;包括SqlServerCatalog和SqlServerTable。在SqlServerCatalog中&#xff0c;你可以根据表名获取对应的字段和字段类型。 SQL Server 2008 开始支持变更数据捕获 (C…
阅读更多...
数码相框-显示JPG图片

数码相框-显示JPG图片

LCD控制器会将LCD上的屏幕数据映射在相应的显存位置上。 通过libjpeg把jpg图片解压出来RGB原始数据。 libjpeg是使用c语言实现的读写jpeg文件的库。 使用libjpeg的应用程序是以"scanline"为单位进行图像处理的。 libjpeg解压图片的步骤&#xff1a; libjpeg的使…
阅读更多...
FPGA：图像数字细节增强算法（工程+仿真+实物，可用毕设）

FPGA：图像数字细节增强算法（工程+仿真+实物，可用毕设）

目录 日常唠嗑一、视频效果二、硬件及功能1、硬件选择2、功能3、特点 未完、待续……四、工程设计五、板级验证六、工程获取 日常唠嗑 有2个多月没写文章了&#xff0c;又是老借口&#xff1a;“最近实在是很忙”&#x1f923;&#xff0c;不过说真&#xff0c;确实是比较忙&am…
阅读更多...
AWS服务器有哪些优势？

AWS服务器有哪些优势？

作为一家总部在美国的公司&#xff0c;AWS为什么会受到中国企业的喜爱&#xff1f;他有什么优势&#xff1f;九河云作为AWS合作伙伴&#xff0c;将会带读者展现使用AWS的优势。 首先是作为跨国企业&#xff0c;AWS在全球有数十个区域节点&#xff0c;这种广泛的地域覆盖不仅有…
阅读更多...
【简单讲解下Kotlin】

【简单讲解下Kotlin】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…
阅读更多...
[大模型]基于 ChatGLM3 和 LangChain 搭建知识库助手

[大模型]基于 ChatGLM3 和 LangChain 搭建知识库助手

基于 ChatGLM3 和 LangChain 搭建知识库助手 环境配置 在已完成 ChatGLM3 的部署基础上&#xff0c;还需要安装以下依赖包&#xff1a; pip install langchain0.0.292 pip install gradio4.4.0 pip install chromadb0.4.15 pip install sentence-transformers2.2.2 pip inst…
阅读更多...
详解TCP和UDP协议的区别

详解TCP和UDP协议的区别

一、前言 TCP和UDP协议是TCP/IP协议的核心。TCP 传输协议&#xff1a;TCP 协议是一TCP (Transmission Control Protocol)和UDP(User Datagram Protocol)协议属于传输层协议。其中TCP提供IP环境下的数据可靠传输&#xff0c;它提供的服务包括数据流传送、可靠性、有效流控、全双…
阅读更多...
实时时钟模块RX8900CE为电子产品设备提供精准时间，能够适应极度紧凑的空间

实时时钟模块RX8900CE为电子产品设备提供精准时间，能够适应极度紧凑的空间

随着电子技术飞速发展&#xff0c;越来越多的设备需要用到实时时钟电路。而过往的实时时钟电路&#xff0c;大多是分立式的架构&#xff0c;外围有不少的元器件&#xff0c;不但成本高昂&#xff0c;而且稳定性也不高&#xff0c;在严苛的工作条件下就显得有点力不从心。作为设…
阅读更多...
ARM单片机的GPIO口在控制不同LED、按键时的设置

ARM单片机的GPIO口在控制不同LED、按键时的设置

个人备忘&#xff0c;不喜勿喷。 GPIO口在驱动共阴极、共阳极LED灯时需要不同的初始化设置 对于这一类的led灯&#xff1a; 最好选择推挽、上拉、高速输出&#xff0c;同时IO口初始化时需要拉高。 上面这种需要下拉输入&#xff1b; 上图这种需要上拉输入&#xff0c;这样才…
阅读更多...
聊一聊一些关于npm、pnpm、yarn的事

聊一聊一些关于npm、pnpm、yarn的事

前言 整理了最近的闲聊&#xff0c;话题是前端各个包管理器&#xff0c;如果分享的不对或者有异议的地方&#xff0c;麻烦请及时告诉我~ 耐心看完&#xff0c;也许你会有所收获~ 概述 本文阅读时间&#xff1a;10-15分钟左右&#xff1b; 难度&#xff1a;初级&#xff0c…
阅读更多...
LeetCode 2529. 正整数和负整数的最大计数——每日一题

LeetCode 2529. 正整数和负整数的最大计数——每日一题

上一篇博客&#xff1a;LeetCode 993. 二叉树的堂兄弟节点——每日一题 写在前面&#xff1a;大家好&#xff01;我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正&#xff0c;感谢大家的不吝赐教。我的唯一博客更新地址是&#xff1a;https://ac-fun.…
阅读更多...
【计算机考研】408网课汇总+资源分享

【计算机考研】408网课汇总+资源分享

王道的四件套无疑是大多数同学的首选。相比其他课程来说&#xff0c;也是属于市面上最好的408课程了。 从今年的难度来看选择题部分和计网&#xff0c;比起往年来看是有很多偏题&#xff0c;大题除了计网的冷门外&#xff0c;其他倒是中规中矩。总体来看24考研的408难度是非常…
阅读更多...
Win11 使用 WSL2 安装 linux 子系统 ubuntu

Win11 使用 WSL2 安装 linux 子系统 ubuntu

Win11 使用 WSL2 安装 linux 子系统 ubuntu 段子手168 1、用 部署映像服务和管理工具 dism.exe 命令&#xff0c;开启 WSL2 按【WIN R】&#xff0c;打开【运行】&#xff0c;输入&#xff1a;【cmd】&#xff0c;管理员打开【命令行提示符】。 启用适用于 Linux 的 Windo…
阅读更多...
单例模式（饿汉模型，懒汉模型）

单例模式（饿汉模型，懒汉模型）

在着里我们先了解什么是单例模式。 就是某个类在进程中只能有单个实例&#xff0c;这里的单例模式需要一定的编程技巧&#xff0c;做出限制&#xff0c;一旦程序写的有问题&#xff0c;创建了多个实例&#xff0c;编程就会报错。 如果我们学会了单例模式&#xff0c;这种模式…
阅读更多...
ORAN C平面 Section Extension 22

ORAN C平面 Section Extension 22

ORAN C平面Section扩展22用于ACK/NACK请求。除section type 7外&#xff0c;section扩展22可以用于从O-DU发送到O-RU的所有section type和section扩展。 对于一个section描述&#xff0c;O-DU可以使用section扩展22要求O-RU使用section type 8 C平面消息进行ACK/NACK反馈。关于…
阅读更多...
Spring Validation解决后端表单校验

Spring Validation解决后端表单校验

NotNull&#xff1a;从前台传递过来的参数不能为null,如果为空&#xff0c;会在控制台日志中把message打印出来 Range&#xff1a;范围&#xff0c;最大多少&#xff0c;最小多少 Patten&#xff0c;标注的字段值必须符合定义的正则表达式&#xff08;按照业务规则&#xff0…
阅读更多...
智慧公厕是智慧城市建设中不可或缺的一部分

智慧公厕是智慧城市建设中不可或缺的一部分

智慧城市的数字化转型正在取得显著成效&#xff0c;各项基础设施的建设也在迅速发展&#xff0c;其中智慧公厕成为了智慧城市体系中不可或缺的一部分。作为社会生活中必要的设施&#xff0c;公共厕所的信息化、数字化、智慧化升级转型能够实现全区域公共厕所管理的横向打通和纵…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023