Interfaz 3D con React en Wonderland Engine

Con Wonderland Engine, integrar elementos de interfaz de usuario 3D basados en React se ha convertido en un proceso sencillo. Esta guía te llevará a través de la configuración y uso de la biblioteca @wonderlandengine/react-ui para crear interfaces 3D interactivas y de alto rendimiento.

Instalar vía NPM 

Ejecuta el siguiente comando para instalar la biblioteca en el directorio raíz del proyecto:

npm i @wonderlandengine/react-ui

O, edita package.json y añade "@wonderlandengine/react-ui": "lastest" en la sección "dependencies", el Editor de Wonderland instalará automáticamente las nuevas dependencias.

Configurar TypeScript 

Añade lo siguiente al archivo tsconfig.json de tu proyecto:

{
  "compilerOptions": {
    "jsx": "react"
  }
}

Configurar esbuild 

  1. Abre “Vistas > Configuraciones del Proyecto > esbuildFlagsEditor”.
  2. Añade --bundle a los flags.

Configurar Líneas de Proceso y Materiales 

Necesitas configurar tres líneas de proceso para renderizar tu interfaz:

Línea de Proceso de Texto de UI 

  1. Crea una nueva línea de proceso Text haciendo “Clic derecho > Duplicar” en la línea de proceso de Texto existente.
  2. Cambia su nombre a UI Text.
  3. Configúrala con las siguientes configuraciones de Profundidad: depthTest y depthWrite marcadas; función de profundidad configurada en always.

Configuraciones de la línea de proceso para UI Text

Línea de Proceso de Color de UI 

  1. Crea una nueva línea de proceso Flat duplicando la existente.
  2. Cambia su nombre a UI Color.
  3. Configúrala también con las siguientes configuraciones de Profundidad: depthTest y depthWrite marcadas; función de profundidad configurada en always.

Configuraciones de la línea de proceso para UI Color

Línea de Proceso de Color Texturizado de UI 

  1. Duplica la línea de proceso UI Color.
  2. Renombra esto a UI Color Textured.
  3. Activa la característica TEXTURED.

Configuraciones de la línea de proceso para UI Color Textured

Crear Materiales 

  1. Crea 3 nuevos materiales en Recursos > Materiales.
  2. Renombra los materiales a UI Text, UI Color y UI Color Textured.
  3. Asigna las líneas de proceso de estos materiales a las creadas anteriormente.

3 materiales de UI en el panel de Recursos

Crear una Interfaz React 

Añade un archivo llamado tutorial-ui.tsx a la carpeta js y añade el siguiente código:

import {ReactUiBase} from '@wonderlandengine/react-ui';
import {Container, Text} from '@wonderlandengine/react-ui/components';
import React, {ReactNode} from 'react';

const App = (props: {comp: TutorialUI}) => {
    const comp = props.comp;

    return (
        <Container>
            <Text>Hola Mundo</Text>
        </Container>
    );
}

export class TutorialUI extends ReactUiBase {
    static TypeName = 'tutorial-ui';
    static InheritProperties = true;

    render(): ReactNode {
        return <App comp={this} />;
    }
}

Añadir la Interfaz a la Escena 

  1. Crea un nuevo objeto.
  2. Añade el componente tutorial-ui a este objeto.
  3. Asigna los materiales a los materiales creados anteriormente.

Lanza en el navegador usando la flecha verde encima de la vista de la escena.

Conclusión 

Has configurado exitosamente el marco @wonderlandengine/react-ui para crear una interfaz 3D basada en React en Wonderland Engine.

Ver También 

Background Effect