Trong một cảnh 3D, camera là điểm nhìn của người dùng. Chính camera định nghĩa những gì người dùng thấy trên màn hình.

Trong threejs có các loại camera khác nhau. Hiện tại, chúng ta sẽ chỉ đề cập đến 3 loại thông dụng nhất: perspective camera, orthographic camera, và cube camera.

Trước khi đi sâu vào các loại camera có sẵn, hãy thêm OrbitControls vào dự án của chúng ta.

Orbit controls

Orbit controls là một tập hợp các điều khiển cho phép người dùng di chuyển camera xung quanh cảnh.

Chúng ta sẽ tìm hiểu cách sử dụng nó chi tiết sau, nhưng từ bây giờ chúng ta sẽ bắt đầu sử dụng nó để có thể di chuyển camera, giúp hiểu rõ hơn về các loại camera khác nhau.

Nhập và thêm thành phần OrbitControls từ gói @react-three/drei vào thành phần Canvas:

Copy
import { OrbitControls } from "@react-three/drei";

function App() {
  return (
    <>
      <Canvas>
        <OrbitControls />
      </Canvas>
    </>
  );
}

Bây giờ bạn có thể di chuyển camera xung quanh cảnh:

• Nhấp chuột trái + kéo: để xoay camera
• Bánh xe chuột: để phóng to và thu nhỏ
• Nhấp chuột phải + kéo: để di chuyển camera

Nó cũng tương thích với các thiết bị cảm ứng:

• Một ngón tay + kéo: để xoay camera
• Hai ngón tay + kéo thả: để phóng to và thu nhỏ
• Hai ngón tay + kéo: để di chuyển camera

Camera phối cảnh

Trong r3f, camera mặc định là camera phối cảnh. Đây là loại camera phổ biến nhất trong các ứng dụng 3D vì nó mô phỏng cách mắt người nhìn thế giới.

Vì đây là camera mặc định, chúng ta không cần thêm nó vào trong cảnh. Nó đã có sẵn ở đó và chúng ta có thể điều khiển nó bằng cách thêm thuộc tính camera vào component Canvas:

Copy
<Canvas camera={{ position: [3, 3, 3] }}>

Nhưng bạn cũng có thể thêm một camera mới vào cảnh một cách thủ công.

Và thêm một component PerspectiveCamera vào bất kỳ đâu trong component Canvas với thuộc tính makeDefault. Điều này sẽ đặt camera này làm camera mặc định của cảnh:

Copy
<Canvas>
  <PerspectiveCamera position={[0, 8, 0]} makeDefault />
</Canvas>

Bây giờ camera đang nằm ở đầu cảnh:

Mặc định, camera đang nhìn vào trung tâm của cảnh: [0, 0, 0]. Chúng ta sẽ thấy trong các bài học tiếp theo cách thay đổi mục tiêu của camera cho các hoạt ảnh.

Camera phối cảnh có một góc nhìn, một tỷ lệ khung hình, và một mặt phẳng cắt gần/xa.

Góc nhìn

Góc nhìn là góc của camera. Nó là góc từ phía dưới đến phía trên của camera.

Góc nhìn được định nghĩa bằng độ. Giá trị mặc định là 75 độ.

Đây là những gì chúng ta hiện đang thấy trong cảnh của mình:

Bây giờ hãy thay đổi góc nhìn thành 30 độ:

Copy
<Canvas camera={{ position: [3, 3, 3], fov: 30 }}>
{/* ... */}

Hoặc

Copy
<Canvas>
  <PerspectiveCamera makeDefault position={[3, 3, 3]} fov={30} />
  {/* ... */}

Đây là những gì chúng ta thấy bây giờ:

Bằng cách giảm góc nhìn, chúng ta thấy ít hơn của cảnh và các đối tượng trông to hơn. Giống như chúng ta đang zoom vào.

Tỉ lệ khung hình

Tỉ lệ khung hình là tỉ lệ giữa chiều rộng và chiều cao của camera. Nó được định nghĩa là width / height.

Giá trị mặc định là window.innerWidth / window.innerHeight.

Hãy thay đổi tỉ lệ khung hình thành 1. Chúng ta sử dụng thuộc tính aspect và cần thiết lập thuộc tính manual thành true để ngăn r3f tính toán tỉ lệ khung hình một cách tự động: