three.js模糊玻璃效果

制作透镜模糊效果 主要用到下面几个材质的属性 以及 MeshPhysicalMaterial 材质

const params = {
    
    color: 0xffffff,
    //类似透明度
    transmission: 0.9,
    opacity: 1,
    //金属度
    metalness: 0,
    //粗糙
    roughness: 0,
    //折射率
    ior: 1.52,
    //厚度 透过看物体的模糊程度
    thickness: 0.8,
    //镜面强度
    specularIntensity: 1,
    //镜面颜色
    specularColor: new Color("#ffffff"),
    //光强度
    lightIntensity: 1
};

普通酒杯

const params = {
    
	 color: 0xffffff,
    "transmission": 0.9,
    "opacity": 1,
    "metalness": 0,
    "roughness": 0,
    "ior": 1.52,
    "thickness": 0.8,
    "specularIntensity": 1
}

const glassMaterial = new MeshPhysicalMaterial({
    
    side: DoubleSide,
    specularColor: new Color("#ffffff"),
    ...params,
});

金属酒杯

{
    
	"color": 0xffffff,
    "transmission": 0.9063505503810331,
    "opacity": 0.9713801862828112,
    "metalness": 0.7329381879762913,
    "roughness": 0,
    "ior": 1.52,
    "thickness": 0.8,
    "specularIntensity": 1
}

{
    
    "color": 0xffffff,
    "transmission": 0.7329381879762913,
    "opacity": 1,
    "metalness": 0.9063505503810331,
    "roughness": 0.5812023708721422,
    "ior": 1.209822184589331,
    "thickness": 1.4049110922946655,
    "specularIntensity": 1.0364098221845894
}

磨砂酒杯

参数

{
    
    "color": 0xffffff,
    "transmission": 0.9063505503810331,
    "opacity": 0.9713801862828112,
    "metalness": 0,
    "roughness": 0.45114309906858596,
    "ior": 1.52,
    "thickness": 0.8,
    "specularIntensity": 1
}

gui调试

  for (const key of Object.keys(params)) {
    
 	 gui.add(params, key, 0, 2).onChange((v) => {
    
           glassMaterial[key] = v;
       });
   }

   gui.add(
        {
    
            log: () => {
    
                console.log(params);
            },
        },
        "log"
    );