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:

1npm 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:

1{
2  "compilerOptions": {
3    "jsx": "react"
4  }
5}

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.

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.

UI Color Textured Pipeline 

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

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.

Create a React UI 

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

 1import {ReactUiBase} from '@wonderlandengine/react-ui';
 2import {Container, Text} from '@wonderlandengine/react-ui/components';
 3import React, {ReactNode} from 'react';
 4
 5const App = (props: {comp: TutorialUI}) => {
 6    const comp = props.comp;
 7
 8    return (
 9        <Container>
10            <Text>Hello World</Text>
11        </Container>
12    );
13}
14
15export class TutorialUI extends ReactUiBase {
16    static TypeName = 'tutorial-ui';
17    static InheritProperties = true;
18
19    render(): ReactNode {
20        return <App comp={this} />;
21    }
22}

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 

• React UI on GitHub
• Overview of available components
• Live Demo