JavaScript-Komponenten

8thwall-camera 

8thwall-Kamerakomponente.

Veraltet: Verwende stattdessen die Komponenten in https://github.com/WonderlandEngine/wonderland-ar-tracking.

anchor 

Setzt die Position des Objekts auf die Position eines XRAnchor.

Erstelle Anker mithilfe der Anchor.create()-statischen Funktion.

Beispiel zur Verwendung mit einem Cursor:

1cursorTarget.onClick.add((object, cursor, originalEvent) => {
2    /* Nur Ereignisse in XR werden ein Frame angehängt haben */
3    if(!originalEvent.frame) return;
4    Anchor.create(anchorObject, {uuid: id, persist: true}, originalEvent.frame);
5});

audio-listener 

Repräsentiert eine Wonderland-Audio-Listener-Komponente. Aktualisiert die Position und Ausrichtung einer WebAudio-Listener-Instanz.

Hinweis: Es sollte jeweils nur ein Listener aktiv sein.

audio-source 

Repräsentiert eine Audioquelle in der Wonderland Engine, die das Abspielen von Audiodateien ermöglicht.

cursor 

3D-Cursor für Desktop/Mobilgeräte/VR.

Implementiert einen Ray-Casting-Cursor in die Szene. Um auf Klicken/Hover/Unhover/Cursor runter/Cursor hoch/bewegen zu reagieren, verwende einen cursor-target.

Für VR wird der Strahl in Richtung von this.object.getForward() geworfen. Für Desktop und Mobilgeräte wird der Forward-Vektor invers-projiziert, um zu berücksichtigen, wo auf dem Bildschirm der Nutzer geklickt hat.

.globalTarget kann verwendet werden, um Callbacks für alle Objekte aufzurufen, auch für solche, die keinen Cursor-Target angeschlossen haben, aber zur Kollisionsgruppe passen.

.hitTestTarget kann verwendet werden, um Callbacks für WebXR-Hit-Test-Ergebnisse aufzurufen,

Siehe Animation Example.

Fügt der cursorObject-Komponente eine hitTestLocation-Komponente hinzu, die vom Cursor verwendet wird, um Ereignisse an das hitTestTarget mit HitTestResult zu senden.|

cursor-target 

Klick/Hover/Move/Buttons-Ziel für cursor.

Um Code auszulösen, wenn geklickt, gehovert, unhovered, der Cursor bewegt, die Cursortaste gedrückt oder die Cursortaste losgelassen wird, verwende .addClickFunction(f), .addHoverFunction(f), .addUnHoverFunction(f), .addMoveFunction(f), .addDownFunction(f) und .addUpFunction(f) jeweils mit einer beliebigen function f() {}.

Um Mitglieder auf einer anderen Komponente aufzurufen, kannst du einen Cursor-Target so einrichten:

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, "wurde geklickt!");
7}

Funktionen:

 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);

Anforderungen:

• Ein collision-Komponente muss am gleichen Objekt angebracht sein.

Siehe Animation Example.

debug-object 

Gibt begrenzte Debug-Informationen über das Objekt aus.

Die Informationen bestehen aus: dem Namen dieses Objekts, dem Namen eines Objektparameters, der weltlichen Translation des Objekts, der weltlichen Transformation und der lokalen Transformation.

Hauptsächlich von Engine-Entwicklern für Debug-Zwecke oder als Beispielcode verwendet.

device-orientation-look 

Ruft die Geräteausrichtung von einem Mobilgerät ab und setzt die Ausrichtung des Objekts entsprechend.

Nützlich für Magic-Window-Erfahrungen.

finger-cursor 

Ermöglicht die Interaktion mit Cursor-Zielen durch Kollision überlappungen, z.B. an der Fingerspitze einer verfolgten Hand.

Anforderungen:

• Eine Kollision-Komponente (normalerweise eine Kugel mit 0.05 Radius) am selben Objekt

fixed-foveation 

Appliziert fixed foveation, sobald eine WebXR-Sitzung gestartet wird.

Fixed Foveation reduziert die Schattierungskosten an der Peripherie, indem am Rand der Nutzeransicht in niedrigerer Auflösung gerendert wird.

hand-tracking 

Einfaches Hand-Tracking durch die WebXR-Geräte-API “Hand Input” API.

Ermöglicht die Darstellung von Händen entweder als Kugelgelenke oder skinn h fähiges Mesh.

Um auf Greifbewegungen zu reagieren, verwende this.isGrabbing(). Für andere Gesten, siehe this.joints - ein Array von Object3D und nutze die Gelenkungsindizes, die in der WebXR Hand Input-Spezifikation aufgeführt sind.

Es ist oft gewünscht, entweder Hand-Tracking oder Controller zu verwenden, nicht beides gleichzeitig. Diese Komponente bietet deactivateChildrenWithoutPose, um die Hand-Tracking-Visualisierung zu verbergen, wenn keine Pose verfügbar ist, und controllerToDeactivate, um ein anderes Objekt zu deaktivieren, sobald eine Hand-Tracking-Pose verfügbar ist. Außerhalb von XR-Sitzungen werden Tracking oder Controller weder aktiviert noch deaktiviert, um eine gute Zusammenarbeit mit der vr-mode-active-switch-Komponente zu gewährleisten.

Anforderungen:

• Um Hand-Tracking zu verwenden, aktiviere “Gelenkverfolgung” in chrome://flags auf dem Oculus Browser für Oculus Quest/Oculus Quest 2.

Siehe Hand Tracking Example.

hit-test-location 

Richtet einen WebXR-Device-API “Hit Test” ein und platziert das Objekt an der Trefferposition.

Anforderungen:

• Gib 'hit-test' in den benötigten oder optionalen Features des AR-Buttons in deiner HTML-Datei an. Siehe Wastepaperbin AR als Beispiel.

Veraltet: Verwende lieber onHitLost und onHitFound.|

image-texture 

Lädt ein Bild von einer URL herunter und wendet es als diffuseTexture oder flatTexture auf eine angeschlossene Mesh-Komponente an.

Materialien aus den folgenden Shadern werden unterstützt:

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

input-profile 

Lädt und mappt dynamisch Eingabeprofile für XR-Controller.

mouse-look 

Steuert die Kameraausrichtung durch Mausbewegung.

Effizient implementiert, um die Objektorientierung nur zu beeinflussen, wenn die Maus bewegt wird.

orbital-camera 

Die OrbitalCamera-Komponente ermöglicht es dem Benutzer, um einen Zielpunkt zu drehen, der die Position des Objekts selbst ist. Sie dreht sich in der angegebenen Entfernung.

Bemerkungen: Die Komponente funktioniert mittels Maus oder Touch. Daher funktioniert sie nicht in VR.

plane-detection 

Erzeugt Meshes und Kollisionen für XRPlanes unter Verwendung von WebXR Device API - Plane Detection.

player-height 

Setzt die Spielerhöhe für einen Y-Offset über dem Boden für ’local’ und ‘viewer’ Referenzräume.

target-framerate 

Setzt die Zielbildrate

Aktualisiert die Zielbildrate auf die nächstgelegene unterstützte Zielbildrate zur angegebenen framerate.

Die Zielbildrate wird für den VR-Compositor des Geräts als Indikator verwendet, wie oft der Bildschirm mit neuen Bildern aktualisiert werden soll. Dies bedeutet, dass die App in regelmäßigeren Abständen aufgefordert wird, Frames zu produzieren und möglicherweise weniger Zeit für Frames verwendet, die wahrscheinlich verworfen werden.

Bei Apps mit hoher Belastung kann das Festlegen einer gut passenden Zielbildrate die Rendering-Stabilität der App verbessern und Ruckler reduzieren.

Ebenso kann die Zielbildrate verwendet werden, um auf Oculus Quest 2 bei einfacheren Apps 120Hz Wiederholraten zu ermöglichen.

teleport 

Teleport VR Fortbewegung.

Siehe Teleport Example.

trail 

Dynamischer, mesh-basierter Pfad

Diese Komponente verfolgt die Weltposition des Objekts, zu dem sie hinzugefügt wurde. In festen Intervallen wird die Weltposition als Start- und Endpunkte der Pfadsegmente gespeichert.

Der Pfad verjüngt sich entlang seiner Länge. Die UV-Texturkoordinaten sind so eingerichtet, dass die U-Achse die Breite des Pfades und die V-Achse die Länge des Pfades abdeckt. Dies ermöglicht die Definition des Erscheinungsbildes des Pfades mithilfe einer Textur.

two-joint-ik-solver 

Inverse Kinematik für zwei Gelenkketten (z.B. Knie oder Ellbogen)

video-texture 

Läd ein Video von einer URL herunter und wendet es als diffuseTexture oder flatTexture auf ein gegebenes Material an.

Videotexturen müssen regelmäßig aktualisiert werden, wann immer ein neuer Frame verfügbar ist. Diese Komponente erkennt das Erreichen eines neuen Frames und aktualisiert die Textur, um den aktuellen Frame des Videos widerzuspiegeln.

Materialien aus den folgenden Shadern werden unterstützt:

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

Das Video kann über this.video erreicht werden:

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

Siehe Video Example.

vr-mode-active-switch 

Ermöglicht das Umschalten aller anderen Komponenten eines Objekts auf aktiv/inaktiv, abhängig davon, ob eine VR/AR-Sitzung aktiv ist.

Nützlich, um Controller beispielsweise zu verstecken, bis der Benutzer VR betritt.

vrm 

Komponente zum Laden und Handhaben von VRM 1.0 Modellen.

Das Posing des Modells sollte ausschließlich durch Drehen der Knochen erfolgen. Diese können über die .bones-Eigenschaft angesprochen werden und folgen der VRM-Knochenbenennung. Beachte, dass nicht alle VRM-Modelle über alle möglichen Knochen verfügen. Die Grundpose (T-Pose) wird in der .restPose-Eigenschaft erfasst. Ein Zurücksetzen eines Knochens auf seine Grundpose kann folgendermaßen erfolgen:

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

Die Bewegung des Modells durch die Welt sollte durch Bewegen des Objekts, an das diese Komponente angeschlossen ist, erfolgen. Mit anderen Worten, indem man die Wurzel des VRM-Modells bewegt. Die Knochen und alle abhängigen Objekte sollten nicht zur Bewegung des VRM-Modells verwendet werden.

Die Haupterweiterung VRMC_vrm sowie die Erweiterungen VRMC_springBone und VRMC_node_constraint werden unterstützt.

Einschränkungen:

• Keine Unterstützung für VRMC_material_mtoon
• Ausdrücke werden nicht unterstützt
• Ausdrücksbasiertes LookAt wird nicht unterstützt
• Mesh-Annotation-Modus auto wird nicht unterstützt (Erste-Person-Modus)

wasd-controls 

Grundlegende Bewegung mit W/A/S/D-Tasten.