こんにちは👋、 現在、ブラウザーは以前よりも強力になり、さまざまな複雑なアニメーションを簡単にレンダリングできるようになりました。パフォーマンスの問題なしに 3D モデルをレンダリングする多くの Web サイトを見たことがあるかもしれません。この記事では、React アプリケーションで iPhone モデルをレンダリングするために を使用します。 Three.js このチュートリアルを始める前に、このモデルをレンダリングするデモ Web サイトをお見せしましょう。デモ リンクは次のとおりです:  https://apple-iphone14.netlify.app/ この Web サイトでは、GSAP と共に Three.JS を使用して、スムーズなスクロール アニメーションを追加しました。このレスポンシブ 3D ランディング ページの作成方法を学びたい場合は、次のチュートリアルをご覧ください👇.   https://youtu.be/cT160dOzpGY  React アプリケーションで素晴らしい 3D モデルをレンダリングしましょう。 セットアップとインストール このチュートリアルでは、   (create-react-app) テンプレートを使用します。プロジェクト フォルダーを開き、次のコマンドを使用して CRA テンプレートをインストールします。 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 次のコマンドを使用して、  と の 2 つのライブラリをインストールします。 @react-three/fiber @react-three/drei   npm install @react-three/fiber @react-three/drei    : threejs 用の React レンダラーです。 @react-three/fiber    : @react-three/fiber の便利なヘルパーと完全に機能する既製の抽象化のコレクションです。 @react-three/drei このチュートリアルでは、Apple iPhone 13 Pro Max の 3D モデルを使用します。このモデルは次のリンクから入手できます👇.  DatSketch の は、  の下でライセンスされています。このモデルをプロジェクトで使用する前に、必ずライセンスを確認してください。 「Apple iPhone 13 Pro Max」 Creative Commons Attribution 指定されたリンクを開き、モデルを 形式でダウンロードします。なぜGLTF？ threejs の によると、  gltf ドキュメント glTF はランタイム アセットの配信に重点を置いており、送信はコンパクトで、読み込みは高速です。 ファイルをダウンロードしたら、  フォルダー内に というフォルダーを 1 つ作成し、  というフォルダーの下にすべてのモデル ファイルを抽出します。 src assets 3D-Model   ファイルを開き、すべてのコードを次の css に置き換えます。 App.css   .App { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } これで、モデルをレンダリングする準備が整いました。  3D モデルのレンダリングの基本を理解しよう モデルをレンダリングする際に留意しなければならないことが 3 つあります。 シーン: ここでは、すべてのオブジェクト、ライト、およびカメラをセットアップできます。 カメラ: さまざまな角度から 3D モデルを表示するために使用されます。  renderer:  と呼ばれる HTML 要素にシーンを表示/レンダリングするために使用されます。 canvas プレーンな 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> これらの各要素を理解しましょう。    : は Object3d を継承するクラスで、ポリゴン オブジェクトを表します。メッシュでは、  と を使用してポリゴン オブジェクトをインスタンス化できます。 <mesh> メッシュ Geometry Material    : 指定された「幅」、「高さ」、および「深さ」を持つ直方体のジオメトリ クラスです。 <boxGeometry />    : 標準的な物理ベースのマテリアルです。 <meshStandardMaterial /> 今のところ、3D オブジェクトのように見えない中央に 1 つの黒い四角が表示される場合があります。 この 3D オブジェクトの周りでカメラ アングルを移動できるように、コントロールを追加しましょう。次の行を使用して、  から をインポートします。 @react-three/drei <OrbitControls />   import { OrbitControls } from "@react-three/drei"; この を コンポーネント内の の後にレンダリングします。開発サーバーのページを更新して、オブジェクトを取得してみてください。これで、この正方形を 3D オブジェクトとして見ることができるかもしれません。この により、カメラはターゲットの周りを周回できます。 <OrbitControls /> <Canvas> <mesh> <OrbitControls /> 光源がないため、オブジェクトは完全に黒くなります。それでは、シーンにライトを追加しましょう。  コンポーネント内で、  の前に次の行を追加します。 <Canvas /> <mesh>   <ambientLight /> ここで、この は、シーン内のすべてのオブジェクトを均等にグローバルに照らします。メッシュ素材のオフホワイト色が見えるようになりました。次のコードに示すように、小道具を使用して環境光の強度を変更することもできます。 ambientLight   <ambientLight intensity={1.25} />   の  prop を使用して、3D オブジェクトの色を変更することもできます。次の行をチェックアウトします。 <meshStandardMaterial /> color   <meshStandardMaterial color="green"/> これで、3D オブジェクトの色が緑になりました。モデル全体を作成するために使用できるさまざまなライトと要素が多数あります。そのためには、  のドキュメントを参照できます。基本はこれで終わりです。iPhone をレンダリングしてみましょう。 threejs モデルを JSX コンポーネントに変換する モデル ファイルを開くと、   、   、  などのさまざまなファイルが表示されます。  を JSX コンポーネントに変換して、React アプリケーションで簡単にレンダリングできるようにします。 textures scene.gltf scene.bin Scene.gltf  GLTF ファイルを JSX コンポーネントに変換するには、  という単純なコマンド ライン ツールを使用します。ドキュメントによると、  は、GLTF アセットを宣言的で再利用可能な react-three-fiber JSX コンポーネントに変換する小さなコマンドライン ツールです。 gltfjsx gltfjsx  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}}> ここで、  は「視野」を表します。  を設定したら、ページを更新して出力を確認します。今のところ、  を 18 に設定しています。別の数値を試して、出力を確認できます。 fov fov fov 今のところ、モデルへの反映はありません。モデルに反射を追加するには、このモデルの周囲に画像を設定して、これらの画像がこのモデルの表面に反射できるようにする必要があります。これらの画像を追加する代わりに、  ライブラリの を使用しましょう。 @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 最終的な考え これで、このチュートリアルは終わりです。  を使用して と のドキュメントを読み、さまざまな要素を試すことができます。 3D モデルを使用して本格的な Web サイトを作成し、その色をアニメーション化する場合は、このレッスンの最初にあるビデオ チュートリアルに従ってください。 https://docs.pmnd.rs/ @react-three/fiber @react-three/drei このチュートリアルが気に入ったら、  という私の YouTube チャンネルにある素晴らしいチュートリアルをチェックしてください。 から確認できます。 CodeBucks ここ これらの Web サイト テンプレートも気に入るかもしれません。  ReactJS の美しいポートフォリオ テンプレート => こちら ReactJS の NFT コレクション ランディング ページ => [ここ](- ReactJS の美しいポートフォリオ テンプレート => ) ここ このチュートリアルをお読みいただきありがとうございます。すてきな一日を！ も掲載されています。 ここに

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Polygon

Apple

Target

YouTube

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

2021 - HackerNoon Contributor of the Year - CSS3

Checkout my new website🤩

Portfolio

Hire Me

Buy Me a Coffee

2021 - HackerNoon Contributor of the Year - REDUX

このオーディオは、ストーリーの元の言語で制作されています。

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

About Author

コメント

ラベル

この記事は

Related Stories

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

Telegram: クリプト島と本土を結ぶ橋

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

Telegram: クリプト島と本土を結ぶ橋

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps