Описание

Emaze Tours — это конструктор виртуальных экскурсий в духе Canva и Emaze: веб-приложение, где пользователь собирает интерактивную 3D-комнату в визуальном редакторе, накидывает на неё объекты — изображения, YouTube-видео, текст, даже HTML в песочнице, — расставляет их привычными ручками перемещения/масштаба/поворота, а затем публикует результат по ссылке /tour/{slug} или встраивает через iframe. Построено на Next.js 16 с 3D-задником на React Three Fiber и слоем 2D-редактирования на Moveable + Zustand поверх, с Supabase для хранения данных и файлов.

Интерактивные «виртуальные экскурсии» и 3D-презентации выглядят эффектно, но делать их мучительно. Варианты — осваивать дизайн-софт, воевать с тяжёлым 3D-инструментарием или арендовать дорогой SaaS вроде оригинального Emaze — не подходят не-дизайнеру, которому просто нужно скомпоновать комнату, вставить пару картинок и подписей и поделиться ссылкой. Задача была в собственном конструкторе, который сохраняет иммерсивный 3D-вид, но делает создание таким же простым, как расстановка фигур на слайде.

Решение

Ключевая идея обманчиво проста: рендерить комнату в 3D, но редактировать в 2D. Комната — это настоящая сцена React Three Fiber, дающая глубину и свет, от которых экскурсия ощущается иммерсивной; а объекты внутри — плоские 2D-слои с обычными трансформами x, y, width, height, rotation, управляемые через React Moveable — той же механикой drag-resize-rotate, что люди уже знают по Canva. Это решение убирает самую сложную часть 3D-редактирования (реальную пространственную манипуляцию), сохраняя выигрыш. Пользователь создаёт экскурсию, добавляет типизированные объекты, расставляет их и жмёт «опубликовать»; экскурсия сохраняется в Supabase и отдаётся по своему URL или внутри iframe, с адаптивным просмотром, масштабирующим сцену под десктоп, планшет и мобильный.

Результат

- Рабочий MVP конструктора экскурсий в стиле Emaze: создать → отредактировать → опубликовать, от начала до конца
- Иммерсивное ощущение 3D-комнаты при редактировании, простом как холст слайда
- Экскурсии публикуются по ссылке и встраиваются через iframe, с адаптивным просмотром
- Хранение и картинки на Supabase, деплой Docker-контейнером за Nginx
- Строгий слоистый TypeScript-код, который чисто расширять за пределы MVP

Презентация проекта