Процесс создания 3D-анимации ранее был дорогостоящим, занимал много времени и требовал значительного обучения. До нынешнего момента! Благодаря Three.js, 3D-анимация в браузере стала более реалистичной, чем когда-либо прежде.
До Three.js вам приходилось использовать специальные 3D-программы (Maya, Blender и т. Д.) Со встроенными языками программирования для создания и экспорта видео или для компиляции новых автономных приложений. Эти программы получат доступ к графическому процессору (GPU) и позволят компьютеру отображать такие вещи, как тени, отражения и атмосферные искажения в кадре, который в противном случае был бы невозможен. Вдобавок ко всему, в браузере требовался плагин или расширение для просмотра 3D-графики.
Благодаря появлению и внедрению WebGL в браузере все эти ограничения остались в прошлом. Смотрите ниже, как Алек Сломан знакомит нас с чудесами Three.js!
Вы уже играли с Three.js? Как вы думаете, вы попробуете сейчас, когда у вас есть все инструменты для его тестирования?
Начните с ThreeJS
Для транскрипции JumpCast и тому подобного, посетите Learnable
Джесс: Я здесь с Алеком Сломаном, который является веб-разработчиком в 99Designs, и Алек собирается рассказать нам о Three.js сегодня. Что такое Three.js?
Alec: Three.js — это библиотека Javascript, которая позволяет веб-разработчику рисовать 3D-контент непосредственно в веб-браузере, что до недавнего времени было тем, чего мы не могли сделать, и до недавнего времени было чем-то действительно сложным делать. По сути, это действительно простой способ рисовать 3D в веб-браузере.
Джесс: Откуда тогда Three.js?
Алек: Three.js разработан и поддерживается парнем по имени Мистер Дуб, но изначально он начинался как эксперимент в Mozilla. В 2007 году они пытались найти способ отрисовки 3D-контента во вновь введенном HTML-элементе canvas, и в конечном итоге эти эксперименты были приняты группой Chronos. Группа Chronos выпустила стабильную версию этой технологии под названием WebGL в 2011 году.
Джесс: Какие проекты вы можете воплотить в жизнь с помощью Three.js?
Алек: Почти все, что вы можете себе представить, все, что было бы здорово моделировать в 3D. В результате, как веб-разработчики, у нас уже есть много технологий в нашем наборе инструментов, но большинство из нас знает по крайней мере один серверный язык, такой как PHP. Большинство из нас знает, по крайней мере, немного Javascript. Это позволяет нам управлять 3D-визуализацией, используя технологии, которые мы уже знаем. Это его настоящая сила. Это дает нам инструменты, чтобы мы могли сделать это прямо сейчас.
Джесс: Какие знания вам нужны, чтобы начать работать с такими вещами?
Алек: Итак, классная вещь в Three.js заключается в том, что вам действительно не нужно знать много действительно низкоуровневых вещей, которые обычно идут вместе с 3D-разработкой. Вы могли бы, вероятно, получить, просто зная немного HTML, немного Javascript или даже немного jQuery. К счастью, библиотека написана таким образом, что она удобна для начинающих.
Джесс: С чего бы мне начать, если бы я хотел узнать больше об этом?
Алек: Google, вероятно, был бы вашим лучшим отправным пунктом, но, в частности, есть сайт под названием Learning Three.js , который, я думаю, на самом деле мог бы написать сам мистер Дуб. Кроме того, если у вас возникнут какие-либо вопросы, в Stack Overflow есть довольно активное сообщество людей, которые обсуждают Three.js, и, на самом деле, есть, по крайней мере, пара человек, которые вы можете рассмотреть. В общем, есть много ресурсов о Three.js онлайн, и их довольно легко найти.
Джесс: Можете ли вы показать нам пример Three.js, воплощенного в жизнь?
Алек: Конечно. На самом деле, есть много действительно хороших примеров в Интернете, поэтому давайте посмотрим на некоторые из них.
Джесс: Давай сделаем это.
Алек: Здесь я собираюсь показать несколько примеров Three.js в действии. Я собираюсь перейти от простого к более продвинутому, и вы можете видеть, что вы можете сделать некоторые действительно крутые вещи с этим. Я думаю, что более простые примеры были бы достижимы для большинства людей, которые даже имеют небольшой опыт разработки. По ходу дела вы можете видеть, что на самом деле вы можете создавать довольно сложные приложения. Начиная с этого, это всего два вращающихся кубика, помещенных в сцену и освещенных различными текстурами. Опять же, это может быть написано менее чем в 50 строках кода. Вы можете видеть, что здесь есть два объекта, которые реагируют на движения мыши, и каждый имеет свою уникальную текстуру, и обе текстуры встроены. Я имею в виду, это более простой пример.
Двигаясь дальше, вы можете увидеть, что Луна действительно вращается вокруг земного шара. Это пример использования двух встроенных геометрий, а затем использования ваших собственных текстурных карт, и многие из этих текстурных карт доступны в Интернете. Если вы используете Google для «Карты текстур Земли», вы можете найти их и использовать встроенные библиотеки загрузки, чтобы создавать карты текстур изображений и применять их к вашей геометрии, а затем вы можете использовать некоторые встроенные функции карты для выполнения этих орбит как Вы можете видеть здесь, и затем, конечно, используя точечный свет, у нас действительно есть освещение, которое имеет смысл. Это может даже бросить тень на это, я не совсем уверен. Вы можете переместить это вокруг. В библиотеке Three.js есть много действительно замечательных частей, которые позволят вам выполнять подобные взаимодействия без необходимости писать слишком много кода.
Вы становитесь немного сложнее здесь. У вас есть эти действительно хорошие генераторы частиц, так что вы можете создавать невероятные лабиринты объектов, просто подвешенных в космосе. Это, вероятно, будет немного более продвинутым. Теперь мы подходим к более красивым анимационным сценам, используя всевозможные фильтры пост-обработки, это еще одна действительно крутая вещь, которая есть у Three.js. Многие из этих текстур, и на самом деле эта равнинная местность, используют всевозможные действительно классные карты шрифтов и зеркальные карты для создания довольно реалистичного трехмерного изображения. Опять же, это просто работает в Google Chrome.
Для любителей приключений и тех, у кого гораздо больше времени, вы можете даже реализовать полноценные игры. Итак, давайте попробуем. Начните в обычном режиме. Давайте посмотрим, сколько времени занимает загрузка. Надеюсь, вы можете просто отредактировать последовательность загрузки и все остальное, если я правильно понял.
Джесс: Мммм.
Алек: Это то, о чем ты думал?
Джесс: Отлично. Именно то, что я думал.
Алек: Сладкий. Даже этот экран загрузки является примером Three.js на работе. Вы можете видеть здесь, у вас есть невероятно подробные карты, нарисованные на всех наших геометриях, у вас есть немного встроенной физики, и опять же, это настоящее 3D-приложение, работающее на GPU этого Macbook Air. Это прямо в браузере. Вы можете видеть, что, вероятно, через пару лет браузер станет совершенно законным способом предоставления 3D-приложений. В любом случае, это всего лишь пара примеров Three.js в действии, и я надеюсь, что вам понравилось. Спасибо.
Джесс: Большое спасибо за потраченное время, Алек. Это была Джесс Браун с Learnable.com.