Skip to content
Веб-разработка
GitHub

Three.js

Цель: научиться основам работы с трехмерной графикой в браузере, используя библиотеку Three.js. Реализовать загрузку 3D-моделей .stl, их отображение в приложении и возможность интерактивно изменять параметры отображения, такие как освещение и цвет.

Подготовка

  1. Изучить основы работы с WebGL и библиотекой Three.js:
    • Создание сцены (scene), камеры (camera) и рендера (renderer). Пример из документации.
    • Добавление объектов (mesh) в сцену.
    • Настройка источников света.
  2. Изучить специфику формата STL:
    • Разобраться с загрузкой моделей в формате .stl из сетевого ресурса.
    • Освоить STLLoader из библиотеки Three.js. Пример кода.
  3. Повторить работу с JavaScript DOM API и Fetch API для динамической загрузки данных.
  4. Разобраться с возможностями three.js для изменения материалов объектов, работы с камерой и освещением.

Источники

  1. Пример с занятия
  2. Мануал Three.js
  3. Введение в 3D: основы Three.js
  4. Документация Three.js
  5. Discover Three.js

Примеры

  1. Пример разборки с react
  2. Пример использования WebGL

Структура проекта

Обновленная структура проекта совпадает с предыдущей, дополненной файлом и настройками для подключения Three.js:

/public
  - script.js          // Основная логика приложения
  - styles.css         // Стили всей веб-страницы
  - index.html         // Главная страница со списком моделей
  - validate.js        // Логика валидации форм
  - three.js           // Основная библиотека (версия библиотеки)
  - STLLoader.js       // Лоадер моделей STL для Three.js
/uploads
  - (здесь будут загруженные .stl файлы моделей)

Просмотр списка моделей и модели

GET / или GET /index.html — возвращает главную страницу со списком доступных моделей. Модели должны загружаться динамически через Fetch API и отображаться в виде карточек (название, краткое описание и кнопка “Просмотреть”). При нажатии на кнопку “Просмотреть” происходит загрузка соответствующей модели и ее отображение на странице крупно над списком и с отрисовкой трехмерной модели.

Подключите к странице библиотеку three.js.

Создайте renderer, scene, camera c требуемыми параметрами.

После получения файла он загружается в сцену через STLLoader. Рендер модели с помощью Three.js.

Добавьте горизонтальную плоскость, на которой в дальнейшем будет размещаться модель.

Добавьте в сцену на фон вертикальную плоскость с помощью bufferGeometry.

Добавьте на сцену один объект из готовой геометрии (куб, сфера и т.д.) и треугольную пирамиду с помощью bufferGeometry.

Добавьте к сцене разные типы источников света по одной из схем ниже.

Модели должны отбрасывать тени от источников света на плоскости.

Добавьте элементы формы для возможности изменения цвета (input type=“color”) моделей и включения и выключения источников освещения.

Реализуйте управление через мышь для изменения масштаба, поворота и перемещения объекта. Используйте OrbitControls для удобства.

Схемы

Сервер

Настройте API endpoint по пути /models и методу GET, чтобы возвращался массив JSON-объектов моделей.

Пример объекта модели:

{
  "id": 1,
  "name": "Модель самолета",
  "description": "Модель для примера обучения",
  "file_path": "/uploads/airplane.stl",
  "author": "John",
  "time": "2024-05-20T14:00:00Z"
}

При отправке запроса на /uploads/airplane.stl сервер должен вернуть файл без преобразования к строке, с указанием длины файла. Не забудьте установить MIME Type - model/stl при отправке ответа.

Требования к коду и результат выполнения

  • Код отформатирован, не содержит ошибок и замечаний от статического анализа кода ESLint, сохранен в системе контроля версий.
  • Отсутствуют ошибки в консоли.
  • Работающий локально сервер с логикой, которая соответствует требованиям задания.
  • Сервер проходит все тесты.

Вопросы для защиты

  1. WebGL и Three.js. Назначение и связь.
  2. canvas в браузере.
  3. Основные объекты для полноценной работы three.js.
  4. Виды камер в three.js и их основные параметры.
  5. Виды источников света и их основные параметры.
  6. Работа с тенями и какие свойства объектов при этом задействуются.
  7. Что можно/нужно указать для создания bufferGeometry?
  8. Из чего состоит mesh в three.js?
  9. Формат STL. Его особенности.