これまでに多くの3Dシーンを作成しましたが、ページ全体を占有する1つのシーンしか表示していませんでした。

このレッスンでは、画像やビデオ、または他のHTML要素をウェブサイトに追加するのと同様に、1つのHTMLページ内に複数の3Dシーンを統合する方法を学びます。

スタータープロジェクト

このレッスンでは、架空の3Dウェブ開発エージェンシーのランディングページを作成します。

スターターパックには、以下のセクションを含むシンプルで使いやすいレスポンシブページが含まれています: Home、Services、Team、Portfolio、およびContact。

これは検索エンジンとアクセシビリティのために索引可能なコンテンツを含む標準的なHTMLページで、3Dコンテンツで強化し、イラスト化します。

3Dコンテンツなしのランディングページ

View

ページ内に複数の3Dシーンを作成してレンダリングするために、DreiライブラリのViewコンポーネントを使用します。

これを使用することで、1つのCanvasコンポーネントだけを使って複数の独立したシーン（ビュー）をレンダリングできます。これは1つのWebGLコンテキストだけを使用し、パフォーマンスの問題を回避できるため非常に便利です。

これらのビューはターゲットHTML要素にバインドされ、タッチ、マウス、スクロール、およびリサイズイベントに適切に反応しながら、独立して配置およびサイズ変更が可能です。

Canvas

ページに3Dコンテンツを表示する準備として、main要素のトップにいつものCanvasコンポーネントを作成しましょう。

HomePage.jsx:

Copy
// ...
import { Canvas } from "react-three-fiber";

export const HomePage = () => {
  // ...

  return (
    <main>
      <Canvas
        className="canvas"
        camera={{ position: [0, 0, 1.5], fov: 30 }}
      ></Canvas>
      {/* ... */}
    </main>
  );
};

canvasクラスはキャンバスをスタイルし、ページ全体に広がるようにするために使います。これはすでにindex.cssファイルに定義されています。

トラッキング

スタータープロジェクトには、ページのさまざまなセクションを説明するための3Dシーンコンポーネントが含まれています。

ホームセクションに追加してみましょう：

Copy
import { Hero3D } from "./Hero3D";

export const HomePage = () => {
  // ...
  return (
    <main>
      <Canvas className="canvas" camera={{ position: [0, 0, 1.5], fov: 30 }}>
        <Hero3D />
      </Canvas>
      {/* ... */}
    </main>
  );
};