Manejo de Clics del Cursor 3D

Interactuar con el cursor 3D es un pilar fundamental para construir menús flotantes, vincular a otras escenas y, en general, interactuar de manera sencilla con un entorno 3D.

Este tutorial muestra cómo manejar los clics del cursor 3D. Omitiremos la configuración del cursor 3D, ya que eso ya está configurado para ti en la plantilla de proyecto “VR” cuando creas un nuevo proyecto.

Componentes 

Los componentes utilizados en esta configuración son el cursor, cursor-target y collision.

También añadiremos un componente personalizado log-on-click para el comportamiento específico que queremos cuando se haga clic en el objeto.

Configuración en el Editor 

En el editor, adjunta dos componentes al objeto que deseas hacer clicable: collision y cursor-target.

collision especifica el área que debe ser clicable. Una vez añadido, verás un contorno verde que indica la forma que se puede clicar. Puedes cambiar la forma de colisión del componente para que coincida lo más posible con tu objeto. (Actualmente, las mallas de triángulos no están soportadas).

cursor-target permite agregar código JavaScript para varios eventos del cursor.

Comportamiento Personalizado 

Aunque estos componentes nos permiten configurar un comportamiento personalizado, por sí solos solo cambian el comportamiento visual del cursor: el objeto del cursor aparecerá ahora cuando se apunte al objeto clicable.

Para añadir comportamiento al hacer clic, añadimos un componente JavaScript personalizado:

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

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

    static Properties = {
        message: Property.string("¡Se hizo clic!"),
    };

    start() {
        /* Obtén una referencia al componente "cursor-target" */
        const target = this.object.getComponent('cursor-target');

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

    onClick() {
        /* Imprime el mensaje que se configuró en el editor */
        console.log(this.message);
    }
}

Una vez que ese componente se añade, puedes ejecutar el proyecto en el navegador y cuando se haga clic en el objeto, debería aparecer un mensaje en la Consola del Navegador.