Three.js - 通过粒子实现下雪效果

最新推荐文章于 2025-06-17 17:42:36 发布

「已注销」

最新推荐文章于 2025-06-17 17:42:36 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： threejs

本文链接：https://blog.youkuaiyun.com/ithanmang/article/details/81704736

本文介绍如何利用Three.js库实现下雪效果，通过加载雪花纹理，样式化材质，创建几何体并更新粒子顶点数据，实现逼真的下雪场景。详细步骤包括加载纹理、设置材质贴图、创建粒子几何体以及更新粒子数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现下雪的效果，就需要一个雪花纹理或者通过canvas绘制的雪花，这里通过给每个粒子设置纹理贴图来实现雪花粒子。
示例：https://ithanmang.gitee.io/threejs/home/201808/20180815/02-rainy-scene.html
效果
这里写图片描述

1、首先，需要加载纹理。

/* 雪花图片 */
let texture = new THREE.TextureLoader().load('../../textures/particles/snowflake2.png');

这里写图片描述

2、样式化材质，加入贴图

let pointsMaterial = new THREE.PointsMaterial({
   
   

    size:5,
    transparent:true,
    opacity:0.9,
    map:texture,
    blending:THREE.AdditiveBlending,
    sizeAttenuation:true,
    depthTest: false
});

3、创建几何体并设置每一个顶点

let geometry= new THREE.Geometry();

let range = 100;

for (let i = 0; i < 1500; i++ ) {
   
   

    let vertice = new THREE.Vector3(
        Math.random() * range - range / 2,
        Math.random() * range * 1.5,
        Math.random() * range - range / 2);
    /* 纵向移动速度 */
    vertice.velocityY = 0.1 + Math.random() / 5;
    /* 横向移动速度 */
    vertice.velocityX = (Math.random() - 0.5) / 3;

    /* 将顶点加入几何 */
    geometry.vertices.push(vertice);

}

geometry.center();

points = new THREE.Points(geometry, pointsMaterial);

scene.add(points);