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

2024-04-10 10:36
文章标签 简单 动态 时空 3d html 效果 制作 frontend 粒子 隧道

本文主要是介绍【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环境。此外，通过监听窗口大小变化和渲染循环，确保了动画的流畅性和适应不同设备的显示需求。

这篇关于【HTML】简单制作一个3D动态粒子效果的时空隧道的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/890826。

相关文章

轻量级在线服装3D定制引擎Myway简介

轻量级在线服装3D定制引擎Myway简介

我写的面向web元宇宙轻量级系列引擎中的另外一个，在线3D定制引擎Myway 3D。 用于在线商品定制，比如个性化服装的定制、日常用品（如杯子）、家装（被套）等物品的在线定制。 特性列表： 可更换衣服款式，按需定制更换模型可实时更改材质颜色可实时添加文本，并可实时修改大小、颜色和角度，支持自定义字体可实时添加艺术图标，并可实时修改大小、颜色和角度，支持翻转、各种对齐可更改衣服图案，按需求定制
阅读更多...
一份LLM资源清单围观技术大佬的日常；手把手教你在美国搭建「百万卡」AI数据中心；为啥大模型做不好简单的数学计算？ | ShowMeAI日报

一份LLM资源清单围观技术大佬的日常；手把手教你在美国搭建「百万卡」AI数据中心；为啥大模型做不好简单的数学计算？ | ShowMeAI日报

👀日报&周刊合集 | 🎡ShowMeAI官网 | 🧡 点赞关注评论拜托啦！ 1. 为啥大模型做不好简单的数学计算？从大模型高考数学成绩不及格说起 司南评测体系 OpenCompass 选取 7 个大模型 (6 个开源模型+ GPT-4o)，组织参与了 2024 年高考「新课标I卷」的语文、数学、英语考试，然后由经验丰富的判卷老师评判得分。 结果如上图所
阅读更多...
vue, 左右布局宽，可拖动改变

vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用 2：代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
阅读更多...
通过SSH隧道实现通过远程服务器上外网

通过SSH隧道实现通过远程服务器上外网

搭建隧道 autossh -M 0 -f -D 1080 -C -N user1@remotehost##验证隧道是否生效，查看1080端口是否启动netstat -tuln | grep 1080## 测试ssh 隧道是否生效curl -x socks5h://127.0.0.1:1080 -I http://www.github.com 将autossh 设置为服务，隧道开机启动
阅读更多...
vue项目集成CanvasEditor实现Word在线编辑器

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor 前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
阅读更多...
React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 （1）通过position属性,可以控制下拉选项的位置 （2）通过传入width属性, 可以自定义下拉选项的宽度 （3）通过传入classN
阅读更多...
回调的简单理解

回调的简单理解

之前一直不太明白回调的用法，现在简单的理解下 就按这张slidingmenu来说，主界面为Activity界面，而旁边的菜单为fragment界面。1.现在通过主界面的slidingmenu按钮来点开旁边的菜单功能并且选中”区县“选项（到这里就可以理解为A类调用B类里面的c方法）。2.通过触发“区县”的选项使得主界面跳转到“区县”相关的新闻列表界面中（到这里就可以理解为B类调用A类中的d方法
阅读更多...
js+css二级导航

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con
阅读更多...
基于Springboot + vue 的抗疫物质管理系统的设计与实现

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页：
阅读更多...
自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用

自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用

自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用。如果你看不懂，请留言。 完整代码： <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><ti
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2