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

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

制作透镜模糊效果主要用到下面几个材质的属性以及 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"
    );