В статье расскажу, почему стоит познакомиться с библиотекой Three.js и с чего начать ее изучение.
Для чего нужен Three.js и почему стоит его выбрать для старта
Если вы программируете на JavaScript и хотите добавить в свое приложение работу с трехмерной графикой, то на ваш выбор есть, по сути, две библиотеки: Three.js и Babylon.js.
Babylon.js разрабатывается Microsoft, его я не пробовал, но слышал от других разработчиков, что он более сложен для начинающих, но в итоге более производительный. Также Three.js лучше подходит для старта по причине большего числа примеров и числа последователей.
С чего начать изучение Three.js
Первое, что необходимо сделать — ознакомиться с официальным сайтом библиотеки threejs.org. На нем вы сможете скачать последний релиз, где находятся многочисленные примеры использования Three.js (на них удобно изучать возможности библиотеки). Там же находится документация (threejs.org/docs), которой я пользуюсь довольно часто и примеры использования (threejs.org/examples).
Также на официальном сайте есть хорошее руководство в виде отдельных статей, в том числе и на русском языке (threejs.org/manual/#ru/fundamentals), с которого и рекомендую начать изучение Three.js.
Я предлагаю начать изучение библиотеки в ее изначальной версии, написанной на чистом JavaScript. В дальнейшем вы сможете использовать версию библиотеки на TypeScript, в том числе и в виде npm пакета или такой обертки, как React Fiber (npmjs.com/package/@react-three/fiber), если используете в разработке в качестве фреймворка React (мне доводилось применять данный инструмент в рабочем проекте).
Начать программировать можно на примере простой 3D сцены (threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene), создав простое приложение, например, отображающее кубик (jsfiddle.net/0c1oqf38). Делать это можно на любом локальном веб-сервере. Я использую в своей работе Open Server (ospanel.io).
Ресурсы, которыми я пользуюсь при создании 3D приложений
- gltf-viewer.donmccurdy.com – удобный подсмотрщик моделей в формате GLTF (современный формат для работы с 3D моделями в браузере)
- cpetry.github.io/NormalMap-Online – хороший инструмент по созданию карт нормалей из обычных текстур
- configurator.site3d.site – сервис для простого внедрения 3D моделей в любое веб-приложение (есть API для разработчиков)
