【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安装方式

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

mineadmin 设置时区

由于不同环境下&#xff0c;会造成时区不一致问题 在/bin/hyperf.php 文件里&#xff0c;设置 date_default_timezone_set(Asia/Shanghai);

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网络传输层协议

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

1、相关GC日志参数 -verbose:gc 输出gc日志信息&#xff0c;默认输出到标准输出-XX:PrintGC 输出GC日志。类似&#xff1a;-verbose:gc-XX:PrintGCDetails 在发生垃圾回收时打印内存回收详细的日志&#xff0c; 并在进程退出时输出当前内存各区域分配情况-XX:PrintGCTimeStamp…

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;以此验证开发者身份的真实性和保护代码的完…

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

在我们日常使用手机的过程中&#xff0c;经常会在通知栏或设置菜单中看到特定的运营商名称&#xff0c;例如"中国移动"、"中国联通"或"中国电信"等。 那么&#xff0c;这些运营商的名称是如何出现在我们手机上的呢&#xff1f;手机又是如何区分不…

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

如今&#xff0c;全球各地的组织正在采用主数据管理&#xff08;MDM&#xff09;以应对日益严峻的数据问题。然而&#xff0c;成功地实现 MDM 项目并非易事&#xff0c;这需要得到高层的全力支持。下面&#xff0c;软信天成将详细介绍五步策略&#xff0c;协助您获得高层对MDM项…

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

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

基于springboot实现常州地方旅游管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现旅游管理系统演示 摘要 随着旅游业的迅速发展&#xff0c;传统的旅游信息查询方式&#xff0c;已经无法满足用户需求&#xff0c;因此&#xff0c;结合计算机技术的优势和普及&#xff0c;针对常州旅游&#xff0c;特开发了本基于Bootstrap的常州地方旅游管…

MacOS初识SIP——解决快捷指令sh脚本报错Operation not permitted

前言 因为一些原因&#xff0c;设计了一套快捷指令&#xff0c;中间涉及到一个sh脚本的运行&#xff0c;通过快捷指令运行时就会报错&#xff1a;operation not permitted 奇怪的是在快捷指令窗口下运行一切正常&#xff0c;但是从其他地方直接调用&#xff0c;例如通过Comma…

微服务 - (狂神)

什么是微服务&#xff1a; 微服务方案&#xff1a; 1. SpringCloud NetFlix 2. Dubbo 3. SpringCloud Alibaba 解决了什么问题&#xff1a; 1. 服务过多&#xff0c;客户端怎么访问 2. 服务过多&#xff0c;服务间怎么传值 3. 服务过多&#xff0c;如何治理 4. 服务过多…

【Flutter】三个Channel(Android-java / Ios-swift)

Channel 实现与原生通信 【1】MethodChannel flutter MethodChannel官方文档 通过MethodChannel来传递数据&#xff0c;调用方法 案例 分别调用Android和Ios原生的获取电量的方法 Flutter端 实例一个MethodChannel&#xff0c; 唯一标识name&#xff0c;定义方法名称get…

JavaScript ECMAScript标准的与时俱进:从ES6至ES14的革新之路与关键技术特性剖析

ECMAScript&#xff08;通常缩写为ES&#xff09;是一种标准化的脚本语言规范&#xff0c;由ECMA International&#xff08;前身为European Computer Manufacturers Association&#xff0c;欧洲计算机制造商协会&#xff09;制定。自1997年发布首个版本以来&#xff0c;ECMAS…

设计模式之创建型模式---建造者模式

文章目录 建造者模式概述经典的建造者模式建造者模式的变种总结 建造者模式概述 建造者模式是一种广泛使用的设计模式&#xff0c;在三方开源库和各种SDK中经常见到。建造者设计模式在四人帮的经典著作《设计模式&#xff1a;可复用面向对象软件基础》中被提及&#xff0c;它的…

搭建前后端的链接(java)

搭建前后端的链接(java) 一.前提 1.1 javaEE 搭建前后端的链接首先需要用到javaEE&#xff0c;也就是java企业版&#xff0c;也就是java后端(后端javaSE) 利用javaEE和前端交互&#xff0c;javaSE和数据库交互&#xff0c;javaSE和javaEE之间再进行交互就实现了前后端的交互…

语音识别(录音与语音播报)

语音识别&#xff08;录音与语音播报&#xff09; 简介 语音识别人工智能技术的应用领域非常广泛&#xff0c;常见的应用系统有&#xff1a;语音输入系统&#xff0c;相对于键盘输入方法&#xff0c;它更符合人的日常习惯&#xff0c;也更自然、更高效&#xff1b;语音控制系…