手机微网站模板下载,杭州专门做网站,展示型商城订单网站建设,做网站哪家强目录
前言
开始
HTML部分
CSS部分
效果图
总结 前言 无需多言#xff0c;本文将详细介绍一段HTML#xff0c;具体内容如下#xff1a; 开始 首先新建文件夹#xff0c;创建两个文本文档#xff0c;其中HTML的文件名改为[index.html]#xff0c;CSS的文件名改为[Bab…目录
前言
开始
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 charsetutf-8
!-- 设置字符编码为UTF-8 --
titlecanvas时空隧道/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
bodyscript typetext/javascript srcscript.js/script
!-- 引入外部JavaScript文件 --canvas/canvas
!-- 创建一个canvas元素用于绘制3D动画 --script typetext/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环境。此外通过监听窗口大小变化和渲染循环确保了动画的流畅性和适应不同设备的显示需求。
