将两个纹理与动画混合

Question

我选择了GLSL来帮助我自定义由Three.js Scene，Camera，Mesh和ShaderMaterial创建的立方体纹理过渡。我得到了脚本工作，因此2个立方体纹理可以以0.5不透明度相互混合，所以我可以看到两者混合在一起。

<script>
uniforms = { opacity: {value: 1}, tCube0: {value: 'CubeTexture'}, tCube1: {value: 'CubeTexture'}, tFlip: {value: -1} }
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
    uniform samplerCube tCube0;
    uniform samplerCube tCube1;
    uniform float tFlip;
    uniform float opacity;
    varying vec3 vWorldPosition;
    #include <common>
    void main() {
        vec4 tex0, tex1;
        tex0 = textureCube(tCube0, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ));
        tex1 = textureCube(tCube1, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ));
        gl_FragColor = mix(tex0, tex1, 0.5);
    }
</script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
    varying vec3 vWorldPosition;
    #include <common>
    void main() {
        vWorldPosition = transformDirection( position, modelMatrix );
        #include <begin_vertex>
        #include <project_vertex>
    }
</script>

现在我想了解如何应用动画，以便tCube0在第二个时间间隔内混合到tCube1。

其次，我希望这发生在用户操作上，比如点击一个按钮，所以在用户执行操作之前不应该知道tCube1，然后设置纹理tCube1并tCube0 1}}动画为tCube1。