HTML

Starter pack

これまでに構築した3D体験は、Three.jsの3DシーンがレンダリングされるcanvasというHTML要素のみを含んでいました。

体験をよりインタラクティブにするには2つの方法があります。

通常通りにHTMLページを構築し、全画面キャンバスに3Dシーンをバックグラウンドとして追加します。そして、それらをマウスイベントやページスクロールで結びつけてうまく統合します。この方法はアニメーションレッスンのスクロールセクションで確認します。
HTML要素を3Dオブジェクトのように3Dシーンに追加します。これがこのレッスンで学ぶ内容です。

これらの2つのアプローチは排他的ではありません。組み合わせて没入型体験を作成することもできます。

Ikeaオンラインショールーム

このレッスンでは、Ikeaのオンラインショールームを作成することを想像してみましょう。スターターパックにはさまざまなキッチン家具の3Dモデルが含まれています（すべてQuaternius on Poly Pizzaから提供されています、ありがとう🙏）。

3D Kitchen

これまでのところ、和風キッチンができています。

キッチン家具にラベルを追加して、各品目の名前と価格を表示しようとします。

その前に、スターターパックのいくつかの部分を説明させてください。

コードを汎用的にするために、各アイテムを手動で宣言し、ロードと配置のロジックを再記述する代わりに、アイテムの配列を作成しました。

const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
  },
];

次に、Itemという汎用コンポーネントを作成し、モデルパスおよびその他の変換プロップス（position, rotation, scaleなど）を受け取ります。

const Item = ({ model, position, rotation, ...props }) => {
  const gltf = useGLTF(`models/${model}`);

  return (
    <group position={position} rotation={rotation}>
      <primitive object={gltf.scene} {...props} />
    </group>
  );
};

このコンポーネントは、3Dモデルの読み込みとシーン内での配置を担当します。後でHTML要素を子要素として追加できるように、グループをルート要素として選びました。

その後、アイテム配列をループして、各アイテムに対してItemコンポーネントをレンダリングします。

export const Experience = () => {
  return (
    <>
      {sceneItems.map((item, index) => {
        return <Item key={index} {...item} />;
      })}
    </>
  );
};

3DでのHTML要素

汎用コンポーネントで任意の3Dモデルを描画し、シーンに配置できるようになったので、次は家具ラベルに注目しましょう。

items配列にlabelとpriceのプロパティを追加して、情報を増やします：

const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
    name: "Hemnes",
    price: 300,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
    name: "Lillången",
    price: 450,
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
    name: "Skogsta",
    price: 25,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
    name: "Lagan",
    price: 600,
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
    name: "Lerhamn",
    price: 80,
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
    name: "Dango",
    price: 4,
  },
];