Gestione dei Click del Cursore 3D

Interagire con il cursore 3D è un elemento fondamentale per creare menu flottanti, collegamenti ad altre scene e, in generale, per interagire in modo semplice con un ambiente 3D.

Questo tutorial mostra come gestire i click del cursore 3D. Evitiamo di impostare il cursore 3D, poiché è già configurato nel modello di progetto “VR” quando crei un nuovo progetto.

Componenti 

I componenti utilizzati in questa configurazione sono cursor, cursor-target e collision.

Aggiungeremo anche un componente personalizzato log-on-click per il comportamento specifico che desideriamo quando l’oggetto viene cliccato.

Configurazione nell’Editor 

Nell’editor, collega due componenti all’oggetto che desideri rendere cliccabile: collision e cursor-target.

collision specifica l’area che dovrebbe essere cliccabile. Una volta aggiunto, vedrai un contorno verde che indica la forma su cui si può cliccare. Puoi cambiare la forma di collisione del componente per adattarlo più precisamente al tuo oggetto. (Le mesh a triangoli non sono attualmente supportate.)

cursor-target consente di aggiungere codice JavaScript per vari eventi del cursore.

Comportamento Personalizzato 

Sebbene questi componenti ci permettano di configurare un comportamento personalizzato, da soli cambiano solo il comportamento visivo del cursore: l’oggetto cursore apparirà quando si punta sull’oggetto cliccabile.

Per aggiungere un comportamento al clic, aggiungiamo un componente JavaScript personalizzato:

import {Component, Property} from '@wonderlandengine/api';

extends class LogOnClick extends Component {
    static TypeName = 'log-on-click';

    static Properties = {
        message: Property.string("È stato cliccato!"),
    };

    start() {
        /* Ottieni un riferimento al componente "cursor-target" */
        const target = this.object.getComponent('cursor-target');

        target.addClickFunction(this.onClick.bind(this));
    }

    onClick() {
        /* Stampa il messaggio configurato nell'editor */
        console.log(this.message);
    }
}

Una volta aggiunto quel componente, puoi eseguire il progetto nel browser e, quando l’oggetto viene cliccato, un messaggio dovrebbe apparire nella Console del Browser.