我将会翻译以下内容:
我基本上是按照这个Codrops示例来为我的网站添加位移图效果的。然而,我想把它变成一个带有方向的幻灯片,比如点击“下一个”会使位移图向右移动并转换图像,点击“上一个”则相反。以下是着色器代码:
片段着色器:
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;
}
目前我只能让方向交替变化,即左右交替。为此,我跟踪正在幻灯片上显示的当前纹理。要进行过渡,我设置另一个纹理统一(如果正在显示texture1
,则为texture2
,反之亦然),然后在dispFactor
之间来回缓动0
和1
。因此,如果我不断点击“下一个”,动画将向右滑动、向左滑动、向右滑动、向左滑动,依此类推。
我试图理解这个并想出一种输入方向的方法,但我认为这就是我Three.js知识的极限所在。