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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/426702