Галерея (цифровая выставка)

Введение

В этом проекте используется технологический стек three.js, моделирование выполняется в blender, а затем рендеринг запекается для создания сцены, которая экспортируется в формате glb и отображается в веб-интерфейсе.
Этот проект представляет собой демонстрацию концепции цифровой выставки. Если есть какие-либо недостатки, пожалуйста, будьте снисходительны. Вы можете создавать проблемы или задавать вопросы.

Как управлять?

Перемещение: W/S/A/D

Управление перемещением на мобильных устройствах: виртуальный джойстик

Прыжок: пробел

Контроль угла обзора: перетаскивание левой кнопкой мыши

Структура каталога

├── src                        # исходный код
│   ├── assets                 # папка с ресурсами (аудио, текстуры, модели)
│   │── audio                  # аудио (создание локационного аудио)
|   │── character              # персонажи (управление моделями персонажей)
|   │── controlManage          # управление клавиатурой (управление состоянием клавиатуры или виртуального джойстика)
|   │── core                   # основные классы (включая камеру, рендерер, сцену и т. д.)
|   │── css3DRenderer          # отвечает за объединение элементов DOM с содержимым WebGL (рендеринг элементов iframe на экране компьютера)
|   │── environment            # класс сцены (создание моделей карт, рисование текстур выставок, отражение от земли)
|   │── lib                    # расширения three.js
|   │── loader                 # загрузчик классов (управление загрузчиками glb, texture, audio и т.д.)
|   │── rayCasterControls      # класс лучевого проектора (обнаружение взаимодействия между персонажами и рамками)
|   │── ui                     # класс UI (отвечает за управление частью пользовательского интерфейса страницы рендеринга, например, страницей загрузки, окном сведений, виртуальным джойстиком)
|   |    │── Emitter.ts        # класс диспетчера событий (различные типы рассылки событий)
|   |    └── typeAssert.ts     # функции инструментального типа
|   │── world          # основной класс игры (используется для управления основными элементами игрового мира, включая среду, персонажей, взаимодействие с обнаружением и аудио и т. д.)
|   │── main.ts        # функция входа на страницу
|   └── Constants.ts   # определение констант (определение адресов моделей/текстур/медиаресурсов, рассылка событий и т. д.)

Мои мысли об этом открытом проекте:

Вдохновлённый демонстрационными проектами на официальном сайте threejs, я попробовал множество решений при разработке этого проекта. Я также видел много похожих проектов, но большинство из них являются платными (структура слишком мала). С другой стороны, на зарубежных сайтах GitHub существует множество отличных 3D открытых проектов. Это также причина того, почему технологии других людей развиваются так быстро. Поэтому я всё ещё считаю, что не стоит скупиться на вклад в технологии и делиться ими. Открытые проекты могут вдохновлять больше людей и помогать друг другу, чтобы лучше продвигать развитие отрасли.

Открытое программное обеспечение нелегко разрабатывать, пожалуйста, поставьте ⭐⭐⭐⭐

Пожертвования

Открытое программное обеспечение непросто разрабатывать, ваша поддержка — моя постоянная движущая сила! Этот проект является открытым проектом, пожертвования являются добровольными.

Как сделать пожертвование?

Donate to me ⚡

Особенности:

1. Высокопроизводительное обнаружение столкновений:
   Поскольку в таких проектах не так много сценариев применения физических движков, после тщательного изучения технических решений было использовано высокопроизводительное решение для обнаружения динамических столкновений, которое не зависит от физического движка. Производительность намного выше, чем у решения Octree на официальном сайте three.js.
2. Взаимодействие с выставкой:
   Использование световых лучей для обнаружения объектов и запуска интерактивных эффектов.
3. Позиционное аудио:
   Добавление позиционного аудио, имитирующего распространение звука в реальном мире, делает музыку в сцене более пространственной и улучшает впечатления от просмотра.

Запуск

Чтобы настроить среду разработки:

# Клонировать репозиторий

# Установить зависимости
npm i

# Запустить локальный сервер разработки
npm run dev

Чтобы обслуживать производственную сборку:

# Установите зависимости, если это ещё не сделано - 'npi i'

# Сборка для производства
npm run build