3D-UI mit React in Wonderland Engine

Mit der Wonderland Engine ist die Integration von React-basierten 3D-UI-Elementen zu einem einfachen Prozess geworden. Diese Anleitung führt Dich durch die Einrichtung und Nutzung der @wonderlandengine/react-ui Bibliothek, um interaktive und performante 3D-UIs zu erstellen.

Installation über NPM 

Führe den folgenden Befehl aus, um die Bibliothek im Hauptverzeichnis des Projekts zu installieren:

npm i @wonderlandengine/react-ui

Oder bearbeite die package.json und füge "@wonderlandengine/react-ui": "latest" im Abschnitt "dependencies" hinzu. Der Wonderland Editor installiert automatisch neue Abhängigkeiten.

TypeScript konfigurieren 

Füge das Folgende in die tsconfig.json Deines Projekts ein:

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

Konfiguriere esbuild 

  1. Öffne “Ansichten > Projekteinstellungen > esbuildFlagsEditor”.
  2. Füge --bundle zu den Flags hinzu.

Pipelines und Materialien konfigurieren 

Du musst drei Pipelines für das Rendern Deines UIs einrichten:

UI-Text-Pipeline 

  1. Erstelle eine neue Text-Pipeline, indem Du “Rechtsklick > Duplizieren” auf die bestehende Text-Pipeline ausführst.
  2. Benenne sie um in UI Text.
  3. Konfiguriere sie mit folgenden Tiefeneinstellungen: depthTest und depthWrite aktivieren; depthFunction auf always setzen.

Pipeline-Einstellungen für die UI-Text-Pipeline

UI-Color-Pipeline 

  1. Erstelle eine neue Flat-Pipeline, indem Du die bestehende duplizierst.
  2. Benenne sie um in UI Color.
  3. Konfiguriere sie ebenfalls mit den folgenden Tiefeneinstellungen: depthTest und depthWrite aktivieren; depthFunction auf always setzen.

Pipeline-Einstellungen für die UI-Color-Pipeline

UI-Color-Textured-Pipeline 

  1. Dupliziere die UI Color-Pipeline.
  2. Benenne diese um in UI Color Textured.
  3. Aktiviere das TEXTURED-Feature.

Pipeline-Einstellungen für die UI-Color-Textured-Pipeline

Materialien erstellen 

  1. Erstelle 3 neue Materialien unter Ressourcen > Materialien.
  2. Benenne die Materialien um in UI Text, UI Color und UI Color Textured.
  3. Weise den Materialien die zuvor erstellten Pipelines zu.

3 UI-Materialien im Ressourcen-Panel

Erstelle ein React-UI 

Füge eine Datei namens tutorial-ui.tsx zum Ordner js hinzu und trage den folgenden Code ein:

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} />;
    }
}

Füge das UI in die Szene ein 

  1. Erstelle ein neues Objekt.
  2. Füge dem Objekt die tutorial-ui Komponente hinzu.
  3. Setze die Materialien auf die oben erstellten Materialien.

Starte den Browser mit dem grünen Pfeil über der Szenenansicht.

Fazit 

Du hast erfolgreich das @wonderlandengine/react-ui Framework eingerichtet, um React-basierte 3D-UIs in der Wonderland Engine zu erstellen.

Siehe auch 

Background Effect