React アプリケーションで 3D オブジェクトをレンダリングする方法

3D レンダリングの導入により、インターネット テクノロジとのユーザー インタラクションが変わりました。まず、Web アプリはより没入型になり、Web ブラウザーを介して魅力的でインタラクティブなエクスペリエンスを提供します。

この技術は、ゲームや拡張/仮想現実の分野ですでに熱心に採用されています。仮想要素と対話するための現実的で没入型の方法を提供します。

React アプリケーションで 3D オブジェクトをレンダリングする方法を確認してください。

3D モデリングとプログラミングの基礎

3D レンダリングを開始する前に、いくつかの点に注意する必要があります。

• 3D オブジェクトには、3 次元での構造を定義する個々のポイントまたは頂点が含まれています。これらの点を結合すると、画面上のオブジェクトの形状を構成する面が作成されます。
• 最新のブラウザには、WebGL などのテクノロジを使用して 3D をレンダリングする機能が組み込まれています。これは、マシンのグラフィック処理ユニットの能力を利用して、3D モデルとシーンをすばやくレンダリングすることによって実現されます。
• ブラウザがレンダリングする 3D オブジェクトは、3 つの主要なコンポーネントで構成されています。これらは、シーン、カメラ、およびレンダラーであり、すべて重要な役割を果たします。シーンは、ライトやカメラを含むすべての 3D 要素をセットアップするための基本プラットフォームを提供します。カメラを使用すると、さまざまな角度から 3D オブジェクトを表示できます。最後に、レンダラーはキャンバス HTML 要素の上にシーンをマウントして表示します。

Three.js と React Three Fiber を使用した 3D レンダリング

Three.jsは、Web ブラウザーで 3D オブジェクトをレンダリングするために使用できる JavaScript ライブラリです。組み込みのコンポーネントを使用すると、React アプリケーションの他の機能とともに、ブラウザーで 3D オブジェクトを簡単に作成およびレンダリングできます。

react-three-fiber パッケージは、Three.js の上で動作します。これにより、Three.js コンポーネントを使用してブラウザーで 3D オブジェクトを作成およびレンダリングするプロセスが簡素化されます。興味深いことに、React で 3D オブジェクトを作成する際に便利なカスタム React フックも提供します。

React アプリケーションでの 3D オブジェクトのレンダリング

Blender で作成した 3D モデルだけでなく、ブラウザで単純な 3D 形状をレンダリングするには、以下の手順に従います。Blender に慣れていない場合は、初心者として始める方法を学んでください。

React アプリケーションを作成し、ターミナルを起動して以下のコマンドを実行し、必要な依存関係をインストールします。

npm install three @react-three/fiber @react-three/drei

Three.js、react-three-fiber、react-three-drei パッケージをインストールします。react-three-drei ライブラリは、react-three-fiber と連携して 3D シーンとオブジェクトを作成します。

3D シェイプをレンダリングする

ごくわずかなコードで、単純な 3D ボックス形状をブラウザーでレンダリングできます。src/app.jsファイルを開き、ボイラープレートの React コードをすべて削除して、以下を追加します。

import React from "react";
import {Canvas} from "@react-three/fiber";
import {OrbitControls} from "@react-three/drei";


function Box() {
  return (
    <mesh>
      <boxBufferGeometry attach ="geometry" />
      <meshLambertMaterial attach="material" color="hotpink" />
    </mesh>
  )
}

export default function App() {
  return (
    <div className="App">
      <div className="App-header">
        <Canvas>
          <OrbitControls />
          <ambientLight intensity ={0.5} />
          <spotLight position={[10, 15,10]} angle={0.3} />
          <Box />
        </Canvas>
      </div>
    </div>
  );
}

このコードは次のことを行います。

• Boxコンポーネントは、react-three-fiber のメッシュ、boxBufferGeometry、および meshLambertMaterial コンポーネントを使用して 3D ボックスをレンダリングします。これら 3 つのコンポーネントが連携してボックスの形状を作成します。
• boxBufferGeometry コンポーネントはボックスを作成し、このコードは meshLambertMaterial コンポーネントの color プロパティをホット ピンクに設定します。
• 次に、環境光、スポットライト、および Orbit Controls コンポーネントのプロパティが設定されたボックス コンポーネントを格納する Canvas 要素をレンダリングします。
• アンビエント ライト コンポーネント プロパティは、キャンバスに柔らかな光を追加します。spotLight コンポーネントは、特定の位置から 0.3 の角度で焦点を合わせたライトを追加します。最後に、OrbitControls コンポーネントを使用すると、3D オブジェクトの周りのカメラを制御できます。

index.js ファイルに app.js コンポーネントをインポートしてレンダリングし、開発サーバーをスピンアップして、ブラウザの http://localhost:3000 で結果を表示します。

Blender で作成した 3D モデルをレンダリングする

Blender は、さまざまな分野のクリエイターが 3D モデル、視覚効果、インタラクティブな 3D アプリケーションを作成するために使用するオープンソース ツールです。Blender を使用して、Web アプリケーション用の 3D モデルを作成できます。

このチュートリアルでは、Sketchfabで利用可能な SRT パフォーマンスによって BMW 3D モデルをレンダリングします。

開始するには、Sketchfab からモデルを GLTF (GL Transmission Format) でダウンロードします。この形式を使用すると、ブラウザーで 3D モデルを簡単にレンダリングできます。ダウンロードが完了したら、モデルのフォルダーを開き、モデルのファイルを React アプリケーション内のパブリック ディレクトリに移動します。

次に、app.js ファイルに移動して、以下のコードを入力します。

• 次のコンポーネントをインポートします。 import {useGLTF, Stage, PresentationControls} from "@react-three/drei";
• モデル コンポーネントを作成し、以下のコードを追加します。 function Model(props){
  const {scene} = useGLTF("/bmw.glb");
  return <primitive object={scene} {...props} />
}


  export default function App() {
  return (
    <div className="App">
      <div className="App-header">
        <Canvas
          dpr={[1,2]}
          shadows camera={{fav: 45}}
          style={{"position": "absolute"}}
        >
          <PresentationControls
            speed={1.5}
            global zoom={0.5}
            polar={[-0.1, Math.PI / 4]}
          >
            <Stage environment={null}>
              <Model scale={0.01} />
            </Stage>
          </PresentationControls>
        </Canvas>
      </div>
    </div>
  );
}


• React-three-drei ライブラリの useGLTF フックは、シーン変数を定義し、パス「/bmw.glb」にあるモデル ファイルの値を割り当てます。次に、コンポーネントは、3D モデルのシーンを配置するプリミティブ オブジェクトを返します。
• Canvas 要素は、デバイス ピクセル比 (DPR)、影、カメラ アングル、スタイルなどの指定されたプロパティを使用して、モデルを構成する主要なコンポーネントをレンダリングします。
• 次に、速度やグローバル ズームなど、PresentationControls コンポーネントのプロパティを指定します。これらのプロパティは、画面上でモデルを制御する方法を定義します。
• 最後に、モデルをブラウザー画面にマウントする Stage コンポーネントを構成します。

開発サーバーを起動して、アプリケーションの変更を更新します。ブラウザにレンダリングされたモデルが表示されます。

Web アプリケーションでの 3D モデルのレンダリング

Web アプリケーションで 3D モデルをレンダリングすると、よりリアルでインタラクティブな 3D 感覚を提供することでユーザー エクスペリエンスが向上するなど、いくつかの利点が得られます。その結果、ユーザーは製品との関わりを深めることができます。

ただし、3D 要素のレンダリングには、アプリケーションのパフォーマンスに悪影響を及ぼすなどの欠点があります。3D モデルをレンダリングするにはより多くのリソースが必要になるため、アプリの読み込みが遅くなる可能性があります。