Использование Three.js для добавления 3D-элементов на ваши сайты

Плоский дизайн - это здорово, но трехмерные элементы выводят макеты веб-дизайна на новый уровень. Сайты с анимированной 3D-графикой и интерактивными 3D-сценами становятся все более популярными, чем когда-либо прежде. Теперь клиенты хотят, чтобы эти типы дизайна были на своих веб-сайтах, и они будут просить их у вас. Изучение того, как включить 3D-дизайн в свои проекты веб-дизайна, только улучшит ваш карьерный рост и привлечет больше клиентов. К счастью, такие ресурсы, как Three.js, легко доступны дизайнерам и разработчикам Divi для добавления пользовательских 3D-элементов на свои веб-сайты.

В этом посте мы рассмотрим основы Three.js и то, почему это хороший выбор для добавления трехмерных элементов на ваши веб-сайты. Да, даже на ваших сайтах Divi. Чтобы начать работу с Three.js, вам потребуются некоторые знания в области программирования, в частности, HTML, CSS и Javascript. Если вы все еще учитесь программировать, следуйте пошаговым инструкциям на веб-сайте Three.js с самого начала. Если терминология того, куда добавить код, вам не знакома, существует множество учебных пособий, которые помогут вам выполнить технические шаги. Я предлагаю вам посмотреть несколько видеороликов, возможно, пройти курс Skillshare или Udemy, чтобы действительно почувствовать, как включить библиотеку Three.js в свои проекты.

Давайте перейдем к этому.

Что такое Three.js

Прежде всего, что такое Three.js?

Three.js - это трехмерная библиотека javascript, которая предоставляет средства визуализации <canvas>, <svg>, CSS3D и WebGL. Он позволяет использовать 3D-дизайн в вашем браузере без дополнительных модулей. Библиотека может помочь вам в создании простых 3D-элементов, сложных 3D-взаимодействий и творческих анимационных игр. Three.js - это библиотека с открытым исходным кодом с репозиторием Github, где пользователи могут делиться своими собственными творениями Three.js.

Из всех средств визуализации, которые покрывает Three.js, наиболее часто используется WebGL. Создание трехмерных элементов только с помощью WebGL требует большого количества строк кода и большого количества математических знаний. Three.js значительно упрощает создание сцены и ее рендеринг с помощью WebGL.

Понимание трехмерной сцены и терминологии Three.js

Чтобы создать 3D-анимацию с помощью Three.js, сначала вы должны понять, как устроена 3D-сцена. Три элемента, необходимые для создания 3D-декораций, следующие:

1. Сцена
2. Камера
3. Рендерер

Сцена - это место, где вы настраиваете все 3D-элементы, которые будет отображать Three.js. Визуально он напоминает сцену театра или телевизор. камера - это точка обзора сцены и то, как человек технически видит элементы сцены. Средство визуализации собирает все вместе и рисует сцену. Если вы свободно владеете 3D-анимацией, то наверняка узнаете это как стандарт для настройки сцены.

После настройки сцены в нее помещаются объекты. Объекты строятся в три этапа:

1. Геометрия
2. Материал
3. Сетка

Геометрия объекта - это скелет или основной контур формы. Чтобы придать геометрии цвет или текстуру, применяется материал . Комбинация геометрии и материала называется сеткой .

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

После того, как сцена настроена и геометрия добавлена, вы добавляете функции для освещения сцены, анимации объектов и многого другого. Помимо основных объектов, доступных в библиотеке Three.js, вы также можете загружать другие 3D-изображения из онлайн-библиотек или созданные в Blender.

Начало работы с Three.js

Нет ничего проще, чем освоиться с Three.js. На веб-сайте Three.js есть вся необходимая документация, чтобы понять, как работает библиотека и как ее использовать.

На веб-сайте Three.js и на их Github вы найдете живую версию кода для простейшего приложения Three.js. Они используют JSFiddle, но вы также можете увидеть, как он работает на CodePen или Codesandbox.io.

Я предлагаю вам следовать инструкциям на веб-сайте Three.js, чтобы понять, как все это работает. С помощью Codepen, вашего Терминала или предпочитаемого программного обеспечения для кодирования. Вся библиотека Three.js доступна на веб-сайте Threejs.org для использования после того, как вы настроили сцену и начали замечать, что можно сделать. Ниже вы можете увидеть базовое приложение Three.js, работающее на JSFiddle. Нажмите «Редактировать с помощью JSFiddle», чтобы поиграть с кодом.

Учебные ресурсы Three.js

Поскольку Three.js - это API с открытым исходным кодом, в их репозитории GitHub всегда что-то происходит. Это означает, что всегда есть чему поучиться. К счастью, они создали цифровое руководство, которое постоянно обновляется с учетом изменений. Вы можете найти его на сайте discoverthreejs.com. Это, безусловно, лучший ресурс. Если вам нужно пошаговое руководство по настройке приложения и использованию ресурсов библиотеки, вот отличный курс по Skillshare, который проведет вас через все этапы документации Three.js.

Точно так же это руководство на YouTube показывает вам основы настройки сцены с помощью Three.js, но от вас требуется знание базовых навыков веб-разработки.

Если вы хотите глубоко погрузиться в Three.js и WebGL, этот курс Udemy все это объясняет и обещает, что к концу вы научитесь создавать 3D-контент.

Ищете подробное, быстрое и грязное руководство? Это пошаговое руководство по созданию кода на CreativeBloq - именно то, что вам нужно.

Примеры Three.js

Нет ничего лучше, чем вдохновение, чтобы начать создавать свои собственные 3D-проекты с помощью Three.js. Чтобы увидеть несколько невероятных творений Three.js, просто зайдите на их веб-сайт и исследуйте его.

Использование Three.js с Divi

Использовать Three.js с Divi довольно просто. Вам просто нужно добавить библиотеку javascript в файлы проекта и добавить ее в свой HTML. Чтобы добавить приложение в любой макет Divi, сначала создайте 3D-дизайн отдельно в своем любимом программном обеспечении для кодирования или на терминале вашего компьютера. Когда сборка будет готова, скопируйте javascript в модуль кода. Убедитесь, что вы используете открывающий и закрывающий теги <script>.

Заключение

Three.js - мощный ресурс для добавления трехмерных элементов на веб-сайт. В этом посте мы рассмотрели основы работы Three.js. В API так много всего, что вам действительно нужно погрузиться глубже и поэкспериментировать. Возможности поистине безграничны. От простого вращающегося куба до сложной интерактивной игры в насыщенном цифровом мире. Что вы создадите с помощью Three.js?

Лучшее изображение через theromb / shutterstock.com