So far we've created many 3D scenes, but we've only displayed one at a time and taking over the whole page.

In this lesson we'll learn how to integrate multiple 3D scenes within a single HTML page as you could add images, videos or any other HTML element to your website.

Starter project

For this lesson we will create a landing page for a fictional 3D web development agency.

The starter pack contains a simple and ready to use responsive page containing the following sections: Home, Services, Team, Portfolio, and Contact.

This is a standard HTML page containing indexable content for search engines and accessibility that we will enhance and illustrate with 3D content.

The landing page without 3D content

View

To create and render multiple 3D scenes in our page we'll use the View component from Drei library.

By using it, we can use only one Canvas component and render multiple independent scenes (views) within it. This is very useful as it allows us to use only one WebGL context and avoid performance issues.

These views are binded to a target HTML element and can be positioned and sized independently while reacting properly to touch, mouse, scroll and resize events.

Canvas

To prepare our page for 3D content, let's create our usual Canvas component at the top of the main element.

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>
  );
};

The canvas class is used to style the canvas and make it take the whole page. It is already defined in the index.css file.

Tracking

The starter project contains 3D scene components that we'll use to illustrate the different sections of the page.

Let's add the one for the home section:

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

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