目录
前言
开始
HTML部分
CSS部分
效果图
总结
前言
无需多言，本文将详细介绍一段HTML，具体内容如下：
开始
首先新建文件夹，创建两个文本文档，其中HTML的文件名改为[index.html]，CSS的文件名改为[Babylon.js]，创建好后右键用文本文档打开，再把下面相对应代码填入后保存即可。
HTML部分
这段HTML代码是一个使用Babylon.js库创建的3D动画效果页面。Babylon.js是一个强大的JavaScript库，用于创建和显示3D内容在网页上。下面是对这段代码的详细总结：
-
HTML结构：
<!doctype html>声明了文档类型为HTML5。<html>标签定义了整个HTML文档的根。<head>部分包含了文档的元数据，如字符编码设置为UTF-8，页面标题设置为“canvas时空隧道”，以及引入外部的JavaScript文件“script.js”和Babylon.js的类定义。
-
CSS样式：
- 全局样式重置默认的边距和内边距为0。
canvas元素的宽度和高度被设置为视口宽度和高度的100%，以确保全屏显示。.infos类定义了一个使用网格布局的固定位置元素，具有一定大小的内边距。- 链接颜色被设置为浅灰色。
body的滚动条被隐藏。
-
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环境。此外，通过监听窗口大小变化和渲染循环，确保了动画的流畅性和适应不同设备的显示需求。
