Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p><strong>В статье расскажу, почему стоит познакомиться с библиотекой Three.js и с чего начать ее изучение.</strong></p>

2 <h3>Для чего нужен Three.js и почему стоит его выбрать для старта</h3>

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

4 <p>Babylon.js разрабатывается Microsoft, его я не пробовал, но слышал от других разработчиков, что он более сложен для начинающих, но в итоге более производительный. Также Three.js лучше подходит для старта по причине большего числа примеров и числа последователей.</p>

5 <h3>С чего начать изучение Three.js</h3>

6 <p>Первое, что необходимо сделать - ознакомиться с официальным сайтом библиотеки threejs.org. На нем вы сможете скачать последний релиз, где находятся многочисленные примеры использования Three.js (на них удобно изучать возможности библиотеки). Там же находится документация (threejs.org/docs), которой я пользуюсь довольно часто и примеры использования (threejs.org/examples).</p>

7 <p>Также на официальном сайте есть хорошее руководство в виде отдельных статей, в том числе и на русском языке (threejs.org/manual/#ru/fundamentals), с которого и рекомендую начать изучение Three.js.</p>

8 <p>Я предлагаю начать изучение библиотеки в ее изначальной версии, написанной на чистом JavaScript. В дальнейшем вы сможете использовать версию библиотеки на TypeScript, в том числе и в виде npm пакета или такой обертки, как React Fiber (npmjs.com/package/@react-three/fiber), если используете в разработке в качестве фреймворка React (мне доводилось применять данный инструмент в рабочем проекте).</p>

9 <p>Начать программировать можно на примере простой 3D сцены (threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene), создав простое приложение, например, отображающее кубик (jsfiddle.net/0c1oqf38). Делать это можно на любом локальном веб-сервере. Я использую в своей работе Open Server (ospanel.io).</p>

10 <h3>Ресурсы, которыми я пользуюсь при создании 3D приложений</h3>

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

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

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

14 </ul>