Быстрый старт
Добро пожаловать в Wonderland Engine. Пожалуйста, установите редактор Wonderland перед продолжением этого руководства.
Создание проекта
Введите название проекта по вашему выбору и создайте его с помощью “Мастера проектов”, который запускается при первом запуске редактора.
Выберите шаблон “VR”.
Вы получите базовый проект с настройкой VR-телепортации. Довольно скучно! Мы должны добавить здесь ассет.
Внизу слева вы видите “Браузер ассетов”. Он показывает содержимое каталога проекта. Все ассеты должны быть размещены в этом каталоге.
Запуск в браузере
Чтобы упаковать проект и просмотреть его в браузере, нажмите на зеленую стрелку в верхней части окна:
Теперь, каждый раз, когда мы “упаковываем” проект (нажав на иконку 🔨), браузер автоматически перезагрузится с нашими изменениями.
Удаление объектов
Шаблон VR предоставляет нам несколько источников света, объектов и, что самое важное: настройку игрока.
Нам не нужны все объекты. Удалите их, выбрав левой кнопкой мыши и затем либо щелкнув правой кнопкой мыши в “Сцене Outline”, либо нажав клавишу “Del”.
Удалите эти:
- Куб
- Сфера
- Конус
- Панель
Убедитесь, что вы оставили:
- Игрок
- Свет
- Свет.000
- 3DCursorHitLeft / 3DCursorHitRight
- TeleportIndicator
Изменение навигационной сетки
Плоскость, которую мы оставили, имеет прикрепленный компонент “collision”, который определяет форму объекта для столкновений и лучевых проверок.
В этом случае она используется для телепортационной навигации. На следующем шаге мы добавим сцену, которая уже имеет пол, поэтому мы удалим сетку, но оставим столкновения.
Щелкните по плоскости, затем в “Свойствах” щелкните ⋮ (вертикальные точки) на компоненте “mesh”, и, наконец, “Удалить”:
Вы увидите, что зеленые линии для компонента столкновения остались, в то время как сетка для рендеринга исчезла. В браузере эта визуализация столкновений не отображается по умолчанию.
Добавление ассета
Создайте новую папку assets, щелкнув правой кнопкой мыши на корневом каталоге и выбрав “Новая папка”.
Скачайте low_poly_winter_scene.zip и распакуйте или перетащите файлы в новую папку в Браузере ассетов. Если вы используете WinRAR, вы также можете перетащить файлы прямо из WinRAR.
Эта красивая сцена была создана “EdwinRC” и может быть найдена на Sketchfab.
Чтобы импортировать сцену, просто перетащите scene.gltf (не scene.bin) в “Просмотр сцены”. Альтернативно, вы можете перетащить её прямо на существующий объект в “Сцене Outline”.
Осмотр сцены
Чтобы осмотреться в “Просмотре сцены”, удерживайте правую кнопку мыши при перемещении мыши. Используйте клавиши W-A-S-D для перемещения вперед, влево, назад и вправо, удерживая правую кнопку мыши. Чтобы увеличить скорость, прокрутите вверх, удерживая правую кнопку мыши.
Вы также можете удерживать кнопку колесика мыши (удерживайте Alt на MacOS), чтобы вращаться вокруг сцены.
Позиционирование источников света
Свет сейчас кажется неподходящим для новой сцены.
Чтобы переместить его в подходящее место, выберите его в “Сцене Outline” и используйте ручки “манипулятора перемещения”, чтобы перетащить свет по 3D-сцене.
Если у вас нет стрелок для перемещения, вы можете переключать тип манипулятора с помощью следующих клавиш:
- G (“Захват”): манипулятор позиционирования
- R (“Вращение”): манипулятор вращения
- S (“Масштаб”): манипулятор масштаба
Дважды нажмите G, чтобы переключаться между перемещением в локальном и мировом пространстве.
Вы также можете использовать панель инструментов в верхней части “Просмотра сцены”:
Свойства компонента
Объект “Свет” создает освещение, потому что к нему прикреплен компонент “light”. Вы можете сделать свет ярче, уменьшив свойство “intensity” компонента света:
Резюме
Хотя эта сцена содержит всего несколько объектов, Wonderland Engine отлично подходит для отрисовки большого количества разнообразных сеток. Смотрите Пример оптимизации сцены.
Вы можете продолжить, добавив собственное поведение с вашими JavaScript компонентами.
Или вы можете добавить поддержку VR контроллеров.