粒子

基本粒子系统

const particlesGeometry = new THREE.SphereGeometry(1,32,32);
const particlesMaterial = new THREE.PointsMaterial()
particlesMaterial.size = 0.02

// points
const particles = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particles)

// 加载贴图
const textureLoader = new THREE.TextureLoader();
const particleTexture = textureLoader.load('./textures/particles/2.png');

// 使用透明贴图
particlesMaterial.transparent = true;
particlesMaterial.alphaMap = particleTexture;
// 避免透明贴图产生黑色
particlesMaterial.depthTest = false;
// 避免粒子被遮挡
particlesMaterial.depthWrite = false;
// 设置颜色
particlesMaterial.color = new THREE.Color('#ff88cc');
// 防止随摄像头缩放
particlesMaterial.sizeAttenuation = true;
// alpha测试（让粒子正确渲染的方法之一。用于可能有互相遮挡的情况）
particlesMaterial.alphaTest = 0.001;
// 深度测试（设置为false可以正确遮挡粒子。但如果有其他物体，我们会看到本应遮挡在后方的内容）
particlesMaterial.depthTest = false;

// 避免粒子被遮挡
particlesMaterial.depthWrite = false;

// 避免渲染顺序问题
particlesMaterial.blending = THREE.AdditiveBlending;

// 顶点着色
particlesMaterial.vertexColors = true;