Three.js、React、WebGLでゲームを構築します

コアポイント

• ゲーム開発で3Dシーンを駆動するためにReactを使用して、ゲームロジックからのシーンレンダリングの明確な分離、理解しやすいコンポーネント、ゲームリソースのリアルタイムのリロード、ネイティブブラウザーツールを使用する機能など、多くの利点があります。 3Dシーンは、マーカーとしてチェックしてデバッグします。
• React-Three-Renderer（R3R）は、Three.jsをカプセル化する宣言APIを提供し、ゲームロジックからビューコードを切り離し、小さくて理解しやすいコンポーネントを作成します。
• ゲームエンジンが成長するにつれて、還元モードを使用してゲームロジックを個別の関数に整理することが重要です。このモードにより、クリーンでクリアなゲームループを作成し、ゲームループにロジックを簡単に追加できます。
• 排水とパフォーマンスの考慮事項は、Three.js、React、WebGLを使用したゲームの構築においてユニークです。 Chrome Devtoolsのタイムライン機能を使用することは、パフォーマンスをデバッグするために非常に貴重であり、Reactの再レンダーの数を最小限に抑えるなどの戦略を実装することで、パフォーマンスを最適化するのに役立ちます。

「Chameleon Charm」と呼ばれるゲームを作成しています。 Three.js、React、およびWebGLを使用して構築されています。この記事では、これらのテクノロジーがReact-3reレンダラー（R3Rと略された）を使用してどのように連携するかについて説明します。

webgl Getting Geter GuideとReactとJSX Gets Gets Gets SitePointのガイドをチェックして、ReactとWebGLの紹介をご覧ください。この記事と添付のコードは、ES6構文を使用します。

すべての始まり

しばらく前、ピート・ハントは#ReactJS IRCチャンネルで冗談を言って、彼がReactを使用してゲームを作成すると言っています：

私たちはReactで一人称シューティングゲームを作ることができるに違いありません！敵は

を持っています

など。私は微笑んだ。彼も笑った。誰もが素晴らしい時間を過ごしました。 「世界の誰がこれをするだろうか？」

数年後、私はまさにこれをしました。

Chameleon Charmは、無限のフラクタル迷路を解決するために絞り込むことができる拡張された小道具を収集するゲームです。私は数年間React開発者として働いてきましたが、Reactを使用してThree.jsを駆動する方法があるかどうか知りたいです。この時点で、R3Rは私の注意を引きました。

なぜ反応を選ぶのですか？

私はあなたが何を考えているのか知っています：なぜですか？説明させてください。 Reactを使用して3Dシーンを駆動することを検討する理由は次のとおりです。

• 「宣言的」ビューでは、ゲームロジックからレンダリングを明確に分離できます。
• <player></player>、<wall></wall>、<level></level>などの簡単なコンポーネントを設計します。
• 「ホット」（リアルタイム）ゲームリソースのリロード。テクスチャとモデルを変更し、シーンでリアルタイムで更新を確認してください！
• Chrome Inspectorなどのネイティブブラウザーツールを使用したタグとして3Dシーンをチェックおよびデバッグします。
• Webパックを使用して依存関係グラフでゲームリソースを管理します <texture require="" src="%7B"></texture>
シナリオを設定して、これがすべて機能する方法を確認しましょう。

Reactとwebgl

この記事で動作するサンプルGithubリポジトリを作成しました。リポジトリをクローンし、READMEのようにコードを実行し、学習を続けます。メインキャラクターとしてSitePointy 3Dロボットを備えています！

警告：R3Rはまだテスト段階にあります。そのAPIは不安定であり、将来変化する可能性があります。現在、Three.jsのサブセットのみを処理しています。完全なゲームを構築するのに十分なほど完了しましたが、結果は異なる場合があります。

編成コードを表示

Reactを使用してWebGLを駆動する主な利点は、ビューコードがゲームロジックから切り離されていることです。これは、私たちがレンダリングするエンティティが小さく、理解しやすいコンポーネントであることを意味します。

R3Rは、3つのjsをカプセル化する宣言APIを公開します。たとえば、次のように書くことができます

今、カメラ付きの空の3Dシーンがあります。シーンにメッシュを追加することは、A コンポーネントを含めることと

のコンポーネントを提供するのと同じくらい簡単です。

<code><scene>></scene>
  <perspectivecamera>    position={ new THREE.Vector3( 1, 1, 1 )
  />
>
</perspectivecamera></code>

<mesh></mesh>舞台裏では、3.sceneを作成し、3.boxgeometryのグリッドを自動的に追加します。 R3Rは、古いシーンと変更の違いを処理します。シーンに新しいメッシュを追加すると、元のメッシュが再現されません。通常のReactとDOMを使用するのと同じように、3Dシーンは違いを更新します。 <geometry></geometry> <material></material>私たちはReactで作業しているため、ゲームエンティティをコンポーネントファイルに取り外すことができます。サンプルリポジトリのrobot.jsファイルは、純粋な反応ビューコードを使用して主要な役割を表す方法を示しています。これは「ステートレス関数」コンポーネントです。つまり、地元の状態を節約しないことを意味します。

<code><scene>></scene>
  …
  <mesh>></mesh>
    <boxgeometry></boxgeometry>      width={ 1 }
      height={ 1 }
      depth={ 1 }
    />
    <meshbasicmaterial></meshbasicmaterial>      color={ 0x00ff00 }
    />
>
</code>

3Dシーンに

を含めます！

R3R GitHubリポジトリでより多くのAPI例を表示するか、付属プロジェクトの完全なサンプル設定を表示できます。

<code>const Robot = ({ position, rotation }) => <group></group>  position={ position }
  rotation={ rotation }
>
  <mesh> rotation={ localRotation }></mesh>
    <geometryresource></geometryresource>      resourceId="robotGeometry"
    />
    <materialresource></materialresource>      resourceId="robotTexture"
    />
  >
>;
</code>

ゲームロジックの整理

<robot></robot>方程式の残りの半分は、ゲームロジックを処理することです。ロボットのSitePointyにいくつかの簡単なアニメーションを追加しましょう。

<code><scene>></scene>
  …
  <mesh>></mesh>…>
  <robot></robot>    position={…}
    rotation={…}
  />
>
</code>

従来のゲームループはどのように機能しますか？彼らはユーザーの入力を受け入れ、古い「世界状態」を分析し、レンダリングのために新世界の状態に戻ります。便宜上、コンポーネント状態に「ゲーム状態」オブジェクトを保存しましょう。より成熟したプロジェクトでは、ゲーム状態をReduxまたはFluxストレージに移動できます。

ブラウザのrequestAnimationFrameAPIコールバックを使用して、ゲームループを駆動し、ループをGameContainer.jsで実行します。ロボットをアニメーションするには、requestAnimationFrameに渡されたタイムスタンプに基づいて新しい場所を計算し、州に新しい場所を保存しましょう。

<code><scene>></scene>
  <perspectivecamera>    position={ new THREE.Vector3( 1, 1, 1 )
  />
>
</perspectivecamera></code>

呼び出しsetState()は、子コンポーネントの再レンダーをトリガーし、3Dシーンを更新します。コンテナコンポーネントからデモコンポーネントに状態を渡します：<game></game>

<code><scene>></scene>
  …
  <mesh>></mesh>
    <boxgeometry></boxgeometry>      width={ 1 }
      height={ 1 }
      depth={ 1 }
    />
    <meshbasicmaterial></meshbasicmaterial>      color={ 0x00ff00 }
    />
>
</code>

このコードを整理するのに役立つ便利なパターンを適用できます。ロボットの場所を更新することは、単純な時間ベースの計算です。将来的には、以前のゲーム状態からの以前のロボットの場所を考慮することもできます。一部のデータを受け入れ、それを処理し、新しいデータを返す関数は、多くの場合、減速機と呼ばれます。移動コードを削減機能に抽象化できます！

機能呼び出しのみを含む簡潔でクリアなゲームループを書くことができます：

物理学の取り扱いなど、ゲームループにロジックを追加するには、別の還元剤関数を作成し、以前の削減の結果に渡す：

<code>const Robot = ({ position, rotation }) => <group></group>  position={ position }
  rotation={ rotation }
>
  <mesh> rotation={ localRotation }></mesh>
    <geometryresource></geometryresource>      resourceId="robotGeometry"
    />
    <materialresource></materialresource>      resourceId="robotTexture"
    />
  >
>;
</code>

ゲームエンジンの成長として、ゲームロジックを個別の関数に整理することが重要になります。還元モードを使用して、この組織は非常に簡単です。

<code><scene>></scene>
  …
  <mesh>></mesh>…>
  <robot></robot>    position={…}
    rotation={…}
  />
>
</code>

リソース管理

これはまだR3Rの開発分野です。テクスチャの場合、JSXタグにURLプロパティを指定できます。 webpackを使用して、ローカル画像パスを尋ねることができます：

この設定では、ディスク上の画像を変更すると、3Dシーンがリアルタイムで更新されます！これは、ゲームのデザインとコンテンツを迅速に繰り返すために非常に貴重です。

<code>// …
gameLoop( time ) {
  this.setState({
    robotPosition: new THREE.Vector3(
      Math.sin( time * 0.01 ), 0, 0
    )
  });
}
</code>

他のリソース（3Dモデルなど）の場合、3.jsのビルトインローダー（JSONLoaderなど）を使用してそれらを処理する必要があります。カスタムWebpackローダーを使用して3Dモデルファイルをロードしようとしましたが、あまりにも多くの作業と利点がありませんでした。モデルをバイナリデータと考え、ファイルローダーを使用してロードする方が簡単です。これにより、モデルデータのリアルタイム過負荷を実装できます。これをサンプルコードで見ることができます。

debug

R3Rは、ChromeとFirefoxのReact Developer Tool拡張機能をサポートしています。通常のDOMをチェックするように、シーンを確認できます！インスペクターの要素の上にホバリングすると、シーンに境界のあるボックスが表示されます。テクスチャ定義の上にホバリングして、シーン内のどのオブジェクトがこれらのテクスチャを使用しているかを確認することもできます。

アプリケーションのデバッグを支援するために、React-Three-Renderer Gitterチャットルームに参加することもできます。

パフォーマンス予防策カメレオンチャームを構築するとき、このワークフローに固有のパフォーマンスの問題に遭遇しました。

最大30秒のホットリロード時間にWebpackを使用します！これは、各過負荷がパッケージに大きなリソースを書き込む必要があるためです。解決策は、WebpackのDllPluginを実装することです。これにより、リロード時間が5秒未満に短縮されます。

• 理想的には、シーンはレンダリングのフレームごとに1回だけ呼ばれる必要があります。私のゲームを分析した後、React自体がメインのボトルネックです。フレームごとに複数回
を呼び出すと、二重のレンダリングと劣化性能が発生します。
• setState()特定の数のオブジェクトを超えた後、R3Rのパフォーマンスは通常の3.jsコードよりも悪いでしょう。私にとって、それは約1000のオブジェクトです。この例の「ベンチマーク」でR3Rを3.JSと比較できます。 setState()
• Chrome Devtoolsのタイムライン機能は、パフォーマンスをデバッグするための優れたツールです。ゲームループを簡単かつ直感的に確認できます。DevToolsの「プロフィール」機能よりも読みやすいです。

それだけです！

この設定で何ができるかを学ぶためにChameleon Charmをチェックしてください。このツールチェーンはまだ若いですが、R3Rの反応を使用することが私のWebGLゲームコードを明確に整理するために重要であることがわかりました。また、小さいながらも成長しているR3Rサンプルページをチェックして、よく組織化されたコードの例を表示することもできます。

この記事は、マーク・ブラウンとケブ・ゼトラーによって査読されました。 SetePointのすべてのピアレビューアーズに感謝します。

ReactJSとWebGLを使用してゲームを構築するためのFAQ ReactJとWebGLを使用してゲームを構築するための前提条件は何ですか？

ReactJとWebGLでゲームを構築するには、JavaScript、HTML、およびCSSの基本的な理解が必要です。また、ReactJS（ユーザーインターフェイスを構築するための一般的なJavaScriptライブラリ）を知る必要があります。さらに、インタラクティブな3Dおよび2DグラフィックをレンダリングするためのJavaScript APIであるWebGL（Webグラフィックライブラリ）を理解することが重要です。また、ES6構文、NPM（ノードパッケージマネージャー）、およびコマンドラインに精通することは大きな利点になります。

unityをReactJと統合する方法は？

unityは、React-Unity-Webglパッケージを使用してReactJSと統合できます。このパッケージを使用すると、unity webglビルドをReactJSアプリケーションに埋め込むことができます。 NPMを使用してインストールして、プロジェクトにインストールできます。その後、パッケージが提供するUnityコンポーネントを使用して、UnityゲームをReactJSアプリケーションに埋め込むことができます。

Reactを使用して3Dアプリケーションを作成するさまざまな方法は何ですか？

Reactを使用して3Dアプリケーションを作成する方法はいくつかあります。最も人気のある方法の1つは、アニメーション化された3Dコンピューターグラフィックを作成および表示するためのクロスブラウザーJavaScriptライブラリであるThree.jsを使用することです。別のアプローチは、WebGLを直接使用することですが、これはより複雑な場合があります。 React-3-FiberやReact-Unity-Webglなどの他のライブラリを使用して、Reactを使用して3Dアプリケーションを作成することもできます。

WebGLを使用してインタラクティブな3Dグラフィックを作成する方法は？

WebGLを使用すると、プラグインなしでブラウザで直接インタラクティブな3Dグラフィックを作成できます。 WebGLのAPIを使用して、複雑な3Dグラフィック、アニメーション、ゲームを作成できます。ただし、WebGLのAPIは低レベルであり、直接使用するのが複雑になる場合があります。したがって、多くの開発者は、WebGLにより高いレベルのインターフェイスを提供する3つのjsなどのライブラリを使用することを好みます。

ゲーム開発におけるReact-Unity-Webglの役割は何ですか？

React-Unity-Webglパッケージを使用すると、Unity WebGLビルドをReactJSアプリケーションに埋め込むことができます。これは、Unityを使用して複雑な3Dゲームを作成し、それらをReactJSアプリケーションに簡単に統合できることを意味します。これは、Webベースのゲームまたはインタラクティブな3Dアプリケーションを作成する場合に特に便利です。

パフォーマンスのためにReactJとWebGLゲームを最適化する方法は？

ReactJSとWebGLで構築されたゲームの最適化には、複数の戦略が含まれる場合があります。これらの戦略には、Reactのレレンダーの数を最小限に抑えること、WebGLの組み込みのパフォーマンス機能を使用してスムーズなアニメーションを実現し、Webの3Dモデルとテクスチャの最適化が含まれます。

requestAnimationFrameReactJとWebGLを使用してモバイルゲームを構築できますか？

はい、ReactJとWebGLを使用して、モバイルデバイスのWebブラウザーで実行されているゲームを構築できます。ただし、ネイティブモバイルゲームの場合、iOSやAndroidに直接エクスポートできるUnityやUnreal Engineなどのゲーム開発プラットフォームの使用を検討することをお勧めします。

ReactJとWebGLゲームでユーザー入力を処理する方法は？

ユーザー入力は、標準のJavaScriptイベントハンドラーを使用して、ReactJおよびWebGLゲームで処理できます。キーボード、マウス、タッチイベントを聴き、それに応じてゲームのステータスを更新できます。 ReactJSは、一貫した方法で異なるブラウザー間でユーザー入力を処理するために使用できる合成イベントも提供します。

ReactJとWebGLを使用して他のJavaScriptライブラリを使用できますか？

はい、ReactJとWebGLを使用して他のJavaScriptライブラリを使用できます。たとえば、3Dグラフィックには3D.JS、オーディオにはHowler.js、または物理処理にはMatter.jsを使用できます。重要なのは、これらのライブラリがゲームでシームレスに機能することを確認することです。

ReactJとWebGLゲームをデバッグする方法は？

ReactJとWebGLを使用して構築されたゲームは、Webブラウザーの開発者ツールを使用してデバッグできます。これらのツールを使用すると、HTML、CSS、およびJavaScriptコードを確認し、コンソールログを表示し、コードを段階的にデバッグできます。さらに、React Developer Toolsは、Reactコンポーネントの階層、小道具、および状態を確認できるブラウザ拡張機能です。

以上がThree.js、React、WebGLでゲームを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。