threejs模型粒子化

将模型粒子化可用于一些特殊的效果，例如打散后再自动恢复模型形状等。

此功能在threejs中实现比较容易，导入模型后，threejs会自动将模型每个顶点映射为一个点。以下是代码

const modelMaterial = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentSahder,
    transparent: true, 
    side: THREE.DoubleSide, 
    depthWrite: false,
    uniforms: { 
        uTime: {value: 0.0},
        uResolution: { value: new THREE.Vector2(sizes.width, sizes.height )}
    }
}) 
// 将平面模型粒子化，也可以导入其它模型。
const particlesGeometry = new THREE.PlaneGeometry(10, 10, 32, 32)
const particles = new THREE.Points(particlesGeometry, modelMaterial)
scene.add(particles)

以下是可选在颜色着色器中代码

   // 点大小,uResolution是传入的屏长宽比
    gl_PointSize = 0.15 * uResolution.y;
    gl_PointSize *= (1.0 / - viewPosition.z);

效果如下