DIGITAL ДЛЯ БИЗНЕСА · АРСЕНИЙ АСЯНОВ
EN RU

Разбор · Проектная работа на заказ

Как устроен 3D-мир в играх

Интерактивный учебник для защиты студенческого проекта: семь коротких уроков о том, как игры хранят и рисуют трёхмерный мир. В каждом уроке живая 3D-сцена, которую можно покрутить руками, а на первом экране робот идёт туда, куда кликнули.

Тип
Проектная работа на заказ для студента, защищена на «отлично»
Сроки
27 сентября 2026, 2 коммита
Стек
HTML, CSS, JavaScript и three.js без сборщика · 2034 строки
Ссылки
живая страница ↗
код на GitHub ↗

Первый экран: робот идёт к точке клика, ширина 1440px.

Телефон, 393px.

Урок 1 на телефоне.

01

Для кого и зачем

Заказ от студента: ему нужен был сайт для защиты проекта о том, как устроено трёхмерное пространство в играх. Тема абстрактная — координаты, матрицы, камеры, — и на словах её легко потерять. Задача была показать каждое понятие так, чтобы его можно было потрогать: подвинуть ползунок, повернуть камеру, кликнуть по полу.

Поэтому каждый урок устроен одинаково: слева короткий текст простым языком, справа живая сцена и табло с цифрами, которые меняются вместе с ней. Сам сайт оформлен как проектная работа: в начале актуальность, цель и задачи, в конце вывод и источники, а каждая задача ведёт к своему уроку. Проект защищён на «отлично».

02

Что сделано

  1. Первый экранпометка «Проектная работа» и робот на сетке с осями: кликаешь по полу — идёт туда, а табло показывает координаты под курсором
  2. О проектеактуальность, цель, восемь задач со ссылками на уроки и паспорт проекта в виде основной надписи чертежа
  3. Координатыкристалл на ползунках X, Y, Z, пунктирные проекции на оси и таблица «какая ось смотрит вверх» в Unity, Unreal, Godot и Blender
  4. Трансформманипулятор, как в редакторах движков: перемещение, поворот и масштаб по клавишам W, E, R и таблица чисел
  5. Мешсфера, бублик и камень в шести уровнях детализации: каркас, вершины, нормали и счётчик треугольников
  6. Иерархиясолнце, планета и луна: локальные координаты луны не меняются, а мировые рисуют петлю
  7. Камерапирамида обзора со стороны и окно «вид игрока», перспектива и ортография, счётчик того, что рисуется
  8. Свет и материалшероховатость, металличность, цвет, положение солнца и тени
  9. Игровой циклмини-игра на WASD с кристаллами, кадры в секунду, deltaTime и замедление времени
  10. Вывод и источникиитог проекта и девять источников: документация three.js, Unity, Unreal и Godot, LearnOpenGL, MDN и Game Programming Patterns
  • Файлыindex.html — 369 строк, style.css — 364, десять JS-модулей — 1301: общий модуль сцены и по файлу на каждый урок.
  • Библиотекиthree.js 0.170 подключается через importmap с jsDelivr, без сборщика. Модель робота — RobotExpressive из примеров three.js, лицензия CC0.
  • СкоростьСцена запускается за 400px до появления на экране и рисуется, только пока её видно. Плотность пикселей ограничена двумя.
  • АдаптивОдна точка перелома — 900px. На сенсорных экранах вместо подсказки про клавиатуру появляются кнопки-стрелки. При «уменьшить движение» декорации сами не вращаются.

03

Решения, на которые стоит посмотреть

  • Клик по полу — это рейкаст

    Координаты мыши переводятся в диапазон от −1 до 1, из камеры через эту точку выпускается луч, и сайт ищет, где он пересёк пол. Клик от поворота камеры отличается по расстоянию: если между нажатием и отпусканием мышь ушла дальше 6px, это был поворот, и робот никуда не идёт.

  • Цвет — это ось

    X красная #e5484d, Y зелёная #2f9e57, Z синяя #2f6feb — как во всех 3D-редакторах. Эти три цвета — единственные акценты на странице: ими подписаны оси в сценах, покрашены ползунки, цифры на табло и буквы в тексте уроков. По цвету сразу понятно, о какой координате речь.

  • Восемь сцен, один цикл

    На странице восемь 3D-окон, но цикл отрисовки один. Сцена создаётся, когда до неё осталось 400px прокрутки, а рисуется, только пока её видно, — поэтому страница не тормозит и на ноутбуке со встроенной графикой. Время кадра ограничено 0,1 с: после переключения вкладки робот не «телепортируется».

  • Камера показывает саму себя

    В уроке про камеру на одном холсте два вида: со стороны и глазами игрока. Второй рисуется через scissor ровно под рамкой из CSS. Каждый кадр строится пирамида обзора и проверяется каждый объект: что в неё не попало, красится серым, а табло считает, сколько объектов рисуется. Корпус камеры и линии пирамиды лежат на отдельном слое, поэтому игрок их не видит.

  • Один робот на все сцены

    Модель скачивается один раз, а каждая сцена получает свою копию со своим скелетом. Высота считается только по жёстким частям тела: у кистей сырые размеры в «единицах скелета» в сто раз больше, и с ними робот сжимался до точки. Если первый адрес модели не отвечает, берётся второй, а без сети вместо робота появляется фигура из кубиков.

Что стоит доработать

  • three.js и модель робота грузятся со сторонних серверов, jsDelivr и threejs.org. Без интернета 3D не запустится совсем.
  • На телефоне касание 3D-окна поворачивает камеру, а не листает страницу: прокручивать приходится за текст.
  • Приблизить сцену нельзя: колесо мыши отдано прокрутке страницы, а жест «щипок» выключен вместе с ним.
  • У «камня» в уроке про меш в каждой вершине торчит пучок нормалей — по одной на каждую плоскую грань. В тексте урока это не объяснено.

04

Как проверить

  • Кликнуть по полу на первом экране — робот пойдёт в эту точку первый экран ↗
  • Сузить угол обзора камеры и посмотреть, как объекты становятся серыми камера ↗
  • Собрать пять кристаллов на WASD и замедлить время ползунком мини-игра ↗

Связь со мной

Есть задача?
Пиши.