Umgang mit 3D-Cursor-Klicks

Die Interaktion mit dem 3D-Cursor ist ein grundlegender Baustein, um schwebende Menüs zu erstellen, auf andere Szenen zu verlinken und einfach mit einer 3D-Umgebung zu interagieren.

Dieses Tutorial zeigt, wie man 3D-Cursor-Klicks behandelt. Wir überspringen die Einrichtung des 3D-Cursors, da dieser bereits im Projekt-Template “VR” eingerichtet ist, wenn Du ein neues Projekt erstellst.

Komponenten 

Die in diesem Setup verwendeten Komponenten sind der cursor, cursor-target und collision.

Wir werden auch eine benutzerdefinierte Komponente log-on-click hinzufügen, um das spezifische Verhalten, das wir beim Klicken des Objekts wünschen, zu definieren.

Einrichtung im Editor 

Im Editor werden zwei Komponenten an das Objekt angehängt, das anklickbar sein soll: collision und cursor-target.

collision gibt den Bereich an, der anklickbar sein soll. Sobald hinzugefügt, siehst Du eine grüne Umrisslinie, die die Form angibt, die angeklickt werden kann. Du kannst die Kollisionsform der Komponente ändern, damit sie Deinem Objekt am nächsten kommt. (Dreiecksnetze werden derzeit nicht unterstützt.)

cursor-target ermöglicht das Hinzufügen von JavaScript-Code für verschiedene Cursor-Ereignisse.

Benutzerdefiniertes Verhalten 

Während diese Komponenten es erlauben, benutzerdefiniertes Verhalten einzurichten, ändern sie nur das visuelle Verhalten des Cursors: Das Cursor-Objekt erscheint jetzt, wenn auf das anklickbare Objekt gezeigt wird.

Um Verhalten beim Klicken hinzuzufügen, fügen wir eine benutzerdefinierte JavaScript-Komponente hinzu:

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

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

    static Properties = {
        message: Property.string("Es wurde geklickt!"),
    };

    start() {
        /* Referenz auf die "cursor-target"-Komponente erhalten */
        const target = this.object.getComponent('cursor-target');

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

    onClick() {
        /* Die im Editor konfigurierte Nachricht ausgeben */
        console.log(this.message);
    }
}

Sobald diese Komponente hinzugefügt wurde, kannst Du das Projekt im Browser ausführen und wenn das Objekt angeklickt wird, sollte eine Nachricht in der Browser-Konsole erscheinen.