threejs 火焰粒子效果

以下是基于three.js实现的火焰粒子效果的代码和效果演示：

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建粒子材质
var particleMaterial = new THREE.SpriteMaterial({
    color: 0xff0000,
    map: new THREE.TextureLoader().load('https://threejs.org/examples/textures/sprites/ball.png'),
    blending: THREE.AdditiveBlending,
    depthTest: false,
    transparent: true
});

// 创建粒子系统
var particleSystem = new THREE.GPUParticleSystem({
    maxParticles: 250000
});
scene.add(particleSystem);

// 更新粒子系统
function update() {
    requestAnimationFrame(update);
    particleSystem.update();
    renderer.render(scene, camera);
}
update();

// 添加火焰粒子
var fireOptions = {
    position: new THREE.Vector3(),
    positionRandomness: 0.3,
    velocity: new THREE.Vector3(),
    velocityRandomness: 0.5,
    color: 0xff0000,
    colorRandomness: 0.2,
    turbulence: 0.5,
    lifetime: 2,
    size: 10,
    sizeRandomness: 1
};
var fireSpawnerOptions = {
    spawnRate: 3000,
    horizontalSpeed: 1.5,
    verticalSpeed: 1.33,
    timeScale: 1
};
var fireEmitter = new THREE.GPUParticleEmitter(particleSystem);
fireEmitter.setOptions(fireOptions);
fireEmitter.setVelocity(new THREE.Vector3(0, 1, 0));
fireEmitter.setSpawnerOptions(fireSpawnerOptions);
fireEmitter.enableEmitting();

// 添加烟粒子
var smokeOptions = {
    position: new THREE.Vector3(),
    positionRandomness: 1,
    velocity: new THREE.Vector3(),
    velocityRandomness: 0.5,
    color: 0x000000,
    colorRandomness: 0.2,
    turbulence: 0.5,
    lifetime: 3,
    size: 20,
    sizeRandomness: 1
};
var smokeSpawnerOptions = {
    spawnRate: 1000,
    horizontalSpeed: 0.1,
    verticalSpeed: 0.1,
    timeScale: 1
};
var smokeEmitter = new THREE.GPUParticleEmitter(particleSystem);
smokeEmitter.setOptions(smokeOptions);
smokeEmitter.setVelocity(new THREE.Vector3(0, 1, 0));
smokeEmitter.setSpawnerOptions(smokeSpawnerOptions);
smokeEmitter.enableEmitting();

// 循环渲染场景
function render() {
    requestAnimationFrame(render);
    fireEmitter.update(0.01 * 0.5);
    smokeEmitter.update(0.01 * 0.5);
    renderer.render(scene, camera);
}
render();

效果演示：https://codepen.io/pen/?&editable=true&editors=0010