Геймдев и графика

Учебник Three.js для начинающих

24 урока · 6 разделов · бесплатно, без регистрации

Начать с первого урока

Three.js — самый популярный способ делать 3D-графику прямо в браузере. Это высокоуровневая обёртка над WebGL: она избавляет от ручной работы с шейдерами и матрицами и позволяет мыслить понятными категориями — сцена, камера, объект, свет. Курс рассчитан на тех, кто уже знает JavaScript и хочет научиться строить интерактивные 3D-сцены: от первого вращающегося куба до сцены с моделями, светом, тенями и управлением мышью. Вы разберёте три кита любой сцены (Scene, Camera, Renderer), научитесь собирать объекты из геометрии и материалов, ставить свет и тени, управлять камерой через OrbitControls, анимировать честно по времени (delta time), ловить клики по объектам через Raycaster, грузить готовые модели в формате glTF и держать высокий FPS с помощью инстансинга и других приёмов. Будем честны про интерактив: код с Three.js использует WebGL и DOM, поэтому в нашей песочнице он не запускается и дан как образец для чтения с корректными ESM-импортами. Зато всю математику 3D — векторы, нормализацию, интерполяцию, пересечение луча и сферы, расчёт кадров — вы запускаете прямо на странице кнопкой «Запустить» и видите реальный вывод. Это первый курс раздела «Геймдев и графика».

Курс «Three.js» состоит из 6 разделов и 24 уроков: Введение в Three.js и 3D, Объекты и геометрия, Материалы, цвет и свет, Камера, управление и анимация, Взаимодействие и сцена побольше и Производительность и практика. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Введение в Three.js и 3D

    1. Что такое Three.js и зачем он нужен

      Three.js — высокоуровневая обёртка над WebGL для 3D в браузере: что она даёт, где применяется и чем отличается от голого WebGL.

    2. Три кита сцены: Scene, Camera, Renderer

      Любая 3D-картинка в Three.js строится из трёх частей: Scene (что показываем), Camera (откуда смотрим), Renderer (кто рисует). Разбираем каждую.

    3. Подключение: npm, CDN и ES-модули

      Как подключить Three.js: установка через npm с Vite или быстрый старт через CDN и import map. ES-модули, импорт addons и почему важна версия.

    4. Первая сцена и цикл рендера

      Собираем минимальную сцену с вращающимся кубом и запускаем цикл рендера через requestAnimationFrame. Зачем нужен animation loop и как он работает.

  2. 2 Объекты и геометрия

    1. Меш: геометрия плюс материал

      Mesh в Three.js — это связка геометрии (форма) и материала (внешний вид). Разбираем, из чего состоит видимый объект и как его собрать.

    2. Встроенные геометрии

      Box, Sphere, Plane, Cylinder и другие готовые геометрии Three.js. Какие параметры они принимают и как сегментация влияет на гладкость и нагрузку.

    3. Координаты и трансформации

      Система координат Three.js (X вправо, Y вверх, Z на зрителя) и три трансформации: position, rotation (в радианах) и scale. Как двигать и поворачивать объекты.

    4. Группы и единицы измерения

      Group объединяет объекты, чтобы двигать их вместе как единое целое. Плюс — про условные единицы Three.js и выбор удобного масштаба сцены.

  3. 3 Материалы, цвет и свет

    1. Материалы: Basic, Lambert, Phong, Standard

      Четыре главных материала Three.js и их отличия: Basic не реагирует на свет, Standard физически корректен (PBR). Когда какой выбирать.

    2. Цвет и текстуры

      Как задавать цвет в Three.js (hex, объект Color) и накладывать текстуры через TextureLoader. Что такое UV-развёртка простыми словами и зачем нужна.

    3. Источники света

      Четыре типа света в Three.js: Ambient (равномерный), Directional (солнце), Point (лампочка), Spot (прожектор). Чем отличаются и как их комбинировать.

    4. Тени и почему объект чёрный

      Почему MeshStandardMaterial без света выглядит чёрным и как это исправить. Обзор теней в Three.js: что включить, чтобы объект отбрасывал и принимал тень.

  4. 4 Камера, управление и анимация

    1. Камеры: Perspective и Orthographic

      Две камеры Three.js: PerspectiveCamera с перспективой (fov, aspect, near, far) и OrthographicCamera без искажений. Когда какую выбирать и что значат параметры.

    2. Управление камерой: OrbitControls

      OrbitControls позволяет вращать, приближать и панорамировать сцену мышью без ручного кода. Как подключить из addons и обновлять в цикле рендера.

    3. Векторная математика движения

      Основы векторов для 3D-движения: длина, нормализация, линейная интерполяция (lerp) и поворот. Живые запускаемые JS-примеры без Three.js.

    4. Анимация и delta time

      Почему анимацию нужно привязывать к реальному времени (delta time), а не к кадрам. Как THREE.Clock даёт delta и почему это спасает на разных мониторах.

  5. 5 Взаимодействие и сцена побольше

    1. Реакция на ввод: мышь и клавиатура

      Как ловить мышь и клавиатуру в Three.js-приложении: события браузера, состояние нажатых клавиш и применение ввода в цикле рендера для управления объектами.

    2. Пикинг объектов: Raycaster

      Raycaster пускает луч из камеры через курсор и находит объекты под мышью. Разбираем идею луча и считаем пересечение луча со сферой живым JS-примером.

    3. Загрузка моделей: GLTFLoader

      Как загружать готовые 3D-модели в Three.js через GLTFLoader. Почему формат glTF/glb — стандарт для веба и как добавить загруженную модель в сцену.

    4. Атмосфера: туман, фон, окружение

      Как добавить сцене глубину и настроение: туман (Fog) для растворения дали, цвет или картинка фона и карта окружения для реалистичных отражений.

  6. 6 Производительность и практика

    1. Что тормозит 3D

      Главные причины низкого FPS в Three.js: много draw calls, избыток полигонов и тяжёлые текстуры. Как диагностировать узкое место и на что смотреть.

    2. Приёмы оптимизации и инстансинг

      Как ускорить Three.js: переиспользование геометрии и материалов, инстансинг (InstancedMesh) для тысяч одинаковых объектов и уровни детализации.

    3. Адаптация под окно, сборка и деплой

      Как сделать сцену адаптивной под размер окна (resize), обновить aspect камеры и размер рендерера, а затем собрать и задеплоить Three.js-проект.

    4. Мини-проект и что дальше

      Собираем всё вместе: разбираем структуру кода вращающейся интерактивной сцены и намечаем путь развития — физика, шейдеры, react-three-fiber.