1.生成掠过的光圈材质。
var uniform = { u_color: { value: new THREE.Color("#5588aa") }, u_tcolor: { value: new THREE.Color("#EF5F00") }, u_r: { value:0.8 }, u_length: { value: 20 },//扫过区域 u_max: { value: 600 }//扫过最大值 }; var Shader = { vertexShader: ` varying vec3 vp; void main(){ vp = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` varying vec3 vp; uniform vec3 u_color; uniform vec3 u_tcolor; uniform float u_r; uniform float u_length; uniform float u_max; float getLeng(float x, float y){ return sqrt((x-0.0)*(x-0.0)+(y-0.0)*(y-0.0)); } void main(){ float uOpacity = 0.3; vec3 vColor = u_color; float uLength = getLeng(vp.x,vp.z); if ( uLength <= u_r && uLength > u_r - u_length ) { float op = sin( (u_r - uLength) / u_length ) * 0.6 + 0.3 ; uOpacity = op; if( vp.y<0.0){ vColor = u_tcolor * 0.6; }else{ vColor = u_tcolor; }; } gl_FragColor = vec4(vColor,uOpacity); } ` } aamaterial = new THREE.ShaderMaterial({ vertexShader: Shader.vertexShader, fragmentShader: Shader.fragmentShader, side: THREE.DoubleSide, uniforms: uniform, transparent: true, depthWrite: false, }); animate()中执行 if (aamaterial) { aamaterial.uniforms.u_r.value += delta * 50 + 4; if (aamaterial.uniforms.u_r.value >= 600) { aamaterial.uniforms.u_r.value = 20 } } console.log(aamaterial);3.使用方式
plane = new THREE.Mesh( geometry, aamaterial );4.效果
