Карты направленного смещения в THREE.js?
Я в основном следую этот пример 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;
}
Прямо сейчас я могу только изменить направление вправо / влево. Для этого я отслеживаю текущую текстуру, отображаемую в слайд-шоу. Для перехода я устанавливаю другую однородную текстуру (texture2, если отображается texture1, и наоборот), а затем переключаю dispFactor между 0 и 1. Поэтому, если я продолжаю нажимать «Далее», анимация будет пролистывать вправо, влево, вправо, влево и так далее.
Я пытаюсь обдумать это и найти способ ввести направление, но я думаю, что именно здесь я достиг потолка моих знаний о Three.js.
Ответы 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