JavaScript Components

8thwall-camera 

Компонент камеры 8thwall.

Устарело: Используйте компоненты из https://github.com/WonderlandEngine/wonderland-ar-tracking вместо этого.

anchor 

Устанавливает местоположение объекта на основе местоположения XRAnchor

Создайте привязки, используя статическую функцию Anchor.create().

Пример использования с курсором:

1cursorTarget.onClick.add((object, cursor, originalEvent) => {
2    /* Только события в XR будут иметь прикрепленный кадр */
3    if(!originalEvent.frame) return;
4    Anchor.create(anchorObject, {uuid: id, persist: true}, originalEvent.frame);
5});

audio-listener 

Представляет компонент аудиослушателя Wonderland. Обновляет позицию и ориентацию экземпляра WebAudio слушателя.

Примечание: Активным должен быть только один слушатель в любой момент времени.

audio-source 

Представляет аудиофайл в Wonderland Engine, позволяя воспроизведение аудиофайлов.

cursor 

3D курсор для настольных компьютеров/мобильных устройств/VR.

Реализует курсор с отслеживанием направленных лучей в сцене. Чтобы реагировать на щелчки/навизание/снятие навизания/вниз курсора/вверх курсора/перемещение, используйте cursor-target.

Для VR луч направляется в направлении this.object.getForward(). Для настольных компьютеров и мобильных устройств вектор направленности инверсно проецируется, чтобы учитывать, где на экране пользователь щелкнул мышью.

.globalTarget можно использовать для вызова обратных вызовов для всех объектов, даже тех, у которых нет прикрепленного целевого курсора, но они соответствуют группе столкновения.

.hitTestTarget можно использовать для вызова обратных вызовов результатов теста столкновения WebXR,

Смотрите Пример анимации.

Прикрепляет компонент hit-test-location к cursorObject, который будет использоваться курсор для отправки событий на hitTestTarget с HitTestResult.|

cursor-target 

Цель для кликов/наведения/перемещения/кнопки для cursor.

Чтобы активировать код при нажатии, наведении, снятии наведания, перемещении курсора, нажатии или отпускании кнопки курсора, используйте .addClickFunction(f), .addHoverFunction(f), .addUnHoverFunction(f), .addMoveFunction(f), .addDownFunction(f) и .addUpFunction(f) соответственно с любой function f() {}.

Чтобы вызвать участников на другом компоненте, вы можете настроить целевой курсор, как следует:

1start: function() {
2  let target = this.object.addComponent('cursor-target');
3  target.onClick.add(this.onClick.bind(this));
4},
5onClick: function() {
6  console.log(this.object.name, "был нажат!");
7}

Функции:

 1const target = this.object.getComponent(CursorTarget);
 2const callback = function(object, cursorComponent) {};
 3
 4target.onHover.add(callback);
 5target.onHover.remove(callback);
 6
 7target.onUnHover.add(callback);
 8target.onUnHover.remove(callback);
 9
10target.onClick.add(callback);
11target.onClick.remove(callback);
12
13target.onMove.add(callback);
14target.onMove.remove(callback);
15
16target.onDown.add(callback);
17target.onDown.remove(callback);
18
19target.onUp.add(callback);
20target.onUp.remove(callback);

Требования:

• компонент collision должен быть прикреплен к тому же объекту.

Смотрите Пример анимации.

debug-object 

Выводит некоторое ограниченное отладочное описание о объекте.

Информация состоит из: Имя этого объекта, имя параметра объекта, мировая трансляция объекта, мировая трансформация и локальная трансформация.

Основным образом используется разработчиками движка для отладки или как пример кода.

device-orientation-look 

Получает ориентацию устройства с мобильного устройства и устанавливает ориентацию объекта соответствующим образом.

Полезно для опытов с волшебными окнами.

finger-cursor 

Активирует взаимодействие с целями курсора через перекрытие столкновений, например, на кончике пальца отслеживаемой руки.

Требования:

• Компонент столкновения (обычно сфера с радиусом 0.05) на том же объекте

fixed-foveation 

Применяет фиксированное фовеирование после начала сеанса WebXR

Фиксированное фовеирование снижает стоимость затенения на периферии за счет рендеринга с более низким разрешением по краям поля зрения пользователя.

hand-tracking 

Удобное отслеживание рук через WebXR Device API “Hand Input” API.

Позволяет отображать руки как сферы-суставы или скинированную сетку.

Чтобы реагировать на захват, используйте this.isGrabbing(). Для других жестов, обратитесь к this.joints - массиву Object3D и используйте индексы суставов, перечисленные в спецификации WebXR Hand Input.

Часто желательно использовать либо отслеживание руки, либо контроллеры, но не оба одновременно. Этот компонент предоставляет deactivateChildrenWithoutPose для скрытия визуализации рук если доступная поза отсутствует и controllerToDeactivate для отключения другого объекта, как только доступна поза отслеживания рук. Вне XR сеансов, отслеживание или контроллеры не активируются и не отключаются для правильной работы с компонентом vr-mode-active-switch.

Требования:

• Чтобы использовать отслеживание рук, включите “отслеживание суставов” в chrome://flags на Oculus Browser для Oculus Quest/Oculus Quest 2.

Смотрите Пример отслеживания рук.

hit-test-location 

Настраивает Тест столкновения API устройства WebXR и размещает объект на месте попадания.

Требования:

• Укажите 'hit-test' в необходимых или дополнительных функциях на кнопке AR в вашем HTML файле. Смотрите Wastepaperbin AR в качестве примера.

Устарело: Используйте onHitLost и onHitFound вместо.|

image-texture 

Загружает изображение с URL и применяет его как diffuseTexture или flatTexture к прикрепленному компоненту сетки.

Поддерживаются материалы с следующих шейдеров:

• “Phong Opaque Textured”
• “Flat Opaque Textured”
• “Background”
• “Physical Opaque Textured”
• “Foliage”

input-profile 

Динамическая загрузка и сопоставление профилей ввода для XR контроллеров.

mouse-look 

Контролирует ориентацию камеры через движение мыши.

Эффективно реализован, чтобы влиять на ориентацию объекта только когда мышь двигается.

orbital-camera 

Компонент OrbitalCamera позволяет пользователю вращаться вокруг целевой точки, которая является позицией самого объекта. Вращается на указанном расстоянии.

Примечания: Компонент работает, используя мышь или сенсорный экран. Поэтому он не работает в VR.

plane-detection 

Генерирует сетки и столкновения для XRPlanes, используя WebXR Device API - Обнаружение плоскостей.

player-height 

Устанавливает высоту игрока в виде смещения по оси Y над землей для ‘местных’ и ‘зрительских’ пространств.

target-framerate 

Устанавливает целевую частоту кадров

Обновляет целевую частоту кадров на ближайшую поддерживаемую целевую частоту кадров к указанной частоте framerate.

Целевая частота кадров используется для индикатора VR композитора устройства о том, как часто обновлять экран новыми изображениями. Это означает, что приложение будет запрашиваться для создания кадров в более регулярные интервалы, потенциально тратя меньше времени на кадры, которые вероятно будут пропущены.

Для приложений с высокой нагрузкой, установка подходящей целевой частоты кадров может улучшить стабильность рендеринга приложения и снизить задержки.

Аналогично, целевая частота кадров может быть использована для включения частоты обновления 120Hz на Oculus Quest 2 для более простых приложений.

teleport 

Телепорт VR локомоции.

Смотрите Пример телепорта.

trail 

Динамическая трековая сетка

Этот компонент отслеживает мировую позицию объекта, к которому он добавлен. Через фиксированный интервал мировая позиция сохраняется в качестве начальных и конечных точек сегментов трека.

Трек сужается вдоль своей длины. UV текстурные координаты настроены таким образом, чтобы ось U покрывала ширину трека, а ось V длину трека. Это позволяет определить внешний вид трека, используя текстуру.

two-joint-ik-solver 

Обратная кинематика для двухсуставных цепей (например, коленей или локтей)

video-texture 

Загружает видео с URL и применяет его как diffuseTexture или flatTexture на указанный материал.

Видео текстуры необходимо обновлять регулярно, когда доступен новый кадр. Этот компонент обрабатывает обнаружение нового кадра и обновляет текстуру, чтобы отображать текущий кадр видео.

Поддерживаются материалы с следующих шейдеров:

• “Phong Opaque Textured”
• “Flat Opaque Textured”
• “Background”
• “Physical Opaque Textured”
• “Foliage”

К видео можно получить доступ через this.video:

1  let videoTexture = this.object.getComponent('video-texture');
2  videoTexture.video.play();
3  videoTexture.video.pause();

Смотрите Пример с видео.

vr-mode-active-switch 

Позволяет переключать другие компоненты на объекте в состояние активного/неактивного в зависимости от того, активен ли VR/AR сеанс.

Полезно для скрытия контроллеров до тех пор, пока пользователь не войдет в VR.

vrm 

Компонент для загрузки и работы с моделями VRM 1.0.

Позирование модели должно выполняться исключительно путем вращения костей. Они могут быть доступны через свойство .bones и следовать названию костей VRM. Учтите, что не все модели VRM будут содержать все возможные кости. Поза покоя (Т-поза) сохраняется в свойстве .restPose. Сбросить кость в позу покоя можно следующим образом:

1vrmComponent.bones[vrmBoneName].rotationLocal = vrmComponent.restPose[vrmBoneName];

Перемещение модели по миру должно осуществляться путем перемещения объекта, к которому принадлежит данный компонент. Иными словами, перемещая корень модели VRM. Кости и любые дочерние объекты не следует использовать для перемещения модели VRM.

Ядро расширения VRMC_vrm, а также VRMC_springBone и VRMC_node_constraint поддерживаются.

Ограничения:

• Нет поддержки для VRMC_material_mtoon
• Выражения не поддерживаются
• Основное отслеживание направления взгляда по выражениям не поддерживается
• Режим аннотации сетки auto не поддерживается (режим первого лица)

wasd-controls 

Основные движения с помощью клавиш W/A/S/D.