THREE.js中的方向置换贴图？

我基本上是以下添加一个位移地图效果为我的网站。但是，我想让它成为一个有方向的幻灯片，例如，单击“下一步”将使位移贴图向右移动并转换图像，而单击“上一步”则相反。以下是着色器代码：

片段着色器：

varying vec2 vUv;

uniform sampler2D texture1;
uniform sampler2D texture2;
uniform sampler2D disp;

uniform float dispFactor;
uniform float effectFactor;

void main() {

    vec4 disp = texture2D(disp, vUv);
    vec2 distortedPosition1 = vec2(uv.x + dispFactor * (disp.r*effectFactor), uv.y);
    vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.r*effectFactor), uv.y);

    vec4 _texture1 = texture2D(texture1, distortedPosition1);
    vec4 _texture2 = texture2D(texture2, distortedPosition2);

    vec4 finalTexture = mix(_texture1, _texture2, dispFactor);

    gl_FragColor = finalTexture;
}

现在我只能得到方向是左右交替的。要做到这一点，我会跟踪我在幻灯片上显示的当前纹理。为了转换，我设置另一个纹理均匀（

texture2

如果显示

texture1

，反之亦然），然后在

dispFactor

之间来回切换

0

和

1

。因此，如果我一直单击“下一步”，动画将向右、向左、向右、向左滑动，依此类推

---

我正试图用头脑来思考这个问题，并找出一种输入方向的方法，但我认为这就是我的Three.js知识的极限所在

我找到了解决办法

setInterval(function(){
    if(i == 0){
        TweenMax.to(mat1.uniforms.dispFactor, speedIn, {
            value: 1.0,
            ease: 'Expo.easeInOut',
            onComplete: function () {
                mat1.uniforms.texture1.value = textures[j];
                mat1.uniforms.texture1.needsUpdate = true;
                j = (j < 4) ? ++j : 0;
            }
        });
        i++;
    }else{
        TweenMax.to(mat1.uniforms.dispFactor, speedOut, {
            value: 0.0,
            ease: 'Expo.easeInOut',
            onComplete: function () {
                mat1.uniforms.texture2.value = textures[j];
                mat1.uniforms.texture2.needsUpdate = true;
                j = (j < 4) ? ++j : 0;
            }
        });
        i--;
    }

}, 4000);

setInterval（函数（）{
如果（i==0）{
TweenMax.至（mat1.uniforms.dispFactor、speedIn、{
数值：1.0，
ease:“Expo.easeInOut”，
onComplete:函数（）{
mat1.uniforms.texture1.value=纹理[j]；
mat1.uniforms.texture1.needsUpdate=true；
j=（j<4）++j:0；
}
});
i++；
}否则{
TweenMax.至（mat1.1.1.2.2）减速系数，减速器{
数值：0.0，
ease:“Expo.easeInOut”，
onComplete:函数（）{
mat1.uniforms.texture2.value=纹理[j]；
mat1.uniforms.texture2.needsUpdate=true；
j=（j<4）++j:0；
}
});
我--；
}
}, 4000);

我在这个项目上找到了解决方案，我使用他的函数

onComplete:funtion（）{…}

来更新纹理

享受吧D