Interfaccia 3D con React in Wonderland Engine

Con Wonderland Engine, integrare elementi UI 3D basati su React è diventato un processo semplice. Questa guida ti guiderà nell’impostare e utilizzare la @wonderlandengine/react-ui library per creare UI 3D interattive e performanti.

Installazione tramite NPM 

Esegui il seguente comando per installare la libreria nella directory principale del progetto:

npm i @wonderlandengine/react-ui

Oppure, modifica package.json e aggiungi "@wonderlandengine/react-ui": "lastest" nella sezione "dependencies", Wonderland Editor installerà automaticamente le nuove dipendenze.

Configura TypeScript 

Aggiungi il seguente codice al file tsconfig.json del tuo progetto:

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

Configura esbuild 

  1. Apri “Visualizza > Impostazioni del Progetto > Editor delle flag di esbuild”.
  2. Aggiungi --bundle alle flag.

Configura Pipelines e Materiali 

Devi impostare tre pipelines per il rendering della tua UI:

Pipeline del Testo della UI 

  1. Crea una nuova pipeline Text facendo “Click destro > Duplica” sulla pipeline Text esistente.
  2. Cambia il nome in UI Text.
  3. Configurala con le seguenti impostazioni di Profondità: depthTest e depthWrite spuntati; funzioni di profondità impostate su always.

Impostazioni della pipeline per la UI Text Pipeline

Pipeline del Colore della UI 

  1. Crea una nuova pipeline Flat duplicando quella esistente.
  2. Cambia il nome in UI Color.
  3. Configurala anche con le seguenti impostazioni di Profondità: depthTest e depthWrite spuntati; funzioni di profondità impostate su always.

Impostazioni della pipeline per la UI Color Pipeline

Pipeline del Colore Testurizzato della UI 

  1. Duplica la pipeline UI Color.
  2. Rinomina questa in UI Color Textured.
  3. Abilita la funzione TEXTURED.

Impostazioni della pipeline per la UI Color Textured Pipeline

Crea Materiali 

  1. Crea 3 nuovi materiali in Risorse > Materiali.
  2. Rinomina i materiali in UI Text, UI Color, e UI Color Textured.
  3. Imposta le pipelines di questi materiali sulle pipelines create in precedenza.

3 materiali UI nel pannello delle Risorse

Crea una UI con React 

Aggiungi un file chiamato tutorial-ui.tsx nella cartella js e inserisci il seguente codice:

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>Hello World</Text>
        </Container>
    );
}

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

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

Aggiungi la UI nella Scena 

  1. Crea un nuovo oggetto.
  2. Aggiungi il componente tutorial-ui a questo oggetto.
  3. Imposta i materiali ai materiali creati in precedenza.

Lancia nel browser utilizzando la freccia verde sopra la vista della scena.

Conclusione 

Hai configurato con successo la libreria @wonderlandengine/react-ui per creare UI 3D basate su React in Wonderland Engine.

Vedi anche 

Background Effect