https://github.com/maximk247/cadtesttask
https://github.com/maximk247/cadtesttask
express nodejs react react-three-fiber react-typescript threejs
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/maximk247/cadtesttask
- Owner: maximk247
- Created: 2024-09-04T18:24:57.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-05T12:19:17.000Z (10 months ago)
- Last Synced: 2025-01-12T17:09:20.711Z (6 months ago)
- Topics: express, nodejs, react, react-three-fiber, react-typescript, threejs
- Language: TypeScript
- Homepage: https://cad-test-task.vercel.app
- Size: 77.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 3D Box
## Инструкция запуска
```bash
git clone https://github.com/maximk247/CADTestTask.git
```
```bash
cd CADTestTask
```
```bash
npm i
```
```bash
npm run start
```
```bash
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 моделью с помощью мыши — вращайте и приближайте вид.
## API
Приложение включает серверную часть на Express.js, которая обрабатывает запросы на расчет 3D геометрии. Клиент отправляет запрос с параметрами коробки, а сервер возвращает данные о вершинах и индексации для 3D модели.