これまでは、プリミティブな形（キューブ、スフィア、プレーンなど）を使用して3Dシーンを作成してきました。

しかし、3Dグラフィックスが非常に興味深いのは、Blender、Maya、Cinema 4D、Nomad Sculpt などの3Dモデリングソフトウェアで作成された3Dモデルをインポートして表示できる能力です。

Introduction

このコースでは3Dモデリングを行いません。これはそれ自体が一つのトピックです。threejsやReact Three Fiberを使って3D体験を作成するために必須のスキルではありません。オンラインで多くの無料の3Dモデルを見つけ、それらをプロジェクトに使用することができます。しかし、3Dモデリングの基礎を学ぶことは、3Dモデルがどのように作成され、プロジェクトでどのように使用されるかを理解するのに非常に役立ちます。

この道をたどるなら、無料でオープンソースの3DモデリングソフトウェアであるBlenderを使用することをお勧めします。このツールは非常に強力で、使用方法を学ぶためのチュートリアルがオンラインに多数あります。

最も有名な入門チュートリアルはBlender Guruによるドーナツチュートリアルです。

3D models

3Dモデルはデータを含むファイルです。このデータには、3Dモデルのジオメトリ、テクスチャ、アニメーションが含まれることがあります。

3Dモデルには多くの異なるファイル形式があります。最も一般的なものは次の通りです：

• .obj：3Dモデルのジオメトリのみを含むシンプルなファイル形式。
• .fbx：3Dモデルのジオメトリ、テクスチャ、およびアニメーションを含むバイナリファイル形式。これはUnityやUnreal Engineで使用される形式です。
• .gltf：3Dモデルのジオメトリ、テクスチャ、およびアニメーションを含むJSONファイル形式。これはウェブに推奨される形式で、非常にコンパクトな形式です。
• .glb：.gltf形式のバイナリバージョン。通常、.gltf形式よりも33％小さいよりコンパクトな形式です。

このコースでは、.gltfおよび.glb形式を使用します。

Blenderを使用することで、3Dモデルを一つの形式から別の形式に簡単に変換できます。

3Dモデルの検索

ここでは、無料の3Dモデルを見つけることができるいくつかのウェブサイトを紹介します：

• Poly Pizza: ロイヤリティフリーの低ポリゴン3Dモデルのコレクション
• Pmndrs Market: 別のロイヤリティフリー3Dアセットのコレクション (React Three Fiberのクリエイターからの提供です!)
• Sketchfab: 3Dモデルを共有およびダウンロードするためのプラットフォーム。多くの無料モデルが利用可能！
• Unity Asset Store: 元々はUnity用ですが、プロジェクトに使用できる多くの3Dモデルパックを見つけることができます。
• Quaternius: 自身のウェブサイトで無料の3Dモデルパックを共有する3Dアーティスト。
• Kenney: 多くの高品質な無料3Dモデルパックを共有するもう一人の素晴らしいクリエイター。

いずれの場合も、使用したい3Dモデルのライセンスを必ず確認してください。個人使用のみ無料のものもあれば、商業利用が無料のもの、そして全く無料ではないものもあります。また、NFTのような特定のコンテキストでの使用を防ぐためのカスタムライセンスが設定されているものもあります。

さて、3Dモデルが揃いましたので、プロジェクトにロードする方法を見ていきましょう。

プロジェクト構造

publicフォルダはプロジェクトのルートフォルダです。ここにプロジェクトの静的アセット（画像、3Dモデル、音声ファイルなど）をすべて配置します。

プロジェクトを整理しておくために、publicフォルダ内にmodelsフォルダを作成し、すべての3Dモデルをそこに保存します。

スターターパックにはすでにいくつかの3Dモデルが入ったmodelsフォルダが含まれています。それらはQuaterniusからのものです。

useLoader

React Three Fiberで外部リソースをロードするための基本コンポーネントはuseLoaderフックです。このフックは最初の引数にloaderを、第二の引数にurlを取ります。そしてロードされたリソースを返します。

loaderはthreejsのLoaderクラスを拡張するクラスです。threejsにはさまざまな種類のリソースをロードするための多くのローダーが用意されています。例えば、GLTFLoaderは.gltfおよび.glbファイルをロードするために使用されます。

最初の3Dモデルをロードしてみましょう：

Copy
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export const Experience = () => {
  const model = useLoader(GLTFLoader, "models/Fish.gltf");

  return (
    <>
      <primitive object={model.scene} />
    </>
  );
};

primitiveコンポーネントはシーンにthreejsオブジェクトを表示するために使用されます。objectプロップには表示したいthreejsオブジェクトを指定します。

これで3Dモデルがシーンにロードされて表示されました。 (素敵に見えますね！)

useLoaderはロードされたリソースのキャッシュを自動で管理します。したがって、同じリソースを複数回ロードしても、一度だけロードされます。

useGLTF / useFBX

Drei ライブラリは3Dモデルをロードするための2つのフックを提供しています: useGLTF と useFBX。これらは useLoader フックのラッパーであり、使いやすくなっています。

既存のコードを useGLTF フックを使うように更新してみましょう：