THREE.js 中的定向置换贴图？答案

【问题标题】：Directional displacement maps in THREE.js?THREE.js 中的定向置换贴图？
【发布时间】：2019-05-18 10:30:06
【问题描述】：

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

片段着色器：

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，反之亦然），然后在0 和1 之间来回补间dispFactor。因此，如果我继续单击“下一步”，动画将向右、向左、向右、向左滑动等等。

我正试图解决这个问题并想办法输入一个方向，但我认为这是我在 Three.js 知识方面遇到的问题。

【问题讨论】：

标签： three.js glsl shader

【解决方案1】：

嗯，我找到了解决方案。

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);

我在这个项目上找到了解决方案，我使用他的函数onComplete: funtion(){...} 来更新纹理。

https://gist.github.com/MadebyAe/9d5314568cd0f156d74d6c128993c0e0

享受吧！！ :D

【讨论】：