Применить эффект сбоя к событию прокрутки от Three.js

Эффект сбоя заставляет посетителя оставаться на вашем сайте дольше

Задний план

Я только начал изучать Three.js. Как вы знаете, эта библиотека мощна для создания трехмерной анимации, анимированной графики и эффектов. В этом посте я собираюсь объяснить, как мне удалось реализовать изображение сбоя с помощью прокрутки с помощью React. Нет никакого смысла в том, что я выбрал React. Это просто один из основных фреймворков, и он немного полезен для некоторых разработчиков, но я не упоминаю о React в этой статье.

Что такое глюк?

Глюк - это слово, обозначающее свернутые изображения или изображения с ошибками. Чтобы выразить эти изображения, существуют различные методы, такие как царапины, искажения, шум и неровности.

Сначала я подумал, что сбой RGB - это крутой эффект, который легко реализовать, потому что искаженное изображение состоит всего из 3 изображений, разделенных каналами R, B, G от исходного изображения. Действительно, я нашел пример в репозитории Learning-threejs, включая файл шейдера.

Применить RGBShiftShader

Настраивать

Первым делом я создал объекты THEE.Mesh для отображения изображений, затем добавил материал с шейдером.

// NOTE: Setup material
const material = originalMaterial.clone();
material.uniforms.tDiffuse.value = cardTexture;

cardTexture - это THREE.Texture, загруженная из THREE.TextureLoader. Эта текстура назначается свойству tDiffuse, которое используется в шейдере как данные изображения. Я разместил эти сетчатые объекты вдоль макета DIV в дереве DOM на холсте. Верстка вдохновлена ​​этим образцом и заимствованными изображениями из репозитория.

Давай глючим

Благодаря этому фантастическому примеру все, что мне нужно сделать, это изменить расстояние между изображениями RGB и направление при прокрутке. Я настроил эти свойства, когда произошло событие прокрутки вверх, сдвиг на 90 градусов с определенным значением количества RGB, подобным этому. Эффект сбоя RGB применяется каждый раз, когда содержимое страницы прокручивается.

let offset = 1.2
window.addEventListener('scroll', e => {
    const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
    const currentScrollY = scrollTop
    const isDownScroll = oldScrollY >= currentScrollY
    let diff = Math.floor((oldScrollY - currentScrollY)) * offset
    let direction = 90
    
    if (isDownScroll) {
      diff *= -1
      direction *= -1
    }
applyRgbShader(diff, direction)
})
const applyRgbShader = (value, direction = 90) => {
  planeGeometries.map(card => {
    const material = card.material;
    material.uniforms.amount.value = value / 300.0;
    material.uniforms.angle.value = direction * ( Math.PI / 180 );
  });
}

PlaneGeometries в функции applyRgbShader точно сохраняет цели THREE.Mesh на холсте. Каждый элемент имеет текстуру с изображением в качестве материала, который я инициализировал над парой кода.

Вывод

Применение эффекта глюка к конкретному объекту применить несложно. Но если вы хотите применить его на всей странице или в контейнере, вам, возможно, придется погрузиться в более сложный мир three.js. Я также объясняю, как применять шейдер по всему контейнеру. Вы можете увидеть образец на изображении выше gif при изменении размера.

Загляните в мой блог.

Вы можете увидеть окончательное изображение в этом посте, чтобы посетить сайт моего портфолио.

Я поместил этот образец кода прокрутки с ошибкой в ​​Github. Надеюсь, этот пост будет полезен некоторым разработчикам.