效果

代码

import * as THREE from 'three'

export default class Fade extends THREE.Group{
    private mesh: THREE.Mesh<THREE.PlaneGeometry,THREE.ShaderMaterial>;
    private startTime:number;
    constructor(){
        super();
        this.startTime = Date.now();
        const material = new THREE.ShaderMaterial({
            uniforms:{
                cat:{ value: new THREE.TextureLoader().load('/images/cat.jpeg') },
                child:{ value: new THREE.TextureLoader().load('/images/child.jpeg') },
                progress:{ value:0}
            },
            vertexShader:`
              varying vec2 vUv;
              void main(){
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
              }
            `,
            fragmentShader:`
              varying vec2 vUv;
              uniform sampler2D cat;
              uniform sampler2D child;
              uniform float progress;
              void main(){
                  gl_FragColor = mix(texture2D(cat,vUv),texture2D(child,vUv),progress);
              }
            `
        });
        this.mesh = new THREE.Mesh(new THREE.PlaneGeometry(8,5),material);
        this.add(this.mesh);
    }
    public update(): void {
        const progress = (Date.now() - this.startTime) / 1000;
        if(progress <=1){
            this.mesh.material.uniforms.progress.value = progress;
        }
    }
}