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

目录

前言

开始

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.mzph.cn/news/804283.shtml

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

相关文章

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

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

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

ubuntu下miniconda安装方式

conda官网&#xff1a; https://docs.anaconda.com/free/miniconda/ 安装方式&#xff1a; 全部执行完毕后&#xff0c;重新登录终端&#xff0c;就可以进入默认的 base 环境。 接下来可以继续使用命令创建和切换所需要的python环境 # 创建python 3.8的环境 mytest conda c…
阅读更多...
mineadmin 设置时区

mineadmin 设置时区

由于不同环境下&#xff0c;会造成时区不一致问题 在/bin/hyperf.php 文件里&#xff0c;设置 date_default_timezone_set(Asia/Shanghai);
阅读更多...
qiankun 主子应用使用同一地址同一端口配置

qiankun 主子应用使用同一地址同一端口配置

参考官网配置链接&#xff1a;https://qiankun.umijs.org/zh/cookbook#%E5%9C%BA%E6%99%AF-1%E4%B8%BB%E5%BA%94%E7%94%A8%E5%92%8C%E5%BE%AE%E5%BA%94%E7%94%A8%E9%83%A8%E7%BD%B2%E5%88%B0%E5%90%8C%E4%B8%80%E4%B8%AA%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%90%8C%E4%B8%80%E4%B8%A…
阅读更多...
【Java网络编程】IP网络协议与TCP、UDP网络传输层协议

【Java网络编程】IP网络协议与TCP、UDP网络传输层协议

1.1、IP协议 当应用层的数据被封装后&#xff0c;想要将数据在网络上传输&#xff0c;数据究竟要被发往何处&#xff0c;又该如何精准的在网络上定位目标机器&#xff0c;此时起到关键作用的就是“IP协议”。IP协议的作用在于把各种数据包准确无误的传递给目标方&#xff0c;其…
阅读更多...
微信小程序用户登录授权指定（旧版本）

微信小程序用户登录授权指定（旧版本）

配置旧版本基础库2.12.3 实现效果 点击登录按钮即可直接登录&#xff0c;获取用户昵称和头像 点击获取头像昵称按钮则需要授权&#xff0c;才能成功登录 代码实现 my.xml <!-- 登录页面,调试基础库为2.20.2库 --> <view class"mylogin"><block w…
阅读更多...
B02、分析GC日志-6.3

B02、分析GC日志-6.3

1、相关GC日志参数 -verbose:gc 输出gc日志信息&#xff0c;默认输出到标准输出-XX:PrintGC 输出GC日志。类似&#xff1a;-verbose:gc-XX:PrintGCDetails 在发生垃圾回收时打印内存回收详细的日志&#xff0c; 并在进程退出时输出当前内存各区域分配情况-XX:PrintGCTimeStamp…
阅读更多...
Selenium——基于Web的UI自动化测试工具（一）

Selenium——基于Web的UI自动化测试工具（一）

一、selenium简介 Selenium是一个自动化测试工具&#xff0c;用于模拟用户在Web上的行为。它支持多种浏览器&#xff0c;如Chrome、Firefox、IE等。Selenium可以实现多种操作&#xff0c;包括打开浏览器、导航到指定URL、填写表单、点击按钮、获取页面元素等。 Seleniu…
阅读更多...
简单使用Linux printf 将十进制转换为十六进制

简单使用Linux printf 将十进制转换为十六进制

在开发和排查问题过程中&#xff0c;有时我们需要做一些进制的转换&#xff0c;以下是一些快速的小技巧&#xff1a; 下面的是 十进制转换为十六进制&#xff1a; ❯ printf "0x%x\n" 100 0x64 还可以把 十六进制转为十进制&#xff1a; ❯ printf "%d\n&q…
阅读更多...
flutter性能优化总结

flutter性能优化总结

Flutter应用程序默认已经具有良好的性能&#xff0c;因此您只需要避免常见的陷阱&#xff0c;就可以获得出色的性能。 流畅度(提高渲染性能) 控制build()方法的耗时 避免在 build() 方法中进行重复且耗时的工作&#xff0c;因为当父 widget 重建时&#xff0c;子 Wdiget 的 b…
阅读更多...
XILINX 7系列时钟资源

XILINX 7系列时钟资源

文章目录 前言一、时钟概要1.1、CC1.2、BUFR、BUFIO、BUFMR1.3、CMT1.4、BUFH1.5、BUFG 二、时钟路由资源三、CMT 前言 本文主要参考xilinx手册ug472 一、时钟概要 7系列FPGA时钟资源主要有CC、BUFR、BUFIO、BUFMR、CMT、BUFG、BUFH和GTE_COMMON 1.1、CC “CC”&#xff0…
阅读更多...
代码签名证书是什么？软件签名证书功能和分类

代码签名证书是什么？软件签名证书功能和分类

代码签名证书是什么&#xff1f;代码签名证书&#xff08;Code Signing Certificate&#xff09;是用于对可执行文件或脚本&#xff0c;软件代码等进行数字签名&#xff0c;可验证软件发布者身份、保证软件签名后未被篡改&#xff0c;以此验证开发者身份的真实性和保护代码的完…
阅读更多...
【QT】Qt Charts的实际使用中的一些小细节完善如：resetZoom、fitInView

【QT】Qt Charts的实际使用中的一些小细节完善如：resetZoom、fitInView

在Qt中&#xff0c; 使用 Qt Charts来创建和操作图表&#xff0c;重置图表缩放状态的功能可以通过调整图表视图的缩放比例来实现。Qt Charts中的QChartView提供了相关的方法来控制图表的缩放和平移。 示例代码&#xff0c;以及如何对此功能进行扩展&#xff1a; #include <…
阅读更多...
Go —— GMP面试题

Go —— GMP面试题

前言 关于GMP的详细讲解请移步&#xff1a;Go —— 协程 简单介绍一下Go的GMP调度模型 0&#xff09;G&#xff1a;协程&#xff0c;M&#xff1a;系统线程&#xff0c;P&#xff1a;协程调度器 1&#xff09;通过go func() 生成一个 G 2&#xff09;G会优先放到P的本地队…
阅读更多...
C++_List的学习

C++_List的学习

1.概述 1. list 是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代 2. list 的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其前一个元素和后一个元素 3. list…
阅读更多...
运营商名称 是如何显示到 手机通知栏上的？

运营商名称 是如何显示到 手机通知栏上的？

在我们日常使用手机的过程中&#xff0c;经常会在通知栏或设置菜单中看到特定的运营商名称&#xff0c;例如"中国移动"、"中国联通"或"中国电信"等。 那么&#xff0c;这些运营商的名称是如何出现在我们手机上的呢&#xff1f;手机又是如何区分不…
阅读更多...
软信天成：如何通过5个步骤获得高层对主数据管理项目的支持

软信天成：如何通过5个步骤获得高层对主数据管理项目的支持

如今&#xff0c;全球各地的组织正在采用主数据管理&#xff08;MDM&#xff09;以应对日益严峻的数据问题。然而&#xff0c;成功地实现 MDM 项目并非易事&#xff0c;这需要得到高层的全力支持。下面&#xff0c;软信天成将详细介绍五步策略&#xff0c;协助您获得高层对MDM项…
阅读更多...
连接mysql或mariaDB报错：is not allowed to connect to this MariaDB server

连接mysql或mariaDB报错：is not allowed to connect to this MariaDB server

1.报错信息&#xff1a;Host ‘192.168.3.91’ is not allowed to connect to this MariaDB server 2.报错原因&#xff1a;因为没有远程连接数据库的权限 一般为新创建数据库或新创建的用户没有远程连接数据库的权限&#xff0c;需要进行授权 # mysql -u root -p # use mysql…
阅读更多...
属于我们Go语言的toString！

属于我们Go语言的toString！

在 Go 语言中&#xff0c;类似于 Java 中的 toString() 方法&#xff0c;可以通过实现 String() 方法来自定义类型的字符串表示形式。这种机制使得在打印自定义类型的值时能够输出更加可读性高的字符串。在本文中&#xff0c;我们将探讨如何在 Go 中实现类似的功能&#xff0c;…
阅读更多...
SCI一区 | Matlab实现OOA-TCN-BiGRU-Attention鱼鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现OOA-TCN-BiGRU-Attention鱼鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现OOA-TCN-BiGRU-Attention鱼鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测 目录 SCI一区 | Matlab实现OOA-TCN-BiGRU-Attention鱼鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测预测效果基本介绍模型描述程序…
阅读更多...
最新文章

Copyright @ 2022~2023