threejs 场景消融 效果

消融场景 需要用到的是shader代码

<script id="fs" type="x-shader/x-fragment">
    uniform float threshold;
    uniform float edgeWidth;
    uniform float edgeBrightness;
    uniform vec3 edgeColor;
    uniform sampler2D mainTex;      
    uniform sampler2D  noiseTex;   
    varying vec2 vUv;   
    void main(){
            vec4 color = texture2D(mainTex, vUv);
            vec4 noiseValue = texture2D(noiseTex, vUv);
            if(noiseValue.r < threshold)
            {
                    discard;
            }
            if(noiseValue.r - edgeWidth < threshold){
                    color = vec4(edgeColor, 1.0);
            }
            gl_FragColor = color;
        }
</script>
<script id="vs" type="x-shader/x-vertex">
    varying vec2 vUv;
    void main()
    {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
</script>

创建一个box 然后给box的材质添加shaderMaterial材质效果

 const Boxgeo = new THREE.BoxGeometry( 100 , 100 , 100 );
        const Boxmate = new THREE.ShaderMaterial({
            uniforms:{
                edgeColor: { value: new THREE.Color(0x4ad200) },
                edgeWidth: { value: 0.02 },
                edgeBrightness: { value: 0.1 },
                threshold: { value: 0.0 },
                mainTex: {
                    value: new THREE.TextureLoader().load(
                        'textures/sky/skyBox1/negx.jpg'
                    ),
                    
                },
                noiseTex: {
                    value: new THREE.TextureLoader().load("https://i.postimg.cc/y8mHLC8Z/noise-2.png"),
                    
                }
            },
            side: THREE.FrontSide,
            vertexShader: document.getElementById("vs").textContent,
            fragmentShader: document.getElementById("fs").textContent,
        })
        
        
        
        // new THREE.MeshBasicMaterial({
        //     color : 0x999999,
        //     map : new THREE.TextureLoader().load('textures/sky/skyBox1/negx.jpg')
        // })
        BOX = new THREE.Mesh( Boxgeo , Boxmate );
        scene.add(BOX)

 if(BOX && meltActive){
            // console.log('停止')
            BOX.material.uniforms.threshold.value += 0.005;
            if(BOX.material.uniforms.threshold.value > 1.0){
                BOX.material.uniforms.threshold.value = 1.0;
                // console.log(BOX.material.uniforms.threshold.value)
            }
        }else if(BOX && meltActive == false &&  BOX.material.uniforms.threshold.value < 1.2){
            // console.log(2 , meltActive , BOX.material.uniforms.threshold.value )
            // console.log(BOX.material.uniforms.threshold.value)
            BOX.material.uniforms.threshold.value -= 0.005;
            if(BOX.material.uniforms.threshold.value < 0.0){
                BOX.material.uniforms.threshold.value = 0.0;
            }
        }