Threejs下雪效果（一）

百年内必成大牛

已于 2022-11-30 17:17:22 修改

阅读量555

点赞数

分类专栏： ThreeJS 文章标签：贴图

于 2022-11-07 21:31:56 首次发布

本文链接：https://blog.csdn.net/qq465908194/article/details/127739885

版权

有些效果需要到我的博客中才能看到

目的

尝试一下通过粒子系统制造下雪的效果

原理

方法一：通过BufferGeometry绘制n个点，并给点材质传下雪的贴图，渲染的时候对点进行旋转，来实现下雪的效果。

方法二：通过精灵模型Sprite也可以实现（下次一定）

实现

1、制造雪花

实现逻辑
1、创造粒子缓冲区几何体
2、创建缓冲区存储雪花的粒子
3、随机生成顶点的位置并给粒子缓冲区几何体传值
4、设置点的纹理材质（雪花贴图）
5、加入场景搞定！

//1、创造粒子缓冲区几何体
const particlesGeometry = new THREE.BufferGeometry();
const count = 10000;

//2、创建缓冲区存储雪花的粒子
const positions = new Float32Array(count * 3);

//3、随机生成顶点的位置并给粒子缓冲区几何体传值
//Math.random()生成0到小于1的值，生成-100到100的点
  for (let i = 0; i < count * 3; i++) {
    positions[i] = Math.random() * 100-100;
  }
    particlesGeometry.setAttribute(
    "position",
    new THREE.BufferAttribu