vue2+three.js实现火焰效果

  // 火焰
    getFireMaterial() {
      const vertex = `
${ShaderChunk.logdepthbuf_pars_vertex}
bool isPerspectiveMatrix(mat4) {
    return true;
}
varying vec4 m_pos;
varying vec2 vUv;
varying vec3 _flame;
uniform float uTime;
vec2 hash( vec2 p ){
	p = vec2( dot(p,vec2(150.1,350.7)), dot(p,vec2(269.5,183.3)) );
	return -1.0 + 2.0*fract(sin(p)*43758.5453123);
}

// 定义噪声函数，接受一个二维向量作为输入并返回一个浮点值作为输出
float noise1( in vec2 p ){
    // 定义常量K1和K2,它们是用于构建网格索引和梯度的数学参数
    const float K1 = 0.366025404; // (sqrt(3)-1)/2;
    const float K2 = 0.211324865; // (3-sqrt(3))/6;
    // 通过将输入点p加上一个基于p的偏移量，然后向下取整，得到网格的整数索引
	vec2  i = floor( p + (p.x+p.y)*K1 );
    vec2  a = p - i + (i.x+i.y)*K2;
    float m = step(a.y,a.x); 
    vec2  o = vec2(m,1.0-m);
    vec2  b = a - o + K2;
	vec2  c = a - 1.0 + 2.0*K2;
    vec3  h = max( 0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 );
	vec3  n = h*h*h*h*vec3( dot(a,hash(i+0.0)), dot(b,hash(i+o)), dot(c,hash(i+1.0)));
    return dot( n, vec3(70.0) );
}
float noise2(in vec2 p){
    return
        0.500*noise1(p*1.0)
       +0.250*noise1(p*2.0)
       +0.125*noise1(p*4.0)
       +0.063*noise1(p*8.0)
    ;
}
vec2 noise3(in vec2 p){
    return vec2(noise2(p), noise2(p + 100.0));
}
vec2 noise4(in vec2 p){
    return noise3(p + noise3(p));
}
vec2 transform(in vec2 p){
    return p + 0.2 * noise4(1.4 * p - vec2(0.0, uTime * 0.8));
}
vec3 ud(vec2 p) {
    p.x = abs(p.x);
    float q = p.x * (p.y * 11.0 + 1.7);
    p.x = max(p.x, q);
    return vec3(1.0, 0.1, 0.0) / pow(length(p), 5.0) * 0.000008;
}

void main () {
    vUv = uv;
    vec2 st = uv-.80;
     _flame = ud(transform(st * vec2(1.0, 0.5)));    
    vec3 newPosition = normal*vec3(0,0,0)+position;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);

      ${ShaderChunk.logdepthbuf_vertex}
}
    `;

      // 片元着色器代码
      const fragment = `
${ShaderChunk.logdepthbuf_pars_fragment}
precision mediump float;
varying vec2 vUv;
varying vec3 _flame;
void main() {
  vec2 uv = vUv;
  vec3 color = vec3(0.,0.,1.);
  gl_FragColor = vec4(_flame,length(_flame));
  ${ShaderChunk.logdepthbuf_fragment}
}
    `;
      const uniforms = {
        uTime: { value: 5.0 },
      };
      const material = new THREE.ShaderMaterial({
        uniforms: {
          uTime: { value: 5.0 },
        },
        vertexShader: vertex,
        fragmentShader: fragment,
        side: DoubleSide,
        transparent: true,
        depthWrite: true,
        depthTest: true,
        alphaTest: 0.5,
      });
      return material;
    },

export default {
  data() {
      return {
      autoRotate: false,
      isDriver: false,
      dialogTableVisibleMusic: false,
      checkedMusic: false,
      dialogTableVisible: false,
      dialogTableVisibleDaynight: false,
      dialogTableVisibleModeldetails: false,
      intersects: "",
      dialogTableVisibleGtlldetails: false,
      dialogTablezh: false,
      material: "",
      geometry:"",
      visible: false,
      
    };
  }
}
let mesh,mesh2
    inithuy() {
      let geometry = new THREE.PlaneGeometry(20, 50, 50, 50);
      let material = this.getFireMaterial();
      console.log("@material", material);
      this.geometry = geometry;
      this.material = material;
      mesh = new THREE.Mesh(geometry, material);
      mesh2 = mesh.clone();
      mesh2.rotation.y = Math.PI / 2;
      console.log("@viewer.scene", viewer.scene);
      viewer.scene.add(mesh, mesh2);
      this.loop();
    },

    loop() {
      requestAnimationFrame(loop);
      if (this.material) {
        this.material.uniforms.uTime.value += 0.01;
      }
    }