git clone https://github.com/maximk247/CADTestTask.git

cd CADTestTask

npm i

npm run start

npm run dev

3D Box — это веб-приложение, которое позволяет пользователям создавать и настраивать 3D модели коробок с возможностью изменения размеров в реальном времени. Приложение построено на React и Three.js для визуализации и манипуляции с 3D объектами. Пользователи могут ввести длину, ширину и высоту коробки и получить обновленную 3D модель. Также имеется возможность переключаться между тёмной и светлой темами интерфейса.

• Динамическое создание 3D моделей коробок.
• Визуализация изменений в реальном времени при вводе новых параметров.
• Управление камерой с возможностью вращения и изменения масштаба модели.
• Переключение между светлой и тёмной темами.
• Взаимодействие с серверной частью на Express.js для расчета вершин и индексов модели.

• React — библиотека для создания пользовательских интерфейсов.
• Three.js — для работы с 3D графикой в браузере.
• React Three Fiber — обертка для интеграции Three.js с React.
• Ant Design — библиотека компонентов пользовательского интерфейса.
• Express.js — для обработки серверных запросов и API.

• components/ — содержит React-компоненты для отображения формы, переключателя тем, и 3D бокса.
• api/ — серверная часть для обработки запросов, таких как расчеты вершин и индексов..
• src/ — основная часть исходного кода приложения.
• utils/ — вспомогательные функции для параметров приложения.
• interfaces/ — определение интерфейсов для компонентов.
• enums/ — определения перечисляемых свойств.

1. Введите значения для длины, ширины и высоты коробки в поля формы.
2. Нажмите кнопку для обновления 3D модели на экране.
3. Переключите тему с тёмной на светлую с помощью переключателя темы.
4. Управляйте 3D моделью с помощью мыши — вращайте и приближайте вид.

Приложение включает серверную часть на Express.js, которая обрабатывает запросы на расчет 3D геометрии. Клиент отправляет запрос с параметрами коробки, а сервер возвращает данные о вершинах и индексации для 3D модели.