React JS アプリケーションで 3D モデルをレンダリングする方法

こんにちは👋、

現在、ブラウザーは以前よりも強力になり、さまざまな複雑なアニメーションを簡単にレンダリングできるようになりました。パフォーマンスの問題なしに 3D モデルをレンダリングする多くの Web サイトを見たことがあるかもしれません。この記事では、React アプリケーションで iPhone モデルをレンダリングするためにThree.jsを使用します。

このチュートリアルを始める前に、このモデルをレンダリングするデモ Web サイトをお見せしましょう。デモ リンクは次のとおりです: https://apple-iphone14.netlify.app/

この Web サイトでは、GSAP と共に Three.JS を使用して、スムーズなスクロール アニメーションを追加しました。このレスポンシブ 3D ランディング ページの作成方法を学びたい場合は、次のチュートリアルをご覧ください👇.

React アプリケーションで素晴らしい 3D モデルをレンダリングしましょう。

セットアップとインストール

このチュートリアルでは、 CRA (create-react-app) テンプレートを使用します。プロジェクト フォルダーを開き、次のコマンドを使用して CRA テンプレートをインストールします。

 npx create-react-app 3d-model-in-reactjs

このチュートリアルでは、アプリケーションに好きな名前を付けることができます。「3d-mode-in-reactjs」としています。

ここで、npx は、npm をインストールするときに付属するユーティリティです。これは、npm レジストリで利用可能な npm パッケージをインストールせずに実行するのに役立ちます。

3Dモデルをレンダリングするために必要なライブラリをインストールしましょう。次のコマンドを使用して、ディレクトリを「3d-mode-in-reactjs」に変更します。

 cd 3d-mode-in-reactjs

次のコマンドを使用して、 @react-three/fiberと@react-three/dreiの 2 つのライブラリをインストールします。

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

• @react-three/fiber : threejs 用の React レンダラーです。

• @react-three/drei : @react-three/fiber の便利なヘルパーと完全に機能する既製の抽象化のコレクションです。

  
  

このチュートリアルでは、Apple iPhone 13 Pro Max の 3D モデルを使用します。このモデルは次のリンクから入手できます👇.

• DatSketch の「Apple iPhone 13 Pro Max」は、 Creative Commons Attributionの下でライセンスされています。このモデルをプロジェクトで使用する前に、必ずライセンスを確認してください。

  
  

指定されたリンクを開き、モデルをgltf形式でダウンロードします。なぜGLTF？ threejs のドキュメントによると、 glTF はランタイム アセットの配信に重点を置いており、送信はコンパクトで、読み込みは高速です。

ファイルをダウンロードしたら、 srcフォルダー内にassetsというフォルダーを 1 つ作成し、 3D-Modelというフォルダーの下にすべてのモデル ファイルを抽出します。

App.cssファイルを開き、すべてのコードを次の css に置き換えます。

 .App { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }

これで、モデルをレンダリングする準備が整いました。

3D モデルのレンダリングの基本を理解しよう

モデルをレンダリングする際に留意しなければならないことが 3 つあります。

1. シーン: ここでは、すべてのオブジェクト、ライト、およびカメラをセットアップできます。

2. カメラ: さまざまな角度から 3D モデルを表示するために使用されます。

3. renderer: canvasと呼ばれる HTML 要素にシーンを表示/レンダリングするために使用されます。

   
   

プレーンな JavaScript プロジェクトで threejs を直接使用している場合、これらすべてを基本からセットアップする必要があるかもしれませんが、このチュートリアルでは@react-three/fiberと@react-three/dreiを使用しているため、すべてをゼロから行うこと。

App.jsファイルを開き、デフォルト コードをクリーンアップして、 @react-three/fiberからcanvas要素をインポートしましょう。次のコード スニペットを確認してください。

 import "./App.css"; import { Canvas } from "@react-three/fiber"; function App() { return ( <div className="App"> <Canvas>{/* Here we will render out model */}</Canvas> </div> ); } export default App;

ここでは、 Canvasコンポーネントがsceneとcameraを設定し、フレームごとにsceneをレンダリングします。

<Canvas />コンポーネント内に次のコードをコピーします。

 <Canvas> <mesh> <boxGeometry /> <meshStandardMaterial /> </mesh> </Canvas>

これらの各要素を理解しましょう。

• <mesh> :メッシュは Object3d を継承するクラスで、ポリゴン オブジェクトを表します。メッシュでは、 GeometryとMaterialを使用してポリゴン オブジェクトをインスタンス化できます。

• <boxGeometry /> : 指定された「幅」、「高さ」、および「深さ」を持つ直方体のジオメトリ クラスです。

• <meshStandardMaterial /> : 標準的な物理ベースのマテリアルです。

  
  

今のところ、3D オブジェクトのように見えない中央に 1 つの黒い四角が表示される場合があります。

この 3D オブジェクトの周りでカメラ アングルを移動できるように、コントロールを追加しましょう。次の行を使用して、 @react-three/dreiから<OrbitControls />をインポートします。

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

この<OrbitControls />を<Canvas>コンポーネント内の<mesh>の後にレンダリングします。開発サーバーのページを更新して、オブジェクトを取得してみてください。これで、この正方形を 3D オブジェクトとして見ることができるかもしれません。この<OrbitControls />により、カメラはターゲットの周りを周回できます。

光源がないため、オブジェクトは完全に黒くなります。それでは、シーンにライトを追加しましょう。 <Canvas />コンポーネント内で、 <mesh>の前に次の行を追加します。

 <ambientLight />

ここで、このambientLightは、シーン内のすべてのオブジェクトを均等にグローバルに照らします。メッシュ素材のオフホワイト色が見えるようになりました。次のコードに示すように、小道具を使用して環境光の強度を変更することもできます。

 <ambientLight intensity={1.25} />

<meshStandardMaterial />のcolor prop を使用して、3D オブジェクトの色を変更することもできます。次の行をチェックアウトします。

 <meshStandardMaterial color="green"/>

これで、3D オブジェクトの色が緑になりました。モデル全体を作成するために使用できるさまざまなライトと要素が多数あります。そのためには、 threejsのドキュメントを参照できます。基本はこれで終わりです。iPhone をレンダリングしてみましょう。

モデルを JSX コンポーネントに変換する

モデル ファイルを開くと、 textures 、 scene.gltf 、 scene.binなどのさまざまなファイルが表示されます。 Scene.gltfを JSX コンポーネントに変換して、React アプリケーションで簡単にレンダリングできるようにします。

GLTF ファイルを JSX コンポーネントに変換するには、 gltfjsxという単純なコマンド ライン ツールを使用します。ドキュメントによると、 gltfjsxは、GLTF アセットを宣言的で再利用可能な react-three-fiber JSX コンポーネントに変換する小さなコマンドライン ツールです。

terminal/cmd を開き、すべてのモデル ファイルを保存したディレクトリに移動します。私の場合は、 assetsフォルダにある3D-Modelフォルダ内にあります。そのため、次のコマンドを使用してディレクトリを変更します。

 cd src/assets/3D-Model

次のコマンドを使用します。

 npx gltfjsx scene.gltf

このコマンドには数秒かかり、JSX コンポーネントであるScene.jsファイルが返されます。

注: 最新の NodeJS バージョンを使用している場合、この gltfjsx コマンドでエラーが発生する可能性があります。現在 17.2.0 を使用していますが、このコマンドは正常に動作しています。エラーが発生した場合は、NodeJs のバージョンをダウングレードして、このコードをもう一度試してください。 nvm などのツールを使用して、さまざまなバージョンのNodeJを使用できます。

重要！

Scene.jsファイルからモデルをレンダリングする前に、モデル ファイルをパブリックディレクトリにコピーする必要があります。これは、 Scene.js ファイルを見ると、/scene.gltf /scene.gltfからノードとマテリアルをロードするuseGLTFフックが使用されているためです。 texture、scene.bin、scene.gltfをプロジェクトのpublicフォルダにコピーします。

3D モデルのレンダリング

App.jsファイルを開き、 <mesh>を削除します。 Scene.jsファイルからModelをインポートしましょう。

 import Model from "./assets/3D-Model/Scene";

<OrbitControls />の前に、 <Canvas />コンポーネント内の<Model />をレンダリングします。

 <Canvas> <ambientLight intensity={1.25} /> <Model /> <OrbitControls /> </Canvas>

出力ページを更新します。これで、iPhone のレンダリングが画面に表示されるはずです。モデルをズームイン、ズームアウト、移動できます。モデルの視野を広げましょう。 canvas 要素から直接カメラにアクセスできます。次のコード スニペットのように、キャンバス内にカメラを追加します。

<Canvas camera={{fov: 18}}>

ここで、 fovは「視野」を表します。 fovを設定したら、ページを更新して出力を確認します。今のところ、 fovを 18 に設定しています。別の数値を試して、出力を確認できます。

今のところ、モデルへの反映はありません。モデルに反射を追加するには、このモデルの周囲に画像を設定して、これらの画像がこのモデルの表面に反射できるようにする必要があります。これらの画像を追加する代わりに、 @react-three/dreiライブラリの<Environment />コンポーネントを使用しましょう。

<Environment />をインポートしましょう。

 import { Environment, OrbitControls } from "@react-three/drei";

モデルの後に、環境を追加しましょう。

 <Environment preset="sunset" />

ここで、プリセットはモデルを取り巻くさまざまなタイプの環境を設定します。今のところ、「日没」に設定しています。ここから利用可能なさまざまなプリセットを確認できます。

この環境を追加すると、iPhone に美しい反射が表示されるはずです。 React のSuspenseコンポーネント内でモデルをレンダリングして、非同期でロードできるようにしましょう。

 <Suspense fallback={null}> <Model /> </Suspense>

これが最終的なコードです。

https://gist.github.com/codebucks27/6defde4db7e290d95d7ff1ae39078a06

最終的な考え

これで、このチュートリアルは終わりです。 https://docs.pmnd.rs/を使用して@react-three/fiberと@react-three/dreiのドキュメントを読み、さまざまな要素を試すことができます。 3D モデルを使用して本格的な Web サイトを作成し、その色をアニメーション化する場合は、このレッスンの最初にあるビデオ チュートリアルに従ってください。

このチュートリアルが気に入ったら、 CodeBucksという私の YouTube チャンネルにある素晴らしいチュートリアルをチェックしてください。ここから確認できます。

これらの Web サイト テンプレートも気に入るかもしれません。

• ReactJS の美しいポートフォリオ テンプレート =>こちら

• ReactJS の NFT コレクション ランディング ページ => [ここ](- ReactJS の美しいポートフォリオ テンプレート =>ここ)

  
  

このチュートリアルをお読みいただきありがとうございます。すてきな一日を！