Создание 3D-галереи, управляемой прокруткой, с использованием траектории камеры Blender с Three.js и GSAP | Кодропс

Чтобы разбросать плоскости по обе стороны пути, нам также нужен вектор, перпендикулярный касательной. Мы вычисляем это нормальный повернув касательную на 90° в XY самолет:

Затем нормаль используется для применения боковых смещений относительно кривой, поэтому плоскости естественным образом следуют за каждым изгибом, а не смещаются вдоль фиксированной мировой оси.

nx и ny определить компоненты нормы.

3. Распределение плоскостей по кривой.

Теперь, когда кривая готова, мы можем заполнить сцену. Мы создадим 500 плоскостей изображения, равномерно распределим их по пути и назначим каждой случайную текстуру.

Загрузка текстур

Начнем с предварительной загрузки всех вариантов текстур:

const textureLoader = new THREE.TextureLoader()
const textures = loadTextureVariants(TEX_VARIANTS, textureLoader)

function loadTextureVariants(count, loader) {
  return Array.from({ length: count }, (_, i) => loader.load(`/img/picture${i + 1}.webp`))
}

Мы загружаем каждую текстуру один раз при запуске и повторно используем ее во всех 500 плоскостях. Каждый самолет просто случайным образом выбирает один из этого пула. Повторное использование экземпляров текстуры гораздо более эффективно, чем создание новой текстуры для каждой сетки, что снижает как использование памяти графического процессора, так и накладные расходы на загрузку.

Создание и размещение плоскостей

const planes = []

for (let i = 0; i 

Плоскости не располагаются случайно вдоль кривой. Их базовое положение определяется t = i / TOTALобеспечивая их равномерное распределение от начала до конца. Случайность применяется только к их боковому смещению, смещению по глубине и размеру, создавая более органичный макет без создания кластеров или пробелов.

Вместо смещения плоскостей вдоль фиксированной мировой оси мы используем локальную нормаль кривой (nx, ny). Это сохраняет распределение перпендикулярным траектории, независимо от того, как изгибается кривая.

Мы также храним несколько значений в каждой сетке. userData. Сюда входит его положение на кривой (t), его случайные смещения и многоразовый аниматор масштаба. Поскольку эти значения никогда не меняются, их можно просто считывать во время каждого кадра анимации, а не пересчитывать.

Создание масштабного аниматора

Каждый самолет имеет собственный масштабный аниматор, созданный с помощью gsap.quickTo():

function createScaleAnimator(mesh) {
  const proxy = { value: 1 }
  return gsap.quickTo(proxy, 'value', {
    duration: 0.4,
    ease: 'power3.out',
    onUpdate: () => mesh.scale.setScalar(proxy.value),
  })
}

gsap.quickTo() возвращает функцию многократного использования, которая анимирует свойство в соответствии с любым значением, которое вы ему передаете. Вместо создания новой анимации каждый раз при изменении масштаба она обновляет существующую. Это именно то, что нам здесь нужно: каждая плоскость получает новый целевой масштаб в каждом кадре анимации. Без quickTo()мы будем создавать 500 новых анимаций на каждый кадр, что быстро станет узким местом в производительности.

proxy Объект действует как промежуточное значение, которое GSAP может анимировать. При каждом обновлении мы просто копируем proxy.value к сетке с помощью mesh.scale.setScalar(). Это сохраняет логику анимации отдельно от объекта Three.js, сохраняя при этом плавный переход масштаба.

4. Движение камеры с помощью прокрутки

Когда сцена готова, остается только переместить камеру. Вместо того, чтобы анимировать его в мировом пространстве, мы будем перемещать его по кривой в ответ на прокрутку пользователя.

Принцип

Положение камеры определяется одним параметром: tкоторый варьируется от 0 к 1. Значение 0 соответствует началу кривой, а 1 возвращает нас в ту же точку, поскольку кривая замкнута.

Вместо обновления t непосредственно из ввода прокрутки мы сохраняем два значения:

• targetT: обновляется немедленно при прокрутке пользователем.
• camProxy.t: сглаженная версия targetTанимация GSAP.

Такое разделение позволяет камере мгновенно реагировать на действия пользователя, сохраняя при этом плавное перемещение по сцене.

const camProxy = { t: 0 }
const setCamT = gsap.quickTo(camProxy, 't', { duration: 1, ease: 'power3.out' })

let targetT = 0
const SENSITIVITY = 1 / (window.innerHeight * 4)

SENSITIVITY контролирует, насколько камера перемещается при заданном вводе прокрутки. Масштабируем его по window.innerHeight сохраняет ощущение единообразия взаимодействия на экранах разных размеров, поэтому прокрутка области просмотра на всю высоту перемещает камеру примерно на одинаковую величину независимо от устройства.

Захват прокрутки с помощью GSAP Observer

Мы будем использовать GSAP Observer плагин для захвата ввода пользователя:

Observer.create({
  target: window,
  type: 'wheel,touch,pointer',
  onChange: (self) => {
    targetT += self.deltaY * SENSITIVITY
    setCamT(targetT)
  },
})

Observer — это плагин GSAP, который объединяет ввод с помощью колесика, сенсорного ввода и указателя в рамках единого API. Вместо обработки разных событий для разных устройств мы всегда получаем одни и те же нормализованные события. deltaY значение, что делает логику прокрутки идентичной на настольных и сенсорных экранах.

При каждом входном событии мы обновляем targetT и позвони setCamT(). Вместо того, чтобы сразу перейти к новому значению, gsap.quickTo() плавно оживляет camProxy.t к нему, используя одну секунду power3.out простота. Поскольку положение камеры определяется camProxy.tкамера естественным образом скользит по кривой.

Обновление камеры в цикле анимации

Внутри animate() цикл, мы преобразуем ток camProxy.t значение в 3D-позицию:

function animate() {
  requestAnimationFrame(animate)

  const t = ((1 - camProxy.t) % 1 + 1) % 1

  const pathPos = curve.getPoint
  camera.position.set(pathPos.x, pathPos.y, pathPos.z + CAM_Z)

CAM_Z смещает камеру на 10 единиц по миру З ось. Вместо того, чтобы располагаться прямо на кривой, камера остается немного впереди нее, обеспечивая лучший угол обзора сцены и не позволяя ей проходить через плоскости.

Одна строка заслуживает более пристального внимания:

const t = ((1 - camProxy.t) % 1 + 1) % 1

Выражение выполняет три функции:

• 1 - camProxy.t меняет направление движения, поэтому прокрутка вниз перемещает камеру вперед по кривой.
• % 1 переносит значение так, чтобы оно оставалось в нормализованном диапазоне кривой 0 к 1.
• ((...) + 1) % 1 правильно обрабатывает отрицательные значения. Поскольку оператор JavaScript по модулю может возвращать отрицательные результаты, добавление 1 перед подачей заявки % 1 еще раз гарантирует, что t всегда остается в [0, 1) интервал.

5. Масштабирование изображений для фокусировки

Последний шаг – это то, что придает галерее ощущение глубины. По мере перемещения камеры по сцене ближайшие изображения плавно масштабируются, как будто попадая в фокус, а удаленные остаются в исходном размере.

Принцип

В каждом кадре анимации мы перебираем все 500...