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