简介这是一份面向前端初学者与HTML5进阶学习者的交互式视觉效果实践资源聚焦Canvas与WebGL在3D动态场景中的落地应用。资源实现全屏3D雪花飘落动画并支持鼠标移动实时影响雪花运动轨迹兼顾视觉表现力与交互逻辑适用于节日专题页、作品集首页或HTML5特效教学演示。压缩包共8个文件111KB含3个核心JS脚本负责3D渲染、粒子系统与主控逻辑、1个HTML入口页、2张背景图JPG、1张PNG素材及1份使用说明文本结构精简、依赖零外部库开箱即用。目前已有103人学习下载读者可直接运行index.html查看效果深入理解Snow.js与ThreeCanvas.js中坐标变换、帧循环控制、鼠标事件绑定及Canvas/WebGL混合渲染的关键实现细节是掌握现代Web图形编程的轻量级实战范例。1. 项目概述一个会呼吸的3D雪景最近在整理一些老项目的源码翻到了一个挺有意思的小玩意儿——“基于HTML5实现全屏3D雪花飘落动态源码”。这可不是那种简单的GIF背景或者CSS动画而是一个真正具有空间感的3D雪景模拟。雪花不是贴在屏幕上的贴纸而是有远近、有大小、会旋转、会随着你的鼠标气流“飘动”的立体粒子。当时做这个的初衷是想给一个冬季主题的官网做个既不喧宾夺主又能提升氛围感的动态背景结果效果出奇的好后来很多朋友都问我要源码。今天我就把这个v1.0版本的实现思路和核心代码拆解一下你完全可以把它用到你的个人博客、作品集页面或者任何需要一点冬日浪漫气息的网页里。简单来说这个项目就是用纯前端技术HTML5 JavaScript在浏览器里构建了一个轻量级的3D粒子系统专门用来模拟下雪。它的核心亮点有两个一是“真3D”利用WebGL通过Three.js库让雪花在三维空间中运动有Z轴深度视觉上更真实二是“可交互”雪花的飘落轨迹会受到鼠标位置的影响仿佛你的光标是一阵微风划过屏幕时能“吹动”雪花互动感十足。实现起来并不复杂即使你对3D编程不熟跟着下面的步骤也能搞定。接下来我会从环境搭建、核心原理、代码逐行解析到常见坑点完整地走一遍。2. 技术选型与整体架构设计2.1 为什么是HTML5与Three.js首先明确这里的“HTML5”是一个广义概念核心指的是现代浏览器支持的Canvas绘图API和WebGL图形接口。纯用CSS3的transform和animation也能做平面雪花飘落但想要实现有透视关系的3D效果、复杂的粒子运动和鼠标交互就必须动用更底层的图形能力。Three.js是我们的不二之选。它是一个封装了WebGL复杂操作的JavaScript 3D库大大降低了3D编程的门槛。你不用直接去写晦涩的WebGL着色器代码通过Three.js提供的场景Scene、相机Camera、渲染器Renderer和网格Mesh等概念就能像搭积木一样构建3D世界。对于雪花粒子这种大量重复的简单物体Three.js的粒子系统Points性能极高可以轻松管理成千上万个雪花而保持流畅。整体架构思路如下初始化3D世界创建场景、相机和WebGL渲染器并将其占满整个浏览器窗口。创建雪花粒子系统生成一定数量比如2000个的“雪花”粒子每个粒子是一个具有3D坐标的顶点。定义材质与外观为这些粒子指定一个贴图一张雪花的PNG图片并设置大小、透明度等属性让它们看起来像雪花。实现动画循环利用requestAnimationFrame函数在每一帧更新所有雪花的位置模拟飘落和旋转。注入交互逻辑监听鼠标移动事件根据鼠标当前位置计算出一个“力场”或“影响区域”让该区域内的雪花产生位置偏移模拟被风吹动的效果。这个架构清晰地将渲染、数据、逻辑分离后续要调整雪花的数量、速度、交互强度都非常方便。2.2 关键依赖与项目结构项目非常简单只需要一个HTML文件和一些静态资源。不需要构建工具如Webpack或Vite当然用在正式项目里打包一下更好。snowfall-3d-v1.0/ ├── index.html # 主入口文件 ├── js/ │ └── main.js # 主要的JavaScript逻辑代码 ├── lib/ │ └── three.min.js # Three.js库文件建议使用r128版本 └── assets/ └── snowflake.png # 雪花粒子贴图建议使用带透明通道的圆形渐变PNG注意Three.js库的获取。强烈建议从Three.js官网https://threejs.org下载指定版本的three.min.js或者使用可靠的CDN链接。不要随意使用来路不明的版本不同版本间API可能有细微差别容易导致代码运行错误。3. 核心实现细节拆解3.1 初始化3D场景搭建舞台一切从创建一个空的3D场景开始。我们在main.js中编写以下代码// 引入Three.js库后全局会有THREE对象 let scene, camera, renderer; let snowParticles; let mouseX 0, mouseY 0; // 记录鼠标位置 let windowHalfX window.innerWidth / 2; let windowHalfY window.innerHeight / 2; function init() { // 1. 创建场景 scene new THREE.Scene(); // 可以给场景一个淡淡的背景色比如冬季傍晚的深蓝色 scene.background new THREE.Color(0x0a1a2a); // 2. 创建透视相机 camera new THREE.PerspectiveCamera( 75, // 视野角度FOV单位是度。值越大看到的场景越广类似广角镜头。 window.innerWidth / window.innerHeight, // 宽高比保持与窗口一致 0.1, // 近裁剪面。比这个距离更近的物体不会被渲染。 2000 // 远裁剪面。比这个距离更远的物体不会被渲染。 ); camera.position.z 500; // 将相机沿Z轴向后移动让我们能看清场景 // 3. 创建WebGL渲染器 renderer new THREE.WebGLRenderer({ antialias: true }); // 开启抗锯齿让边缘更平滑 renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器尺寸设为全屏 renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比适配高清屏 document.body.appendChild(renderer.domElement); // 将渲染器的画布canvas添加到页面中 // 4. 创建雪花粒子系统 createSnow(); // 5. 添加窗口大小变化监听实现响应式 window.addEventListener(resize, onWindowResize); // 6. 添加鼠标移动监听 document.addEventListener(mousemove, onMouseMove); // 7. 开始动画循环 animate(); }关键点解析透视相机PerspectiveCamera这是模拟人眼视角的相机物体离得远看起来小离得近看起来大非常适合我们的3D雪景。那个75度的视野角给了我们一个比较开阔的视野。渲染器WebGLRenderer它是真正调用WebGL API在canvas上绘图的核心。antialias: true参数非常重要它能显著减少粒子边缘的锯齿让雪花看起来更柔和而不是像素点。相机位置camera.position.z我们把相机放在Z轴正方向500个单位的位置。因为默认情况下场景中心在(0,0,0)相机也在(0,0,0)两者重合你就什么都看不见了。向后拉才能把整个场景“尽收眼底”。3.2 创建雪花粒子系统制造暴风雪这是项目的核心。我们使用THREE.Points来代表一个粒子系统它由几何体定义每个粒子的位置和材质定义每个粒子的外观构成。function createSnow() { const particleCount 2000; // 雪花数量根据性能可以调整 const geometry new THREE.BufferGeometry(); const positions new Float32Array(particleCount * 3); // 每个顶点有x, y, z三个坐标 const sizes new Float32Array(particleCount); // 可选为每个粒子定义独立的大小 // 初始化雪花位置随机散布在一个大的长方体空间内 for (let i 0; i particleCount; i) { const i3 i * 3; // x: 在屏幕宽度两倍的范围内随机分布左右各溢出一些感觉更自然 positions[i3] (Math.random() - 0.5) * window.innerWidth * 2; // y: 在屏幕高度范围内随机分布这样一开始雪花就不会只从顶部出现 positions[i3 1] Math.random() * window.innerHeight * 1.5; // z: 在相机远近裁剪面之间随机分布产生深度感 positions[i3 2] Math.random() * 1000 - 500; // -500 到 500 // 随机化每个粒子的大小范围在5到15之间 sizes[i] Math.random() * 10 5; } geometry.setAttribute(position, new THREE.BufferAttribute(positions, 3)); geometry.setAttribute(size, new THREE.BufferAttribute(sizes, 1)); // 将大小作为属性传入 // 加载雪花纹理贴图 const textureLoader new THREE.TextureLoader(); const particleTexture textureLoader.load(./assets/snowflake.png); // 创建点材质PointsMaterial const material new THREE.PointsMaterial({ size: 12, // 基础大小会被顶点属性中的‘size’覆盖或影响 map: particleTexture, // 纹理贴图 transparent: true, // 开启透明度 opacity: 0.8, // 整体透明度 alphaTest: 0.1, // 解决透明贴图边缘黑边问题低于此透明度的像素被丢弃 blending: THREE.AdditiveBlending, // 叠加混合模式让重叠的雪花更亮效果更梦幻 color: new THREE.Color(0xffffff), // 雪花颜色白色 depthWrite: false // 关闭深度写入防止透明粒子排序错误导致的视觉问题 }); // 创建粒子系统对象 snowParticles new THREE.Points(geometry, material); scene.add(snowParticles); }深度解析与避坑指南BufferGeometry与性能我们使用BufferGeometry和Float32Array来存储顶点数据。这是Three.js中处理大量几何数据的高性能方式直接操作类型化数组比传统的Geometry已废弃效率高得多。粒子分布策略初始化时让雪花在Y轴方向上也随机分布而不是全部从顶部开始。这样页面一加载就能看到满屏雪花体验更好。Z轴的随机分布-500到500是关键它让雪花有前有后远处的雪花因为透视看起来更小、移动更慢增强了3D感。贴图Texture的重要性直接使用正方形点size会很丑。一张圆形的、边缘渐隐的雪花贴图是美感的关键。你可以用PS画一个白色柔边圆或者找现成的粒子贴图。确保背景是透明的PNG格式。材质参数精讲alphaTest: 这是解决透明贴图边缘出现黑色或白色杂边的神器。原理是设定一个透明度阈值低于这个值的像素直接不渲染。通常设置在0.05到0.5之间根据你的贴图边缘渐变情况调整。blending: THREE.AdditiveBlending: 叠加混合。这种模式下新绘制的像素颜色会和后面已绘制的像素颜色值相加结果往往更亮。对于雪花、星光、火焰这类发光或半透明的粒子效果极佳能产生柔和、光晕般的感觉。但要注意如果背景不是深色可能会过曝变白。depthWrite: false: 深度写入决定了当前物体是否参与深度缓冲区的更新。对于大量透明且互相交叉的粒子关闭深度写入可以避免因渲染顺序问题导致的粒子时隐时现的怪异现象。这是一个常见的粒子系统优化技巧。顶点大小size属性我们为每个顶点即每片雪花定义了一个独立的大小属性。虽然材质里有一个统一的size但通过geometry.setAttribute设置的size属性优先级更高可以实现雪花大小不一的效果更自然。在材质中需要启用顶点尺寸material.sizeAttenuation true默认就是true这样远处粒子的大小会因透视而衰减。3.3 动画循环与飘落逻辑让雪花动起来静态的雪花是水晶球动态的才是雪景。我们在animate函数中更新每一帧。function animate() { requestAnimationFrame(animate); // 循环调用自身形成动画循环 // 更新雪花位置 updateSnow(); // 渲染场景 renderer.render(scene, camera); } function updateSnow() { const positions snowParticles.geometry.attributes.position.array; const particleCount positions.length / 3; for (let i 0; i particleCount; i) { const i3 i * 3; // 1. 基础飘落主要影响Y轴模拟重力下落 positions[i3 1] - 1 Math.random() * 0.5; // 每帧下落1-1.5个单位 // 2. 水平微风给一个轻微的X轴随机摆动让雪花不是直直落下 positions[i3] Math.sin(Date.now() * 0.001 i) * 0.1; // 3. 鼠标交互影响核心交互逻辑 const dx positions[i3] - mouseX; const dy positions[i3 1] - (window.innerHeight - mouseY); // 注意坐标系转换 const distance Math.sqrt(dx * dx dy * dy); const influenceRadius 150; // 鼠标影响半径 if (distance influenceRadius) { // 距离越近影响越大。这里使用一个平滑的衰减函数。 const force (1 - distance / influenceRadius) * 2; // 让雪花朝着远离鼠标中心的方向移动 positions[i3] (dx / distance) * force; positions[i3 1] (dy / distance) * force; } // 4. 边界重置雪花飘出屏幕后让它从顶部随机位置重新开始 if (positions[i3 1] -window.innerHeight * 0.5) { positions[i3 1] window.innerHeight * 0.8; // 从屏幕上方80%高度出现 positions[i3] (Math.random() - 0.5) * window.innerWidth * 2; // 随机X位置 positions[i3 2] Math.random() * 1000 - 500; // 随机Z位置刷新深度 } } // 关键步骤通知Three.js位置数据已经更新需要重绘 snowParticles.geometry.attributes.position.needsUpdate true; // 可选让整个粒子系统缓慢旋转增加动态感 snowParticles.rotation.y 0.001; }逻辑拆解与优化技巧基础运动positions[i3 1] - 1 ...是雪花下落的主逻辑。值越大下落越快。加上一点随机数让雪花速度有细微差别。水平摆动Math.sin(Date.now() * 0.001 i)利用正弦函数和时间、粒子索引结合产生一种有节奏但又不完全同步的左右摇摆模拟微风。 i确保了每个粒子的摆动相位不同避免所有雪花整齐划一地摇摆。鼠标交互算法这是实现“随鼠标移动”效果的核心。坐标系转换WebGL/Three.js的坐标系中心在屏幕中心Y轴向上。而浏览器鼠标事件的坐标系原点在左上角Y轴向下。所以我们需要转换window.innerHeight - mouseY。距离计算与力场计算每片雪花与鼠标点的距离。我们设定一个influenceRadius影响半径如150像素。只有在这个半径内的雪花才会被影响。力的方向与大小力的方向是雪花指向鼠标的向量方向(dx/distance, dy/distance)。但我们希望雪花是被“吹开”所以力的方向就是背离鼠标的也就是加上这个向量。力的大小force随着距离增大而衰减(1 - distance / influenceRadius)距离越近吹开的力量越大。乘以一个系数如2来控制整体交互强度。效果当鼠标移动时鼠标周围的雪花会像被气流推开一样形成一个动态的空洞或涟漪非常自然。边界重置与循环这是营造“无限下雪”感觉的关键。当雪花的Y坐标低于屏幕底部边界这里设为-window.innerHeight * 0.5给了一点缓冲时就把它重置到屏幕上方的一个随机位置并重新分配一个随机的Z深度。这样雪花就循环起来了粒子总数不变性能恒定。needsUpdate true这是最重要的一个步骤也是最容易忘记的坑当我们直接修改BufferAttribute的底层数组array时Three.js并不知道数据发生了变化。必须手动将对应属性的needsUpdate标志设为true渲染器才会在下一帧使用新的数据。忘记设置会导致你的雪花“纹丝不动”。3.4 交互与响应式处理最后补全事件监听函数让交互和自适应生效。function onMouseMove(event) { // 将鼠标坐标转换为以屏幕中心为原点的坐标系 mouseX event.clientX - windowHalfX; mouseY event.clientY - windowHalfY; } function onWindowResize() { windowHalfX window.innerWidth / 2; windowHalfY window.innerHeight / 2; // 更新相机宽高比 camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); // 必须调用此方法相机变更才会生效 // 更新渲染器尺寸 renderer.setSize(window.innerWidth, window.innerHeight); } // 页面加载完成后初始化 window.onload init;注意性能考量。粒子数量particleCount是性能的最大影响因素。在普通笔记本上2000-5000个粒子可以保持60fps。如果追求极致的漫天大雪效果可以尝试增加到8000或10000但务必在不同设备上测试。如果帧率下降可以考虑1. 减少粒子数量2. 使用更小的贴图如32x32像素3. 在WebGLRenderer参数中关闭抗锯齿antialias: false。4. 常见问题、优化与扩展方向4.1 问题排查速查表在实际实现中你可能会遇到以下问题问题现象可能原因解决方案屏幕一片空白控制台无报错1. Three.js库未正确加载。2. 相机位置与场景物体重合。1. 检查three.min.js路径打开F12网络面板看是否404。2. 确保camera.position.z被设置为一个正数如500。雪花显示为黑色或彩色方块雪花贴图加载失败。1. 检查贴图路径。2. 贴图格式需为浏览器支持的PNG, JPG。3. 使用TextureLoader的onError回调打印错误。雪花边缘有黑色或白色锯齿框透明贴图混合问题。在材质参数中设置alphaTest: 0.1调整值并确保transparent: true。鼠标交互无效果1. 鼠标坐标转换错误。2.updateSnow函数中的交互逻辑未执行或计算有误。3.mouseX/Y变量未正确更新。1. 在onMouseMove和updateSnow中打印mouseX, mouseY和雪花坐标检查计算逻辑。2. 确认influenceRadius值是否太小。雪花不动或动一下就不动了未设置position.needsUpdate true。在updateSnow函数末尾确保有snowParticles.geometry.attributes.position.needsUpdate true;。页面滚动时出现白边或抖动页面有默认的边距或滚动条。在CSS中为body, html添加样式{ margin: 0; padding: 0; overflow: hidden; }。性能很差卡顿粒子数量过多或设备性能不足。1. 减少particleCount。2. 尝试在渲染器创建时禁用抗锯齿{ antialias: false }。3. 检查是否有其他耗性能的脚本在运行。4.2 视觉与交互优化点子基础版本跑通后你可以尝试以下优化让效果更出彩多层次雪花创建2-3个粒子系统分别代表远处的小雪花、中等雪花和近处的大雪花。赋予它们不同的下落速度、大小和透明度。远处的慢而小近处的快而大深度感和层次感会暴增。风力系统不要只让鼠标影响雪花。可以定义一个全局的“风向”向量如windForce {x: 0.2, y: 0}在updateSnow中让所有雪花都受到一个恒定的水平力影响模拟自然风。鼠标交互可以作为一个局部扰动叠加在上面。雪花旋转为几何体添加一个rotation属性Float32Array在updateSnow中更新每个粒子的旋转角度并在顶点着色器或通过PointsMaterial的onBeforeCompile方法中使用让雪花在飘落时自身旋转。交互效果增强现在的交互是“推开”。你可以尝试改为“吸引”或者根据鼠标移动速度动态改变influenceRadius和力的大小快速滑动时产生更强的“气流”。环境光与色调在场景中添加THREE.AmbientLight环境光和THREE.DirectionalLight平行光模拟月光并调整光的颜色偏蓝或白可以让雪花的明暗更有层次。甚至可以用THREE.Fog雾效来加强远景的朦胧感。4.3 集成到真实项目中的建议如果你想把这个效果用到正式网站中需要注意资源加载使用THREE.TextureLoader的load方法时考虑添加加载管理器THREE.LoadingManager来显示加载进度或者在纹理加载完成前显示一个占位符。可控性与销毁最好将整个3D场景封装成一个类如Snowfall3D提供init(),start(),stop(),destroy()等方法。这样可以在页面切换或不需要时正确释放WebGL上下文和内存避免内存泄漏。在destroy()中一定要记得移除事件监听器、调用renderer.dispose()并清空scene。性能监控在开发阶段可以引入stats.js库来实时监控帧率FPS帮助优化。降级方案虽然WebGL支持度已经很广但仍有极少数旧浏览器或特殊环境不支持。可以通过if (renderer) { ... }来判断WebGLRenderer是否创建成功失败则回退到一个静态背景图或简单的CSS动画保证基本体验。这个“全屏3D雪花飘落”项目从技术上看是理解Three.js粒子系统和基础3D交互的一个绝佳练手小demo从效果上看它能为网页瞬间注入灵动和氛围。代码不算多但涉及了3D场景搭建、粒子系统、动画循环、用户交互等多个核心概念。希望这份详细的拆解能帮你不仅复现这个效果更能理解其背后的原理从而创造出属于自己的、更酷的3D网页特效。本文还有配套的精品资源点击获取 
长河君 · 2026/9/2 11:20:39 · 阅读 1.2k 基于Three.js的3D雪花粒子系统实现与交互优化
简介这是一份面向前端初学者与HTML5进阶学习者的交互式视觉效果实践资源聚焦Canvas与WebGL在3D动态场景中的落地应用。资源实现全屏3D雪花飘落动画并支持鼠标移动实时影响雪花运动轨迹兼顾视觉表现力与交互逻辑适用于节日专题页、作品集首页或HTML5特效教学演示。压缩包共8个文件111KB含3个核心JS脚本负责3D渲染、粒子系统与主控逻辑、1个HTML入口页、2张背景图JPG、1张PNG素材及1份使用说明文本结构精简、依赖零外部库开箱即用。目前已有103人学习下载读者可直接运行index.html查看效果深入理解Snow.js与ThreeCanvas.js中坐标变换、帧循环控制、鼠标事件绑定及Canvas/WebGL混合渲染的关键实现细节是掌握现代Web图形编程的轻量级实战范例。1. 项目概述一个会呼吸的3D雪景最近在整理一些老项目的源码翻到了一个挺有意思的小玩意儿——“基于HTML5实现全屏3D雪花飘落动态源码”。这可不是那种简单的GIF背景或者CSS动画而是一个真正具有空间感的3D雪景模拟。雪花不是贴在屏幕上的贴纸而是有远近、有大小、会旋转、会随着你的鼠标气流“飘动”的立体粒子。当时做这个的初衷是想给一个冬季主题的官网做个既不喧宾夺主又能提升氛围感的动态背景结果效果出奇的好后来很多朋友都问我要源码。今天我就把这个v1.0版本的实现思路和核心代码拆解一下你完全可以把它用到你的个人博客、作品集页面或者任何需要一点冬日浪漫气息的网页里。简单来说这个项目就是用纯前端技术HTML5 JavaScript在浏览器里构建了一个轻量级的3D粒子系统专门用来模拟下雪。它的核心亮点有两个一是“真3D”利用WebGL通过Three.js库让雪花在三维空间中运动有Z轴深度视觉上更真实二是“可交互”雪花的飘落轨迹会受到鼠标位置的影响仿佛你的光标是一阵微风划过屏幕时能“吹动”雪花互动感十足。实现起来并不复杂即使你对3D编程不熟跟着下面的步骤也能搞定。接下来我会从环境搭建、核心原理、代码逐行解析到常见坑点完整地走一遍。2. 技术选型与整体架构设计2.1 为什么是HTML5与Three.js首先明确这里的“HTML5”是一个广义概念核心指的是现代浏览器支持的Canvas绘图API和WebGL图形接口。纯用CSS3的transform和animation也能做平面雪花飘落但想要实现有透视关系的3D效果、复杂的粒子运动和鼠标交互就必须动用更底层的图形能力。Three.js是我们的不二之选。它是一个封装了WebGL复杂操作的JavaScript 3D库大大降低了3D编程的门槛。你不用直接去写晦涩的WebGL着色器代码通过Three.js提供的场景Scene、相机Camera、渲染器Renderer和网格Mesh等概念就能像搭积木一样构建3D世界。对于雪花粒子这种大量重复的简单物体Three.js的粒子系统Points性能极高可以轻松管理成千上万个雪花而保持流畅。整体架构思路如下初始化3D世界创建场景、相机和WebGL渲染器并将其占满整个浏览器窗口。创建雪花粒子系统生成一定数量比如2000个的“雪花”粒子每个粒子是一个具有3D坐标的顶点。定义材质与外观为这些粒子指定一个贴图一张雪花的PNG图片并设置大小、透明度等属性让它们看起来像雪花。实现动画循环利用requestAnimationFrame函数在每一帧更新所有雪花的位置模拟飘落和旋转。注入交互逻辑监听鼠标移动事件根据鼠标当前位置计算出一个“力场”或“影响区域”让该区域内的雪花产生位置偏移模拟被风吹动的效果。这个架构清晰地将渲染、数据、逻辑分离后续要调整雪花的数量、速度、交互强度都非常方便。2.2 关键依赖与项目结构项目非常简单只需要一个HTML文件和一些静态资源。不需要构建工具如Webpack或Vite当然用在正式项目里打包一下更好。snowfall-3d-v1.0/ ├── index.html # 主入口文件 ├── js/ │ └── main.js # 主要的JavaScript逻辑代码 ├── lib/ │ └── three.min.js # Three.js库文件建议使用r128版本 └── assets/ └── snowflake.png # 雪花粒子贴图建议使用带透明通道的圆形渐变PNG注意Three.js库的获取。强烈建议从Three.js官网https://threejs.org下载指定版本的three.min.js或者使用可靠的CDN链接。不要随意使用来路不明的版本不同版本间API可能有细微差别容易导致代码运行错误。3. 核心实现细节拆解3.1 初始化3D场景搭建舞台一切从创建一个空的3D场景开始。我们在main.js中编写以下代码// 引入Three.js库后全局会有THREE对象 let scene, camera, renderer; let snowParticles; let mouseX 0, mouseY 0; // 记录鼠标位置 let windowHalfX window.innerWidth / 2; let windowHalfY window.innerHeight / 2; function init() { // 1. 创建场景 scene new THREE.Scene(); // 可以给场景一个淡淡的背景色比如冬季傍晚的深蓝色 scene.background new THREE.Color(0x0a1a2a); // 2. 创建透视相机 camera new THREE.PerspectiveCamera( 75, // 视野角度FOV单位是度。值越大看到的场景越广类似广角镜头。 window.innerWidth / window.innerHeight, // 宽高比保持与窗口一致 0.1, // 近裁剪面。比这个距离更近的物体不会被渲染。 2000 // 远裁剪面。比这个距离更远的物体不会被渲染。 ); camera.position.z 500; // 将相机沿Z轴向后移动让我们能看清场景 // 3. 创建WebGL渲染器 renderer new THREE.WebGLRenderer({ antialias: true }); // 开启抗锯齿让边缘更平滑 renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器尺寸设为全屏 renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比适配高清屏 document.body.appendChild(renderer.domElement); // 将渲染器的画布canvas添加到页面中 // 4. 创建雪花粒子系统 createSnow(); // 5. 添加窗口大小变化监听实现响应式 window.addEventListener(resize, onWindowResize); // 6. 添加鼠标移动监听 document.addEventListener(mousemove, onMouseMove); // 7. 开始动画循环 animate(); }关键点解析透视相机PerspectiveCamera这是模拟人眼视角的相机物体离得远看起来小离得近看起来大非常适合我们的3D雪景。那个75度的视野角给了我们一个比较开阔的视野。渲染器WebGLRenderer它是真正调用WebGL API在canvas上绘图的核心。antialias: true参数非常重要它能显著减少粒子边缘的锯齿让雪花看起来更柔和而不是像素点。相机位置camera.position.z我们把相机放在Z轴正方向500个单位的位置。因为默认情况下场景中心在(0,0,0)相机也在(0,0,0)两者重合你就什么都看不见了。向后拉才能把整个场景“尽收眼底”。3.2 创建雪花粒子系统制造暴风雪这是项目的核心。我们使用THREE.Points来代表一个粒子系统它由几何体定义每个粒子的位置和材质定义每个粒子的外观构成。function createSnow() { const particleCount 2000; // 雪花数量根据性能可以调整 const geometry new THREE.BufferGeometry(); const positions new Float32Array(particleCount * 3); // 每个顶点有x, y, z三个坐标 const sizes new Float32Array(particleCount); // 可选为每个粒子定义独立的大小 // 初始化雪花位置随机散布在一个大的长方体空间内 for (let i 0; i particleCount; i) { const i3 i * 3; // x: 在屏幕宽度两倍的范围内随机分布左右各溢出一些感觉更自然 positions[i3] (Math.random() - 0.5) * window.innerWidth * 2; // y: 在屏幕高度范围内随机分布这样一开始雪花就不会只从顶部出现 positions[i3 1] Math.random() * window.innerHeight * 1.5; // z: 在相机远近裁剪面之间随机分布产生深度感 positions[i3 2] Math.random() * 1000 - 500; // -500 到 500 // 随机化每个粒子的大小范围在5到15之间 sizes[i] Math.random() * 10 5; } geometry.setAttribute(position, new THREE.BufferAttribute(positions, 3)); geometry.setAttribute(size, new THREE.BufferAttribute(sizes, 1)); // 将大小作为属性传入 // 加载雪花纹理贴图 const textureLoader new THREE.TextureLoader(); const particleTexture textureLoader.load(./assets/snowflake.png); // 创建点材质PointsMaterial const material new THREE.PointsMaterial({ size: 12, // 基础大小会被顶点属性中的‘size’覆盖或影响 map: particleTexture, // 纹理贴图 transparent: true, // 开启透明度 opacity: 0.8, // 整体透明度 alphaTest: 0.1, // 解决透明贴图边缘黑边问题低于此透明度的像素被丢弃 blending: THREE.AdditiveBlending, // 叠加混合模式让重叠的雪花更亮效果更梦幻 color: new THREE.Color(0xffffff), // 雪花颜色白色 depthWrite: false // 关闭深度写入防止透明粒子排序错误导致的视觉问题 }); // 创建粒子系统对象 snowParticles new THREE.Points(geometry, material); scene.add(snowParticles); }深度解析与避坑指南BufferGeometry与性能我们使用BufferGeometry和Float32Array来存储顶点数据。这是Three.js中处理大量几何数据的高性能方式直接操作类型化数组比传统的Geometry已废弃效率高得多。粒子分布策略初始化时让雪花在Y轴方向上也随机分布而不是全部从顶部开始。这样页面一加载就能看到满屏雪花体验更好。Z轴的随机分布-500到500是关键它让雪花有前有后远处的雪花因为透视看起来更小、移动更慢增强了3D感。贴图Texture的重要性直接使用正方形点size会很丑。一张圆形的、边缘渐隐的雪花贴图是美感的关键。你可以用PS画一个白色柔边圆或者找现成的粒子贴图。确保背景是透明的PNG格式。材质参数精讲alphaTest: 这是解决透明贴图边缘出现黑色或白色杂边的神器。原理是设定一个透明度阈值低于这个值的像素直接不渲染。通常设置在0.05到0.5之间根据你的贴图边缘渐变情况调整。blending: THREE.AdditiveBlending: 叠加混合。这种模式下新绘制的像素颜色会和后面已绘制的像素颜色值相加结果往往更亮。对于雪花、星光、火焰这类发光或半透明的粒子效果极佳能产生柔和、光晕般的感觉。但要注意如果背景不是深色可能会过曝变白。depthWrite: false: 深度写入决定了当前物体是否参与深度缓冲区的更新。对于大量透明且互相交叉的粒子关闭深度写入可以避免因渲染顺序问题导致的粒子时隐时现的怪异现象。这是一个常见的粒子系统优化技巧。顶点大小size属性我们为每个顶点即每片雪花定义了一个独立的大小属性。虽然材质里有一个统一的size但通过geometry.setAttribute设置的size属性优先级更高可以实现雪花大小不一的效果更自然。在材质中需要启用顶点尺寸material.sizeAttenuation true默认就是true这样远处粒子的大小会因透视而衰减。3.3 动画循环与飘落逻辑让雪花动起来静态的雪花是水晶球动态的才是雪景。我们在animate函数中更新每一帧。function animate() { requestAnimationFrame(animate); // 循环调用自身形成动画循环 // 更新雪花位置 updateSnow(); // 渲染场景 renderer.render(scene, camera); } function updateSnow() { const positions snowParticles.geometry.attributes.position.array; const particleCount positions.length / 3; for (let i 0; i particleCount; i) { const i3 i * 3; // 1. 基础飘落主要影响Y轴模拟重力下落 positions[i3 1] - 1 Math.random() * 0.5; // 每帧下落1-1.5个单位 // 2. 水平微风给一个轻微的X轴随机摆动让雪花不是直直落下 positions[i3] Math.sin(Date.now() * 0.001 i) * 0.1; // 3. 鼠标交互影响核心交互逻辑 const dx positions[i3] - mouseX; const dy positions[i3 1] - (window.innerHeight - mouseY); // 注意坐标系转换 const distance Math.sqrt(dx * dx dy * dy); const influenceRadius 150; // 鼠标影响半径 if (distance influenceRadius) { // 距离越近影响越大。这里使用一个平滑的衰减函数。 const force (1 - distance / influenceRadius) * 2; // 让雪花朝着远离鼠标中心的方向移动 positions[i3] (dx / distance) * force; positions[i3 1] (dy / distance) * force; } // 4. 边界重置雪花飘出屏幕后让它从顶部随机位置重新开始 if (positions[i3 1] -window.innerHeight * 0.5) { positions[i3 1] window.innerHeight * 0.8; // 从屏幕上方80%高度出现 positions[i3] (Math.random() - 0.5) * window.innerWidth * 2; // 随机X位置 positions[i3 2] Math.random() * 1000 - 500; // 随机Z位置刷新深度 } } // 关键步骤通知Three.js位置数据已经更新需要重绘 snowParticles.geometry.attributes.position.needsUpdate true; // 可选让整个粒子系统缓慢旋转增加动态感 snowParticles.rotation.y 0.001; }逻辑拆解与优化技巧基础运动positions[i3 1] - 1 ...是雪花下落的主逻辑。值越大下落越快。加上一点随机数让雪花速度有细微差别。水平摆动Math.sin(Date.now() * 0.001 i)利用正弦函数和时间、粒子索引结合产生一种有节奏但又不完全同步的左右摇摆模拟微风。 i确保了每个粒子的摆动相位不同避免所有雪花整齐划一地摇摆。鼠标交互算法这是实现“随鼠标移动”效果的核心。坐标系转换WebGL/Three.js的坐标系中心在屏幕中心Y轴向上。而浏览器鼠标事件的坐标系原点在左上角Y轴向下。所以我们需要转换window.innerHeight - mouseY。距离计算与力场计算每片雪花与鼠标点的距离。我们设定一个influenceRadius影响半径如150像素。只有在这个半径内的雪花才会被影响。力的方向与大小力的方向是雪花指向鼠标的向量方向(dx/distance, dy/distance)。但我们希望雪花是被“吹开”所以力的方向就是背离鼠标的也就是加上这个向量。力的大小force随着距离增大而衰减(1 - distance / influenceRadius)距离越近吹开的力量越大。乘以一个系数如2来控制整体交互强度。效果当鼠标移动时鼠标周围的雪花会像被气流推开一样形成一个动态的空洞或涟漪非常自然。边界重置与循环这是营造“无限下雪”感觉的关键。当雪花的Y坐标低于屏幕底部边界这里设为-window.innerHeight * 0.5给了一点缓冲时就把它重置到屏幕上方的一个随机位置并重新分配一个随机的Z深度。这样雪花就循环起来了粒子总数不变性能恒定。needsUpdate true这是最重要的一个步骤也是最容易忘记的坑当我们直接修改BufferAttribute的底层数组array时Three.js并不知道数据发生了变化。必须手动将对应属性的needsUpdate标志设为true渲染器才会在下一帧使用新的数据。忘记设置会导致你的雪花“纹丝不动”。3.4 交互与响应式处理最后补全事件监听函数让交互和自适应生效。function onMouseMove(event) { // 将鼠标坐标转换为以屏幕中心为原点的坐标系 mouseX event.clientX - windowHalfX; mouseY event.clientY - windowHalfY; } function onWindowResize() { windowHalfX window.innerWidth / 2; windowHalfY window.innerHeight / 2; // 更新相机宽高比 camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); // 必须调用此方法相机变更才会生效 // 更新渲染器尺寸 renderer.setSize(window.innerWidth, window.innerHeight); } // 页面加载完成后初始化 window.onload init;注意性能考量。粒子数量particleCount是性能的最大影响因素。在普通笔记本上2000-5000个粒子可以保持60fps。如果追求极致的漫天大雪效果可以尝试增加到8000或10000但务必在不同设备上测试。如果帧率下降可以考虑1. 减少粒子数量2. 使用更小的贴图如32x32像素3. 在WebGLRenderer参数中关闭抗锯齿antialias: false。4. 常见问题、优化与扩展方向4.1 问题排查速查表在实际实现中你可能会遇到以下问题问题现象可能原因解决方案屏幕一片空白控制台无报错1. Three.js库未正确加载。2. 相机位置与场景物体重合。1. 检查three.min.js路径打开F12网络面板看是否404。2. 确保camera.position.z被设置为一个正数如500。雪花显示为黑色或彩色方块雪花贴图加载失败。1. 检查贴图路径。2. 贴图格式需为浏览器支持的PNG, JPG。3. 使用TextureLoader的onError回调打印错误。雪花边缘有黑色或白色锯齿框透明贴图混合问题。在材质参数中设置alphaTest: 0.1调整值并确保transparent: true。鼠标交互无效果1. 鼠标坐标转换错误。2.updateSnow函数中的交互逻辑未执行或计算有误。3.mouseX/Y变量未正确更新。1. 在onMouseMove和updateSnow中打印mouseX, mouseY和雪花坐标检查计算逻辑。2. 确认influenceRadius值是否太小。雪花不动或动一下就不动了未设置position.needsUpdate true。在updateSnow函数末尾确保有snowParticles.geometry.attributes.position.needsUpdate true;。页面滚动时出现白边或抖动页面有默认的边距或滚动条。在CSS中为body, html添加样式{ margin: 0; padding: 0; overflow: hidden; }。性能很差卡顿粒子数量过多或设备性能不足。1. 减少particleCount。2. 尝试在渲染器创建时禁用抗锯齿{ antialias: false }。3. 检查是否有其他耗性能的脚本在运行。4.2 视觉与交互优化点子基础版本跑通后你可以尝试以下优化让效果更出彩多层次雪花创建2-3个粒子系统分别代表远处的小雪花、中等雪花和近处的大雪花。赋予它们不同的下落速度、大小和透明度。远处的慢而小近处的快而大深度感和层次感会暴增。风力系统不要只让鼠标影响雪花。可以定义一个全局的“风向”向量如windForce {x: 0.2, y: 0}在updateSnow中让所有雪花都受到一个恒定的水平力影响模拟自然风。鼠标交互可以作为一个局部扰动叠加在上面。雪花旋转为几何体添加一个rotation属性Float32Array在updateSnow中更新每个粒子的旋转角度并在顶点着色器或通过PointsMaterial的onBeforeCompile方法中使用让雪花在飘落时自身旋转。交互效果增强现在的交互是“推开”。你可以尝试改为“吸引”或者根据鼠标移动速度动态改变influenceRadius和力的大小快速滑动时产生更强的“气流”。环境光与色调在场景中添加THREE.AmbientLight环境光和THREE.DirectionalLight平行光模拟月光并调整光的颜色偏蓝或白可以让雪花的明暗更有层次。甚至可以用THREE.Fog雾效来加强远景的朦胧感。4.3 集成到真实项目中的建议如果你想把这个效果用到正式网站中需要注意资源加载使用THREE.TextureLoader的load方法时考虑添加加载管理器THREE.LoadingManager来显示加载进度或者在纹理加载完成前显示一个占位符。可控性与销毁最好将整个3D场景封装成一个类如Snowfall3D提供init(),start(),stop(),destroy()等方法。这样可以在页面切换或不需要时正确释放WebGL上下文和内存避免内存泄漏。在destroy()中一定要记得移除事件监听器、调用renderer.dispose()并清空scene。性能监控在开发阶段可以引入stats.js库来实时监控帧率FPS帮助优化。降级方案虽然WebGL支持度已经很广但仍有极少数旧浏览器或特殊环境不支持。可以通过if (renderer) { ... }来判断WebGLRenderer是否创建成功失败则回退到一个静态背景图或简单的CSS动画保证基本体验。这个“全屏3D雪花飘落”项目从技术上看是理解Three.js粒子系统和基础3D交互的一个绝佳练手小demo从效果上看它能为网页瞬间注入灵动和氛围。代码不算多但涉及了3D场景搭建、粒子系统、动画循环、用户交互等多个核心概念。希望这份详细的拆解能帮你不仅复现这个效果更能理解其背后的原理从而创造出属于自己的、更酷的3D网页特效。本文还有配套的精品资源点击获取