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

В данной статье расскажу, почему стоит познакомиться с библиотекой Three.js, и с чего начать её изучение.

Если вы программируете на JavaScript и хотите добавить в свое приложение работу с трехмерной графикой, то на ваш выбор по сути 2 библиотеки: Three.js и Babylon.js.

Babylon.js разрабатывается Microsoft, его я не пробовал, но слышал от других разработчиков, что он более сложен для начинающих, но в итоге более производительный. Также 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).

gltf-viewer.donmccurdy.com – удобный подсмотрщик моделей в формате GLTF (современный формат для работы с 3D моделями в браузере)

cpetry.github.io/NormalMap-Online – хороший инструмент по созданию карт нормалей из обычных текстур

configurator.site3d.site – сервис для простого внедрения 3D моделей в любое веб-приложение (есть API для разработчиков)