使用 Three.js 创建自定义遮罩通道，使用 ShaderPass 实现屏幕遮罩效果。

class ScreenMaskPass extends ShaderPass {
    constructor() {
        super({
            name: "ScreenMaskShader",

            uniforms: {
                tDiffuse: { value: null },
                opacity: { value: 1.0 },
                intensity: { value: 2.0 },
                maskColor: { value: new THREE.Color(1, 1, 1) },
                R: { value: 0.1 },
                sr: { value: 1.2 },
            },

            vertexShader: `
                varying vec2 vUv;
                void main() {
                    vUv = uv;
                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                }
            `,

            fragmentShader: `
                uniform float opacity;
                uniform float intensity;
                uniform sampler2D tDiffuse;
                uniform vec3 maskColor;
                uniform float R;
                uniform float sr;
                varying vec2 vUv;
                void main() {
                    vec4 texel = texture2D(tDiffuse, vUv);
                    float dist = sqrt((vUv.x-0.5)*(vUv.x-0.5)+(vUv.y-0.5)*(vUv.y-0.5));
                    float rr = (sr - smoothstep(R, R + 0.5, dist));
                    texel *= vec4(maskColor * rr * vec3(intensity,intensity,intensity), 1.0);
                    gl_FragColor = opacity * texel;
                }
            `,
        });
    }
}

const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
const screenMaskPass = new ScreenMaskPass();
composer.addPass(screenMaskPass);

scene.add(new THREE.AxesHelper(500), new THREE.GridHelper(500, 50));

const urls = [0, 1, 2, 3, 4, 5].map(
    (k) =>
        "https://z2586300277.github.io/three-editor/dist/files/scene/skyBox0/" +
        (k + 1) +
        ".png"
);

const textureCube = new THREE.CubeTextureLoader().load(urls);
scene.background = textureCube;