Проект по компьютерной графике с Three.js

Веб-приложение на Three.js, которое развивается от простой интерактивной 3D-сцены до полноценного визуализатора цветового пространства sRGB/CIELAB.

Реализованные возможности

Часть 1 (выполнено)

• Интерактивная 3D-сцена с навигацией камеры через OrbitControls
• Включена отрисовка теней
• Несколько объектов, включая созданные с помощью BufferGeometry (плоскость и пирамида)
• Меш с текстурой (процедурный шахматный паттерн)
• Три источника света разных типов (рассеянный, направленный, точечный)
• Интерактивные элементы управления:
  • Интенсивность освещения (3 параметра)
  • Цвет источников света (2 параметра)
  • Цвет объектов (3 параметра)

Часть 2 (выполнено)

• Загрузка 3D-моделей в форматах GLTF, GLB, OBJ, STL
• Поддержка загрузки через:
  • Выбор файла через input
  • Перетаскивание файла (drag-n-drop)
• Выбор объектов двумя способами:
  • Клик по объекту на сцене
  • Выбор из выпадающего списка
• TransformControls для интерактивного управления объектами
• Числовые поля для точного ввода:
  • Позиция (X, Y, Z)
  • Поворот (в градусах)
  • Масштаб (X, Y, Z)
• Горячие клавиши: G (перемещение), R (поворот), S (масштаб)

Часть 3 (выполнено)

• Пользовательские GLSL шейдеры
• Тор с анимированным волновым эффектом
• Радужная смена цветов (HSV rainbow cycling)
• Волновая деформация геометрии
• Шейдер виден по умолчанию и постоянно анимируется

Установка

npm install

Запуск в режиме разработки

npm run dev

Откройте браузер и перейдите на локальный сервер разработки (обычно http://localhost:5173)

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

npm run build

Деплой на GitHub Pages

Автоматический деплой (рекомендуется)

1. Создайте репозиторий на GitHub
2. Запушьте код:

   git add .
   git commit -m "Part 3 complete"
   git tag part-3
   git remote add origin **
   git push -u origin main
   git push --tags

3. Перейдите в Settings → Pages → Source → выберите "GitHub Actions"
4. Деплой произойдет автоматически при каждом push

Ручной деплой

npm run build
# Загрузите содержимое папки dist/ на любой хостинг

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

.
├── index.html          # Основной HTML файл
├── src/
│   └── main.js        # Главный файл приложения Three.js
├── package.json       # Зависимости проекта
└── README.md         # Этот файл

Используемые технологии

• Three.js - библиотека для работы с 3D-графикой
• Vite - инструмент сборки и сервер разработки
• ES-модули для импорта зависимостей

Лицензия

MIT