threejs 场景消融效果

最新推荐文章于 2025-08-20 18:38:38 发布

原创

最新推荐文章于 2025-08-20 18:38:38 发布 · 670 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

该文展示了如何在3D场景中利用THREE.js库创建一个方盒（BoxGeometry），并为其应用自定义的shader材质（ShaderMaterial）。shader代码包括了fragmentshader和vertexshader，用于控制物体表面的消融效果，其中关键参数如阈值（threshold）、边缘宽度（edgeWidth）和颜色（edgeColor）等可以通过uniforms进行动态调整。文章还涉及了纹理加载以及如何根据变量meltActive动态改变物体的消融状态。

消融场景需要用到的是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 * mod