Componenti JavaScript

8thwall-camera 

Componente della 8thwall camera.

Deprecato: Usa i componenti in https://github.com/WonderlandEngine/wonderland-ar-tracking invece.

anchor 

Imposta la posizione dell’oggetto sulla posizione di un XRAnchor.

Crea ancoraggi utilizzando la funzione statica Anchor.create().

Esempio per l’uso con il cursore:

1cursorTarget.onClick.add((object, cursor, originalEvent) => {
2    /* Solo eventi in XR avranno un frame allegato */
3    if(!originalEvent.frame) return;
4    Anchor.create(anchorObject, {uuid: id, persist: true}, originalEvent.frame);
5});

audio-listener 

Rappresenta un componente audio listener di Wonderland. Aggiorna la posizione e l’orientamento di un’istanza di ascoltatore WebAudio.

Nota: Solo un ascoltatore dovrebbe essere attivo alla volta.

audio-source 

Rappresenta una sorgente audio nel Wonderland Engine, permettendo la riproduzione di file audio.

cursor 

Cursore 3D per desktop/mobile/VR.

Implementa un cursore ray-casting nella scena. Per reagire a clic/superamento/passerella/pulsanti giù/su/muovere usa un cursor-target.

Per il VR, il raggio è orientato nella direzione di this.object.getForward(). Per desktop e mobile, il vettore forward è proiettato inversamente per tener conto di dove l’utente ha cliccato sullo schermo.

.globalTarget può essere utilizzato per chiamare callback per tutti gli oggetti, anche quelli che non hanno un target del cursore allegato, ma che corrispondono al gruppo di collisione.

.hitTestTarget può essere usato per chiamare callback dei risultati di hit test WebXR,

Vedi Esempio di Animazione.

Attribuisce un componente hit-test-location al cursorObject, che verrà utilizzato dal cursore per inviare eventi al hitTestTarget con HitTestResult.|

cursor-target 

Bersaglio per click/hover/move/button per cursor.

Per attivare il codice quando clicchi, passi sopra, scendi, muovi il cursore, premi o rilasci il pulsante del cursore, utilizza .addClickFunction(f), .addHoverFunction(f), .addUnHoverFunction(f), .addMoveFunction(f), .addDownFunction(f) e .addUpFunction(f) rispettivamente con qualsiasi function f() {}.

Per chiamare membri su un diverso componente, puoi impostare un target del cursore nel seguente modo:

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, "è stato cliccato!");
7}

Funzioni:

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

Requisiti:

• un componente collision da essere allegato allo stesso oggetto.

Vedi Esempio di Animazione.

debug-object 

Stampa alcune informazioni di debug limitate sull’oggetto.

Le informazioni consistono in: il nome dell’oggetto, il nome di un parametro dell’oggetto, la traduzione mondiale dell’oggetto, la trasformazione globale e la trasformazione locale.

Utilizzato principalmente dagli sviluppatori del motore per scopi di debug o come esempio di codice.

device-orientation-look 

Recupera l’orientamento del dispositivo da un dispositivo mobile e imposta di conseguenza l’orientamento dell’oggetto.

Utile per esperienze a finestra magica.

finger-cursor 

Abilita l’interazione con i target del cursore tramite sovrapposizioni di collisione, ad esempio sulla punta di un dito su una mano tracciata.

Requisiti:

• Un componente di collisione (solitamente una sfera con raggio 0.05) sullo stesso oggetto

fixed-foveation 

Applica la foveazione fissa una volta avviata una sessione WebXR.

La foveazione fissa riduce i costi di shading alla periferia rendendo a risoluzioni più basse ai bordi della visione degli utenti.

hand-tracking 

Tracciamento delle mani facile tramite l’API WebXR Device “Hand Input” API.

Permette di visualizzare le mani sia come giunti a sfera che come mesh skinnate.

Per reagire alla presa, usa this.isGrabbing(). Per altri gesti, consulta this.joints - un array di Object3D e usa gli indici dei giunti elencati nella specifica WebXR Hand Input.

Spesso si preferisce usare o il tracciamento delle mani o i controlli, non entrambi. Questo componente offre deactivateChildrenWithoutPose per nascondere la visualizzazione del tracciamento delle mani se non è disponibile una posa e controllerToDeactivate per disabilitare un altro oggetto una volta che è disponibile una posa di tracciamento delle mani. Fuori dalle sessioni XR, il tracciamento o i controlli non sono né abilitati né disabilitati per giocare bene con il componente vr-mode-active-switch.

Requisiti:

• Per utilizzare il tracciamento delle mani, abilita il “tracciamento delle articolazioni” in chrome://flags su Oculus Browser per Oculus Quest/Oculus Quest 2.

Vedi Esempio di Tracciamento delle Mani.

hit-test-location 

Imposta un Hit Test della WebXR Device API e posiziona l’oggetto nella posizione dell’hit.

Requisiti:

• Specificare 'hit-test' nelle funzionalità richieste o opzionali sul pulsante AR nel tuo file HTML. Vedi Wastepaperbin AR come esempio.

Deprecato: Usa onHitLost e onHitFound invece.|

image-texture 

Scarica un’immagine dall’URL e la applica come diffuseTexture o flatTexture a un componente mesh allegato.

I materiali dei seguenti shader sono supportati:

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

input-profile 

Carica e mappa dinamicamente i profili di input per i controlli XR.

mouse-look 

Controlla l’orientamento della fotocamera tramite il movimento del mouse.

Implementato in modo efficiente per modificare l’orientamento dell’oggetto solo quando il mouse si muove.

orbital-camera 

Il componente OrbitalCamera permette all’utente di orbitare attorno a un punto di riferimento, che è la posizione dell’oggetto stesso. Ruota alla distanza specificata.

Osservazioni: Il componente funziona utilizzando il mouse o il tocco. Pertanto non funziona in VR.

plane-detection 

Genera mesh e collisioni per XRPlanes usando WebXR Device API - Plane Detection.

player-height 

Imposta l’altezza del giocatore per uno spostamento Y sopra il suolo per spazi di riferimento ’locali’ e ‘viewer’.

target-framerate 

Imposta il framerate target

Aggiorna il framerate target al framerate target supportato più vicino al framerate specificato.

Il framerate target viene utilizzato per il compositor VR del dispositivo come indicazione della frequenza con la quale aggiornare lo schermo con nuove immagini. Ciò significa che l’app verrà chiesta di produrre frame a intervalli più regolari, potenzialmente riducendo il tempo per i frame che potrebbero essere scartati.

Per le applicazioni con un carico pesante, impostare un framerate target ben corrispondente può migliorare la stabilità del rendering dell’app e ridurre il tremolio.

Allo stesso modo, il framerate target può essere utilizzato per abilitare frequenze di aggiornamento a 120Hz su Oculus Quest 2 per applicazioni più semplici.

teleport 

Teletrasporto per la locomozione VR.

Vedi Esempio di Teletrasporto.

trail 

Scia dinamica basata su mesh

Questo componente tiene traccia della posizione globale dell’oggetto a cui è stato aggiunto. A intervalli regolari, la posizione globale viene memorizzata come punti iniziali e finali dei segmenti della scia.

La scia si assottiglia lungo la sua lunghezza. Le coordinate della texture UV sono impostate in modo tale che l’asse U copra la larghezza della scia e l’asse V copra la lunghezza della scia. Ciò consente di definire l’aspetto della scia utilizzando una texture.

two-joint-ik-solver 

Inverse kinematics per catene a due giunti (ad esempio, ginocchia o gomiti)

video-texture 

Scarica un video dall’URL e lo applica come diffuseTexture o flatTexture sul materiale specificato.

Le texture video devono essere aggiornate regolarmente ogni volta che è disponibile un nuovo frame. Questo componente gestisce il rilevamento di un nuovo frame e aggiorna la texture per riflettere il frame attuale del video.

I materiali dai seguenti shader sono supportati:

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

Il video può essere accesso tramite this.video:

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

Vedi Esempio di Video.

vr-mode-active-switch 

Permette di attivare/disattivare tutti gli altri componenti su un oggetto a seconda che una sessione VR/AR sia attiva.

Utile per nascondere i controller finché l’utente non entra in VR, per esempio.

vrm 

Componente per caricare e gestire modelli VRM 1.0.

La posa del modello deve essere esclusivamente fatta ruotando le ossa. Queste possono essere accedute usando la proprietà .bones e seguono la denominazione degli ossi VRM. Nota che non tutti i modelli VRM avranno tutte le ossa possibili. La posa di riposo (T-pose) è catturata nella proprietà .restPose. Resettare un osso alla sua posa di riposo può essere fatto come segue:

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

Muovere il modello nel mondo dovrebbe essere fatto muovendo l’oggetto a cui è attaccato questo componente. In altre parole, muovendo la radice del modello VRM. Le ossa e qualsiasi oggetto discendente non dovrebbero essere usati per muovere il modello VRM.

L’estensione core VRMC_vrm così come le estensioni VRMC_springBone e VRMC_node_constraint sono supportate.

Limitazioni:

• Nessun supporto per VRMC_material_mtoon
• Le espressioni non sono supportate
• Il lookAt basato sulle espressioni non è supportato
• La modalità di annotazione della mesh auto non è supportata (modalità prima persona)

wasd-controls 

Movimento base con i tasti W/A/S/D.