В статье расскажу, почему стоит познакомиться с библиотекой Three.js и с чего начать ее изучение.
Если вы программируете на JavaScript и хотите добавить в свое приложение работу с трехмерной графикой, то на ваш выбор есть, по сути, две библиотеки: 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).