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 ; } }