Быстрый старт

Добро пожаловать в 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 контроллеров.