我基本上在关注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;
}
现在我只能让方向交替右/左。为此,我跟踪幻灯片上显示的当前纹理。为了进行过渡,我设置了其他纹理统一(如果正在显示 texture1
,则设置 texture2
,反之亦然),然后在 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);
我在这个项目上找到了解决方案,我使用他的函数onComplete: funtion(){...}
来更新纹理。
https://gist.github.com/MadebyAe/9d5314568cd0f156d74d6c128993c0e0
享受它! :D
关于three.js - THREE.js 中的定向位移图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53825686/