Достижения - на сегодня / upload on rail.app
Вот подробный отчет о проделанной работе и текущем функционале приложения «QR-CUBES DONATER 3D».
1. Основной функционал (Ядро)
Программа представляет собой генератор интерактивных 3D QR-кодов, состоящих из вокселей (кубиков).
Генерация QR-кода:
Из текста (ссылки, кошельки, произвольный текст).
Загрузка картинки с устройства.
Загрузка картинки по URL.
Автоматическое сканирование и распознавание содержимого QR.
Вставка Логотипа:
Возможность загрузить свой логотип (файл или URL) в центр QR-кода.
Кубики в центре автоматически удаляются, освобождая место.
Поддержка цветного и черно-белого режима логотипа.
Используется высокий уровень коррекции ошибок (High), чтобы QR оставался читаемым.
Deep Linking (Глубокие ссылки):
Приложение сохраняет состояние в URL (?text=...&color=...).
Можно отправить ссылку другу, и у него откроется тот же самый сгенерированный 3D QR-код.
2. Визуализация и 3D Графика
Используется движок Three.js (React Three Fiber) для высококачественного рендеринга.
Внешний вид кубиков:
Используется геометрия RoundedBox (кубики со скругленными гранями) для лучшей детализации.
Материал: Полупрозрачное "стекло" (meshPhysicalMaterial). Кубики пропускают свет, видны внутренние грани, но при этом они остаются яркими.
Свечение: Добавлено внутреннее свечение (emissive), чтобы код был ярким даже на темном фоне.
Режимы просмотра:
2D: Плоский вид сверху (как классический QR), кубики сплюснуты.
3D: Объемный вид с возможностью вращения камеры.
Адаптивная камера:
Камера автоматически подстраивает зум, чтобы QR-код целиком помещался на экране любого устройства (и вертикального телефона, и горизонтального монитора).
3. Интерактивность и Физика
Кубики реагируют на движения мыши или касания пальцем.
Эффекты взаимодействия (меню Interaction):
Explode (Взрыв): Кубики разлетаются от курсора, подпрыгивают вверх и вращаются.
Ripple (Волна): Плавная волна.
Hover: Легкое поднятие.
Цветовая реакция:
При взаимодействии кубики хаотично (через один) окрашиваются в ярко-зеленый (лаймовый) цвет.
Управление мышью (ПКМ/ЛКМ):
Левая кнопка: Приближает (Zoom) информационную сферу.
Правая кнопка: "Бросает" сферу в центр QR-кода, вызывая постоянную волну.
4. Функции "Donater" (Сбор средств)
Специальный функционал для стримеров и сбора донатов.
Информационная Сфера (HUD):
В 3D режиме это летающий стеклянный шар, в 2D — круг.
Отображает: Иконку цели, Целевую сумму, Текущий сбор (крупно зеленым) и прогресс.
Шар следует за курсором в пределах QR-кода или "прилипает" к центру по нажатию ПКМ.
Меню настройки (Donate Target Setup):
Включение/выключение сферы.
Настройка сумм и валюты.
Переключение языка интерфейса сферы (EN/RU).
5. AI Генерация фона (Google Gemini)
Интеграция с искусственным интеллектом для создания атмосферы.
Генератор:
Позволяет ввести промпт (описание) и сгенерировать уникальный задний фон для сцены.
Кнопка "Magic Wand" (Волшебная палочка) улучшает короткий промпт с помощью AI.
Автоматически определяет соотношение сторон (16:9 для ПК, 9:16 для мобильных).
Стиль: При генерации фона цвет кубиков автоматически меняется на черный, создавая эффект "черного стекла" на красивом фоне.
6. Экспорт и Встраивание
Возможности забрать результат с собой.
Embed HTML: Генерирует готовый код <iframe> для вставки вашего 3D QR-кода на любой веб-сайт.
SVG: Скачивание векторного изображения QR.
GLB (3D): Скачивание полноценной 3D-модели (файл .glb), которую можно открыть в Blender, Windows 3D Viewer или использовать в AR.
7. Интерфейс (UI/UX)
Адаптивный дизайн в стиле "Glassmorphism" (темный полупрозрачный интерфейс).
Заставка (Intro):
Анимация с разлетающимися зелеными кубиками.
Адаптивные шрифты ("QR CUBES" / "DONATER 3D").
Авторский копирайт "IOHOIIIA™".
Боковая панель (Sidebar):
Сворачивается/разворачивается (работает одинаково на ПК и Мобильных).
Вкладки Upload / Create.
Статус панель с кнопкой копирования текста.
Мобильная адаптация:
Специальное расположение меню: Генератор фона и настройки доната находятся внизу (над кнопкой Embed), чтобы было удобно нажимать пальцем.
Умное управление слоями (Z-index), чтобы меню не перекрывали друг друга.
Итог: Это готовый к использованию веб-инструмент, сочетающий утилитарность (QR-коды) с развлечением (3D-физика) и современными технологиями (AI, WebGL).
Комментарии
Отправить комментарий