粒子特效

概述

问题

1. 视频中讲解的SphereBufferGeometry 对象没有找到；使用SphereGeometry代替SphereBufferGeometry发现题图有为题。本意贴图到创建的粒子上但贴到整个物体上。
2. 设置缓冲几何体的位置和颜色在BufferGeometry实例对象上
   设置位置
   particlesGeometry.setAttribute('position', new BufferAttribute(positions, 3))
   设置颜色
   particlesGeometry.setAttribute('color', new BufferAttribute(colors, 3))
3. 创建材质时使用PointsMaterial()函数
   const pointsMateial = new PointsMaterial()
4. 创建粒子集合体使用Points()函数
   const points = new Points(particlesGeometry, pointsMaterial)
5. 点材质的属性
   • size 设置点的大小
   • sizeAttenuation 设置点的大小是否因相机深度而衰减,默认为true(大概理解为近大远小)
   • vertexColors 设置启动顶点颜色(设置完材质颜色后，要配合这个属性使用否则不生效)

function selfGeometry() {
    const particlesGeometry = new BufferGeometry()
    const count = 5000
    // 设置缓冲区数组
    const positions = new Float32Array(count * 3)
    const colors = new Float32Array(count * 3)
    // 设置顶点
    for (let i = 0; i < count * 3; i++) {
        positions[i] = (Math.random() - 0.5) * 100
        colors[i] = Math.random()
    }
    particlesGeometry.setAttribute('position', new BufferAttribute(positions, 3))
    // 设置点的颜色
    particlesGeometry.setAttribute('color', new BufferAttribute(colors, 3))
    // 设置材质
    const pointsMaterial = new PointsMaterial()
    //  设置点的大小
    pointsMaterial.size = 0.5
    // 设置是否因相机深度而衰减,默认为true
    pointsMaterial.sizeAttenuation = true
    // 设置启动顶点颜色
    pointsMaterial.vertexColors = true    
    const points = new Points(particlesGeometry, pointsMaterial)
    return points
}