这个 Three.js 技巧很少人用：不改材质源码，给它注入自定义 Shader

const liquidMaterial = new THREE.MeshPhysicalMaterial({
    color: 0xeeeeee,
    metalness: 0.587,   // 金属感
    roughness: 0.452,   // 粗糙度
    clearcoat: 0.071,   // 清漆层（增加表面光泽）
    iridescence: 0.907, // 虹彩强度（0-1）
    iridescenceIOR: 1.0,// 虹彩折射率，影响颜色分布
    iridescenceThicknessRange: [759, 800], // 膜厚范围（nm）
    dithering: true     // 关键：消除颜色渐变的色阶感
});

liquidMaterial.onBeforeCompile = (shader) => {
    // 1. 注入自定义 uniform
    shader.uniforms.uTime = liquidMaterial.userData.uTime;           // 动画时间
    shader.uniforms.uDistortion = liquidMaterial.userData.uDistortion; // 扰动强度
 
    // 2. 在片元着色器法线计算的锚点处插入代码
    shader.fragmentShader = shader.fragmentShader.replace(
        '#include <normal_fragment_begin>',
        `
        #include <normal_fragment_begin>
 
        // 用三维噪声计算梯度方向，作为法线扰动量
        float eps = 0.03;
        float n0 = snoise(warpedP);
        float nx = snoise(warpedP + vec3(eps, 0.0, 0.0));
        float ny = snoise(warpedP + vec3(0.0, eps, 0.0));
        float nz = snoise(warpedP + vec3(0.0, 0.0, eps));
 
        vec3 noiseNormal = normalize(vec3(nx - n0, ny - n0, nz - n0));
        vec3 viewNoiseNormal = normalize((viewMatrix * vec4(noiseNormal, 0.0)).xyz);
 
        // 叠加到原始法线上，edgeMask 保护边缘不被扰动
        normal = normalize(normal + viewNoiseNormal * uDistortion * edgeMask);
        `
    );
};

// 第一层：计算扭曲向量
vec3 warp;
warp.x = snoise(p + vec3(0.0,   0.0,   uTime * 0.1));
warp.y = snoise(p + vec3(114.5, 22.1,  uTime * 0.1));
warp.z = snoise(p + vec3(233.2, 51.5,  uTime * 0.1));
 
// 第二层：用扭曲后的坐标计算最终噪声
vec3 warpedP = p + warp * 1.5;
float n0 = snoise(warpedP); // 这一层驱动法线

function generateShapeMaskTexture(shapes) {
    const canvas = document.createElement('canvas');
    canvas.width = canvas.height = 1024;
    const ctx = canvas.getContext('2d');
 
    // 模糊绘制 SVG 轮廓，生成软边距离场
    ctx.filter = 'blur(45px)';
    ctx.fillStyle = 'white';
    // ...绘制 SVG 路径...
 
    // 上传到 Three.js 纹理
    liquidMaterial.userData.uShapeMask.value = new THREE.CanvasTexture(canvas);
}

// 读取距离场梯度（smoothDist 是5次采样的均值，消除8-bit量化锯齿）
vec2 maskGrad = vec2(maskR - maskL, maskT - maskB) / (2.0 * texEps.x);
 
// 沿轮廓切线方向流动
vec2 contourTangent = vec2(-maskGrad.y, maskGrad.x);
p.xy += contourTangent * (uTime * uSpeed * 0.5);