Emaze Tours — конструктор интерактивных виртуальных экскурсий

Обзор

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, с адаптивным просмотром, масштабирующим сцену под десктоп, планшет и мобильный.

Возможности

• Визуальный редактор — сборка экскурсии на 3D-заднике комнаты привычными действиями перемещения / масштаба / поворота / удаления
• Типизированные объекты — загрузка изображений (PNG/JPG/WebP), YouTube-видео, стилизованный текст (шрифт, размер, цвет, выравнивание) и HTML-вставки в песочнице
• Публикация и встраивание — у каждой экскурсии свой /tour/{slug} и iframe-встраивание
• Адаптивный просмотр — сцена чисто масштабируется на десктопе, планшете и мобильном
• Бэкенд на Supabase — Postgres для проектов и объектов, Storage для загруженных изображений
• Строгий слоистый код — TypeScript без any, валидация Zod, разбиение types/validation → repositories → services → actions → UI

Архитектура

Приложение — это система в стиле Emaze «3D-презентация, 2D-редактирование». Комната рендерится как сцена React Three Fiber, а каждый объект — 2D-слой с плоскими трансформами, так что редактирование ни разу не требует рассуждать о 3D-пространстве. Состояние живёт в сторе Zustand; React Moveable даёт ручки трансформации. На бэкенде Supabase держит схему (projects, objects) и публичный bucket для картинок, а код соблюдает чистое направление зависимостей — типы и валидация Zod → repositories → services → server actions → UI, — чтобы бизнес-правила не протекали в компоненты. Поставляется как standalone Docker-сборка за Nginx. Как MVP, авторизация намеренно отложена (мягкий RLS с зарезервированным owner_id в схеме), поэтому модель безопасности готова ужесточиться в момент включения Supabase Auth.

Результаты

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

Что вынес

Разгадка была в отказе делать 3D-редактирование действительно 3D. Рендер комнаты на React Three Fiber покупает иммерсивный вид, но хранение объектов как 2D-слоёв с плоскими трансформами означает, что редактор переиспользует понятную модель взаимодействия в стиле Canva — и пользователи не упираются в стену, которую реальная 3D-манипуляция ставит перед не-дизайнерами. Второе, что окупилось, — строгая слоистость с первого дня: прогон всех правил через validation → repositories → services → actions держал в честности даже MVP, поэтому код читается как продукт, а не прототип, и путь от «MVP без авторизации» к закрытому многопользовательскому приложению — это изменение конфигурации, а не переписывание.