3D UI with React in Wonderland Engine

With Wonderland Engine, integrating React-based 3D UI elements has become a straightforward process. This guide will walk you through setting up and using the @wonderlandengine/react-ui library to create interactive and performant 3D UIs.

Install via NPM 

Run the following command to install the library in the project root directory:

npm i @wonderlandengine/react-ui

Or, edit package.json and add "@wonderlandengine/react-ui": "lastest" in the "dependencies" section, Wonderland Editor will automatically install new dependencies.

Configure TypeScript 

Add the following to your project’s tsconfig.json file:

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

Configure esbuild 

  1. Open “Views > Project Settings > esbuildFlagsEditor”.
  2. Add --bundle to the flags.

Configure Pipelines and Materials 

You need to set up three pipelines for rendering your UI:

UI Text Pipeline 

  1. Create a new Text pipeline by “Right-Click > Duplicate” on the existing Text pipeline.
  2. Change its name to UI Text.
  3. Configure it with the following Depth settings: depthTest and depthWrite checked; depthFunction set to always.

Pipeline settings for the UI Text Pipeline

UI Color Pipeline 

  1. Create a new Flat pipeline by duplicating the existing one.
  2. Change the name to UI Color.
  3. Also configure it with the following Depth settings: depthTest and depthWrite checked; depthFunction set to always.

Pipeline settings for the UI Color Pipeline

UI Color Textured Pipeline 

  1. Duplicate the UI Color pipeline.
  2. Rename this to UI Color Textured.
  3. Enable the TEXTURED feature.

Pipeline settings for the UI Color Textured Pipeline

Create Materials 

  1. Create 3 new materials in Resources > Materials.
  2. Rename the materials to UI Text, UI Color, and UI Color Textured.
  3. Set the pipelines of these materials to the pipelines created earlier.

3 UI materials in the Resource panel

Create a React UI 

Add a file named tutorial-ui.tsx to the js folder and add the following code:

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

Add the UI into the Scene 

  1. Create a new object.
  2. Add the tutorial-ui component to this object.
  3. Set the materials to the materials created above.

Launch into the browser using the green arrow above the scene view.

Conclusion 

You have successfully set up the @wonderlandengine/react-ui framework to create React-based 3D UI in Wonderland Engine.

See Also 

Background Effect