three.js实现一个火焰动画

保姆式生成火焰特效，文件直接复制过去，图片添加，引入三步搞定

第一步生成fire.ts文件

import { onMounted, ref } from "vue";
import * as THREE from "three";

export default function fire() {
    var w: number = 20;//火焰宽度
    var h: number = 1.6 * w;   //火焰高度
    var geometry = new THREE.PlaneGeometry(w, h);//矩形平面
    geometry.translate(0, h / 2, 0);
    var textureLoader = new THREE.TextureLoader();
    var texture = textureLoader.load('/public/火焰.png');
    var num: number = 15;
    texture.repeat.set(1 / num, 1);//设置纹理重复
    var material = new THREE.MeshBasicMaterial({
        map: texture,
        transparent: true,
        opacity: 0.4,
        side: THREE.DoubleSide,
        depthWrite: false
    });
    var mesh = new THREE.Mesh(geometry, material);
    var flame = new THREE.Group();//火焰组对象
    // 两个火焰mesh交叉叠加
    // flame.add(mesh, mesh.clone().rotateY(Math.PI / 2))
    // 四个火焰mesh交叉叠加
    flame.add(mesh, mesh.clone().rotateY(Math.PI / 2), mesh.clone().rotateY(Math.PI / 4), mesh.clone().rotateY(Math.PI / 4 * 3))
    var t = 0;
    // 火焰动画生成
    function UpdateLoop() {
        t += 0.1;//调节火焰切换速度
        if (t > num) t = 0;
        //  Math.floor(t)取整 保证一帧一帧切换
        texture.offset.x = Math.floor(t) / num;// 动态更新纹理偏移 播放关键帧动画 产生火焰然后效果
        window.requestAnimationFrame(UpdateLoop); //请求再次执行函数UpdateLoop
    }
    UpdateLoop();
    return {
        flame,
        update: UpdateLoop
    }
}

第二步，复制图片，图片如下

第三步

所需要的文件中引入

//引入上面的ts文件
import fire from './fire';
//解构出来
const {flame,update} = fire();
//火焰添加到场景中
scene.add(flame);