Wonderland EngineでReactを使用した3D UI

Wonderland Engineでは、Reactをベースにした3D UI要素の統合が簡単になりました。このガイドでは、インタラクティブでパフォーマンスの高い3D UIを作成するための@wonderlandengine/react-uiライブラリの設定と使用方法をご紹介します。

NPMでのインストール 

プロジェクトのルートディレクトリで次のコマンドを実行してライブラリをインストールします：

npm i @wonderlandengine/react-ui

または、package.jsonを編集して"dependencies"セクションに"@wonderlandengine/react-ui": "latest"を追加します。Wonderland Editorは新しい依存関係を自動的にインストールします。

TypeScriptの設定 

プロジェクトのtsconfig.jsonファイルに次の記述を追加します：

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

esbuildの設定 

  1. 「Views > Project Settings > esbuildFlagsEditor」を開きます。
  2. フラグに --bundle を追加します。

パイプラインとマテリアルの設定 

UIをレンダリングするために3つのパイプラインを設定する必要があります：

UIテキストパイプライン 

  1. 既存のTextパイプラインを「右クリック > Duplicate」で複製して、新しいTextパイプラインを作成します。
  2. 名前をUI Textに変更します。
  3. 次のDepth設定を行います：depthTestとdepthWriteをチェックし、depthFunctionをalwaysに設定します。

UIテキストパイプラインの設定

UIカラーパイプライン 

  1. 既存のFlatパイプラインを複製して新しいものを作成します。
  2. 名前をUI Colorに変更します。
  3. 同様に次のDepth設定を行います：depthTestとdepthWriteをチェックし、depthFunctionをalwaysに設定します。

UIカラーパイプラインの設定

UIカラーテクスチャパイプライン 

  1. UI Colorパイプラインを複製します。
  2. 名前をUI Color Texturedに変更します。
  3. TEXTURED機能を有効にします。

UIカラーテクスチャパイプラインの設定

マテリアルの作成 

  1. Resources > Materialsで新しいマテリアルを3つ作成します。
  2. それらの名前をUI Text、UI Color、UI Color Texturedに変更します。
  3. これらのマテリアルのパイプラインを先に作成したパイプラインに設定します。

3つのUIマテリアルがResourceパネルに表示

React UIの作成 

jsフォルダにtutorial-ui.tsxという名前のファイルを追加し、次のコードを追加します：

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. マテリアルを上記で作成したマテリアルに設定します。

シーンビュー上の緑色の矢印を使ってブラウザで起動します。

結論 

これで、Wonderland EngineでReactを基にした3D UIを作成するための@wonderlandengine/react-uiフレームワークのセットアップが完了しました。

関連情報 

Background Effect