Cho đến nay, chúng ta đã tạo ra nhiều cảnh 3D, nhưng chỉ hiển thị một cảnh tại một thời điểm và chiếm toàn bộ trang.

Trong bài học này, chúng ta sẽ học cách tích hợp nhiều cảnh 3D trong một trang HTML duy nhất như cách bạn có thể thêm hình ảnh, video hoặc bất kỳ phần tử HTML nào khác vào trang web của bạn.

Dự án Khởi Đầu

Trong bài học này, chúng ta sẽ tạo một trang đích cho một công ty phát triển web 3D hư cấu.

Gói khởi đầu chứa trang đơn giản và sẵn sàng sử dụng, gồm các phần sau: Trang chủ, Dịch vụ, Đội ngũ, Danh mục, và Liên hệ.

Đây là một trang HTML chuẩn chứa nội dung có thể lập chỉ mục cho các công cụ tìm kiếm và khả năng truy cập mà chúng ta sẽ nâng cấp và minh họa với nội dung 3D.

Trang đích không có nội dung 3D

Chế Độ Xem

Để tạo và render nhiều cảnh 3D trong trang của chúng ta, chúng ta sẽ sử dụng View component từ thư viện Drei.

Bằng cách sử dụng nó, chúng ta có thể chỉ dùng một Canvas component và render nhiều cảnh độc lập (chế độ xem) trong đó. Điều này rất hữu dụng vì nó cho phép chúng ta chỉ sử dụng một ngữ cảnh WebGL và tránh các vấn đề về hiệu suất.

Các chế độ xem này được liên kết với một phần tử HTML mục tiêu và có thể được định vị và kích thước độc lập trong khi phản ứng đúng cách với các sự kiện cảm ứng, chuột, cuộn và thay đổi kích thước.

Canvas

Để chuẩn bị cho trang của chúng ta có nội dung 3D, hãy tạo component Canvas thông thường của chúng ta ở đầu phần tử main.

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

Lớp canvas được sử dụng để tạo kiểu cho canvas và làm cho nó chiếm toàn bộ trang. Nó đã được định nghĩa trong tập tin index.css.

Tracking

Dự án khởi đầu này chứa các component cảnh 3D mà chúng ta sẽ sử dụng để minh họa cho các phần khác nhau của trang.

Hãy thêm một cảnh cho phần trang chủ:

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

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