Я до сих пор помню свой первый «3D» сайт. Это было в 2013 году, во времена Flash (мы не становимся моложе…), и мне нужно было сделать круглую карусель изображений. У меня было два варианта: переместить камеру или переместить изображения. Я остановился на втором, но, оглядываясь назад, понял, что это был не лучший выбор.
Для этого проекта движение было довольно легким. Немного тригонометрии и готово. Но в наши дни, с мощью WebGL, обычно это не «простые» карусели, а сложные 3D-сцены.
Так было с последним проектом с великой командой Akufen, Stéphane Demotte и Emmanuel Durgoni. Стефану пришлось разработать красивое непрерывное движение по зданию.
Каковы технические решения для достижения такого типа движения?
100% кодовое решение
Three.js предлагает возможность создавать кривые. Чаще всего я использую CatmullRomCurve3. Вам просто нужно дать ему список координат, и он рассчитает хорошую траекторию, проходящую через все эти точки. Осталось только получить позиции вдоль него методами getPoint или getPointAt и заставить камеру следовать за ним.
Пример использования этой техники.
Отметьте animationView, чтобы увидеть движение камеры.
Вы мне скажете: «Это все очень хорошо, но как мне определить этот список пунктов?!» И вы правы, тут все сложнее. Более того, это означает, что вы не сможете работать с 3D-аниматором.
Это не значит, что это невозможно, но желаю удачи!
https://mobile.twitter.com/Samsyyyy/status/1248616247295533056
50% Код / 50% Решение Blender
Недавно я начал изучать Blender. Моя цель состояла не в том, чтобы стать экспертом, а в том, чтобы понять механизмы программного обеспечения для создания 3D. Чтобы лучше сообщать о моих технических потребностях 3D-художникам.
Это позволило мне открыть для себя технику, которую я представлю ниже. Подводя итог, мы собираемся за несколько минут создать движение камеры из блендера, а затем использовать его с Three.js.
Сторона блендера
Начнем с создания сцены с некоторыми элементами. Я поставил 3 куба и камеру.
Только начинаете? Вот несколько горячих клавиш, которые нужно знать.
X = удалить
Shift+A = добавить элемент (форму, свет, камеру и т. д.)
Cmd+G = переместить
Cmd+R = повернуть
Cmd+S = увеличить
(для последних 3 команд нажмите x, y или z, чтобы двигаться только в одном направлении)
Теперь важный шаг: анимация камеры!
Используйте вкладку "Анимация", чтобы увидеть временную шкалу внизу экрана. Нажмите кнопку Auto Keying (маленькая кнопка с кружком внизу) и поместите себя на первый ключевой кадр. Затем расположите камеру по желанию. Позиции/повороты будут сохранены автоматически. Перейдите к другому ключевому кадру и повторяйте упражнение, пока не будете удовлетворены результатом.
Наконец, экспортируйте вашу сцену в формат glTF.
Нажмите «Файл», «Экспорт», затем «glTF 2.0».
Выберите формат glTF Embedded, выберите «Камеры» и экспортируйте.
Сторона кода
Найдите весь исходный код и файл Blender этой демонстрации на Github
Я не буду подробно описывать весь код, но я хотел бы обратить ваше внимание на 3 ключевых момента.
Камера
Это позволяет вам иметь те же параметры fov, near и far, что и в Blender.
Анимация
Хотя камера находится в корне сцены Blender, после экспорта в формат glTF она автоматически добавляется в объект-контейнер. Поэтому анимация должна быть применена к этому контейнеру camera.parent.
Время шоу!
Остается только увеличить animationMixer.setTime на основе общего времени анимации (в секундах). В демонстрации мы используем процент, соответствующий прокрутке пользователя.
И вуаля ! Готово.
Спасибо за чтение!
Если вам понравилась эта статья, не стесняйтесь ставить лайки и делиться ею в социальных сетях, мне это очень помогает.
