3D UI с React в Wonderland Engine

С Wonderland Engine интеграция 3D UI элементов на базе React становится простым процессом. Это руководство проведет вас через настройку и использование библиотеки @wonderlandengine/react-ui для создания интерактивных и производительных 3D UI.

Установка через NPM 

Выполните следующую команду, чтобы установить библиотеку в корневом каталоге проекта:

npm i @wonderlandengine/react-ui

Или отредактируйте package.json и добавьте "@wonderlandengine/react-ui": "lastest" в раздел "dependencies". Wonderland Editor автоматически установит новые зависимости.

Настройка TypeScript 

Добавьте следующее в файл tsconfig.json вашего проекта:

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

Настройка esbuild 

  1. Откройте “Views > Project Settings > esbuildFlagsEditor”.
  2. Добавьте --bundle к флагам.

Настройка конвейеров и материалов 

Вам необходимо настроить три конвейера для рендера вашего UI:

Конвейер текста UI 

  1. Создайте новый конвейер Text через “Right-Click > Duplicate” на существующем текстовом конвейере.
  2. Измените его имя на UI Text.
  3. Настройте его с следующими параметрами глубины: depthTest и depthWrite включены; функция глубины установлена на always.

Настройки конвейера для UI Text Pipeline

Конвейер для цвета UI 

  1. Создайте новый конвейер Flat, дублируя существующий.
  2. Измените имя на UI Color.
  3. Настройте его с теми же параметрами глубины: depthTest и depthWrite включены; функция глубины установлена на always.

Настройки конвейера для UI Color Pipeline

Конвейер текстурированного цвета UI 

  1. Продублируйте конвейер UI Color.
  2. Переименуйте его в UI Color Textured.
  3. Включите функцию TEXTURED.

Настройки конвейера для UI Color Textured Pipeline

Создание материалов 

  1. Создайте 3 новых материала в Resources > Materials.
  2. Переименуйте материалы в UI Text, UI Color и UI Color Textured.
  3. Назначьте конвейеры этих материалов созданным ранее конвейерам.

3 UI материала в панели ресурсов

Создание UI React 

Добавьте файл с именем tutorial-ui.tsx в папку js и вставьте следующий код:

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

Добавление UI в сцену 

  1. Создайте новый объект.
  2. Добавьте компонент tutorial-ui к этому объекту.
  3. Установите материалы созданные выше.

Запустите в браузере, используя зеленую стрелку над представлением сцены.

Заключение 

Вы успешно настроили фреймворк @wonderlandengine/react-ui для создания 3D UI на базе React в Wonderland Engine.

См. также 

Background Effect