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){return0.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,mesh2inithuy() {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;}}