https://github.com/a1unade/refloor-room-builder
Интерактивный 3D-конфигуратор комнаты на TypeScript, Three.js и React: построение помещения по заданным размерам, визуализация раскладки пола, стен и плинтусов, а также расчёт материалов для ремонта.
https://github.com/a1unade/refloor-room-builder
api-extractor fluentui react threejs tsyringe typescript
Last synced: 8 days ago
JSON representation
Интерактивный 3D-конфигуратор комнаты на TypeScript, Three.js и React: построение помещения по заданным размерам, визуализация раскладки пола, стен и плинтусов, а также расчёт материалов для ремонта.
- Host: GitHub
- URL: https://github.com/a1unade/refloor-room-builder
- Owner: a1unade
- License: mit
- Created: 2026-05-12T14:34:48.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-17T21:39:15.000Z (about 1 month ago)
- Last Synced: 2026-05-17T21:41:37.512Z (about 1 month ago)
- Topics: api-extractor, fluentui, react, threejs, tsyringe, typescript
- Language: TypeScript
- Homepage: https://a1unade.github.io/refloor-room-builder/
- Size: 254 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/a1unade/refloor-room-builder/actions/workflows/build.yml)
[](https://github.com/a1unade/refloor-room-builder/actions/workflows/deploy.yml)
Интерактивная 3D-сцена комнаты с настройкой размеров помещения, визуализацией стен, пола, плинтуса и автоматическим расчётом материалов.
Проект реализован на **React**, **TypeScript** и **Three.js**.
Основная 3D-логика вынесена в локальный пакет `@refloor/core`, а React-приложение отвечает за UI и взаимодействие с пользователем.
## Demo
GitHub Pages: https://a1unade.github.io/refloor-room-builder/
## Возможности
- построение 3D-комнаты по параметрам:
- длина;
- ширина;
- высота;
- отображение стен с материалом покраски;
- построение пола с отдельными плашками;
- поддержка двух типов раскладки:
- прямая палубная раскладка;
- ёлочка / herringbone;
- зазоры между досками;
- тепловой зазор между полом и стенами;
- плинтус по периметру комнаты;
- аккуратное примыкание плинтуса в углах;
- расчёт количества плашек пола;
- расчёт погонажа плинтуса;
- управление камерой через OrbitControls;
- адаптивная панель управления;
- слайдеры для изменения параметров комнаты;
- оптимизация пола через `InstancedMesh`.
## Технологии
- `React`
- `TypeScript`
- `Three.js`
- `Vite`
- `Fluent UI`
- `tsyringe`
- `GitHub Actions`
- `GitHub Pages`
## Основные допущения
- Единица измерения в 3D-сцене соответствует одному метру.
- Размер плашки пола по умолчанию: 600 × 100 мм.
- Толщина плашки используется только для визуализации.
- Количество плашек рассчитывается по площади пола и площади одной плашки.
- Для раскладки ёлочкой применяется повышающий коэффициент запаса.
- Тепловой зазор у стен учитывается при генерации пола.
- Плинтус визуально перекрывает тепловой зазор.
- Подрезка плашек у границ комнаты визуально ограничивается областью пола.
- Расчёт погонажа плинтуса выполняется по периметру комнаты.
- Расчёт краски не используется в итоговом UI, так как основной расчёт в текущей версии сфокусирован на напольном покрытии и плинтусе.
## Архитектура
В проекте используется разделение на React-приложение и 3D-ядро.
`@refloor/core` отвечает за:
- создание renderer;
- управление сценой;
- управление камерой и `OrbitControls`;
- построение стен;
- построение пола;
- построение плинтуса;
- расчёты материалов;
- публичный API через `AppHub`.
React-приложение отвечает за:
- canvas;
- панель управления;
- ввод параметров;
- отображение расчётов;
- обновление сцены при изменении параметров.
Такой подход позволяет отделить Three.js-логику от UI и упростить поддержку проекта.
## Сборка проекта
Для запуска проекта необходимо из корня проекта выполнить следующие команды:
1) Установить зависимости
```bash
npm install
```
2) Собрать библиотеку ядра `@refloor/core`:
```bash
npm run build:core
```
3) Запустить dev-сервер:
```bash
npm run dev
```
Собрать весь проект можно командой:
```bash
npm run build
```