threejs Point

利用point实现雪花下落的效果

const amount=500;
const radius=150;
const position = new Float32Array(amount * 3);//生成的数据长度为amount * 3，每一个数据元素 均为0
const colors = new Float32Array(amount * 3);
const sizes = new Float32Array(amount);

const vertex = new THREE.Vector3();
function addSnow1(){
  for(let i=0 ;i<amount;i++){
    vertex.x=(Math.random()*2-1)*radius;
    vertex.y=(Math.random()*2-1)*radius;
    vertex.z=(Math.random()*2-1)*radius;

    vertex.toArray(position,i*3);//将vertex赋值给positions（索引从i*3开始）
  }
  
  const geometry = new THREE.BufferGeometry();
  //可用于顶点着色器
  geometry.setAttribute('position',new THREE.BufferAttribute(position,3));
  geometry.setAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
  geometry.setAttribute('size',new THREE.BufferAttribute(sizes,1));

  let textureLoader=new THREE.TextureLoader();
  textureLoader.load('./textures/snowflake2.png',function(texture){
    
    const material = new THREE.PointsMaterial( {
      side: THREE.DoubleSide ,
      map:texture,
      blending: THREE.AdditiveBlending,
      depthTest: false,//关闭深度检测 避免前面雪花的透明边框遮挡后面雪花
      size :10,
    } );
    sphere = new THREE.Points( geometry, material );
    scene.add( sphere );
  });
}

在render()中

if(sphere){
    const attributes = sphere.geometry.attributes;
    for(let i=0;i<attributes.position.array.length;i=i+3){
      if(attributes.position.array[i+1]>-radius){
        attributes.position.array[i+1]-=0.2;
      }else{
        attributes.position.array[i+1]=radius;
      }
      
    }
    attributes.position.needsUpdate = true;
  }