使用 Three.js 和 postprocessing 库创建 UV 图像变换效果，使用 GodRaysEffect 实现光晕效果。

const image_url = FILE_HOST + "images/effectComposer/photo-1583766395091-2eb9994ed094.avif";
const image_ratio = 687 / 1031;
const image_tex = new THREE.TextureLoader().load(image_url);
image_tex.repeat.set(1, 1);

const alpha_url = FILE_HOST + "images/effectComposer/photo-1510942752400-ebce99a8a2c0.avif";
const alpha_tex = new THREE.TextureLoader().load(alpha_url);
alpha_tex.repeat.set(0.6, 2);
alpha_tex.offset.x = (1 - alpha_tex.repeat.x) / 2;
alpha_tex.wrapT = THREE.RepeatWrapping;

const geom = new THREE.PlaneGeometry(image_ratio * 2, 2);
const mat = new THREE.MeshLambertMaterial({
    alphaMap: alpha_tex,
    alphaTest: 0.15,
    map: image_tex,
});
const mesh = new THREE.Mesh(geom, mat);
scene.add(mesh);

const wall = new THREE.Mesh(
    geom,
    new THREE.MeshBasicMaterial({
        alphaMap: alpha_tex,
        alphaTest: 0.15,
        map: image_tex,
    })
);
wall.scale.setScalar(1.2);
wall.position.z = -0.1;
scene.add(wall);

const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
const effect = new GodRaysEffect(camera, wall, {
    density: 1,
    decay: 0.96,
    weight: 1,
});
const effectPass = new EffectPass(camera, effect);
composer.addPass(renderPass);
composer.addPass(effectPass);

renderer.setAnimationLoop((t) => {
    composer.render();
    controls.update();
    alpha_tex.offset.y = t * -0.001;
});