three.js制作简单的虚影

如图 利用光线折射做一个虚影

const plane = this.helper.create.plane(20, 20);
        this.helper.add(plane.mesh);
        plane.mesh.position.y -= 0.5;
        plane.mesh.position.z -= 1.5;

        const material = plane.mesh.material;
        console.log(material);

        plane.mesh.material = new THREE.MeshPhysicalMaterial({
            map: this.helper.loadTexture(
                "/public/textures/wallhaven-kxj3l1_840x840.png",
                (t) => {
                    t.colorSpace = THREE.SRGBColorSpace;
                }
            ),
            side: 2,
            // envMap: this.helper.scene.environment,
            transparent: true,
            transmission: 0.9,
            metalness: 0,
            roughness: 0,
            ior: 3,
            //@ts-ignore
            thickness: 2.2,
            specularIntensity: 1,
            //镜面颜色
            specularColor: new THREE.Color(0xffffff),
        });