Drei cung cấp một tập hợp các controls hữu ích để điều hướng trong cảnh của bạn và tương tác với các đối tượng. Hãy khám phá chúng.

Orbit Controls

Chúng ta đã sử dụng component OrbitControls trong các bài học trước để điều hướng trong cảnh của mình.

Trong khi chúng ta sử dụng nó mà không có bất kỳ props nào, nó cung cấp các tùy chọn hữu ích để tùy chỉnh hành vi của mình.

Đầu tiên, bạn có thể quyết định bật hoặc tắt các tính năng sử dụng các boolean props sau:

• enableZoom
• enableRotate
• enablePan

Ví dụ, nếu trải nghiệm của bạn dựa trên cuộn, bạn có thể tắt zoom để tránh xung đột khi người dùng sử dụng bánh xe chuột.

Sau đó, bạn có thể thay đổi tốc độ của controls với:

• zoomSpeed
• rotateSpeed
• panSpeed

Cuối cùng, bạn có thể thay đổi giá trị tối thiểu và tối đa cho zoom:

• minZoom
• maxZoom

...các xoay trên và dưới:

• minPolarAngle
• maxPolarAngle

...các xoay trái và phải:

• minAzimuthAngle
• maxAzimuthAngle

...và pan với:

• minDistance
• maxDistance

Nếu bạn chạy dự án khởi động, bạn có thể thấy chúng ta có thể đạt đến các vị trí trông có vẻ lỗi. (phía dưới mặt đất, xuyên qua mesh, pan để không hiển thị ngọn hải đăng, v.v.)

Hãy kết hợp một số props này để tạo ra trải nghiệm bị giới hạn hơn:

Copy
<OrbitControls
  enablePan={false}
  maxPolarAngle={Math.PI / 2}
  minAzimuthAngle={-Math.PI / 2}
  maxAzimuthAngle={Math.PI / 2}
  minDistance={3}
  maxDistance={10}
/>

Hãy xem cách mà camera giờ đây bị giới hạn để luôn hiển thị ngọn hải đăng một cách hấp dẫn. Nó ngăn người dùng xem xuyên qua đối tượng và phía dưới mặt đất.

Những chi tiết nhỏ này có thể tạo ra sự khác biệt lớn trong chất lượng trải nghiệm của bạn.

Vì drei component chỉ là một gói bọc quanh lớp OrbitControls từ three.js hãy kiểm tra tài liệu three.js để xem tất cả các props có sẵn.

Presentation Controls

PresentationControls đối lập với OrbitControls tương tác với nội dung của các đối tượng bao wrapper, không phải là camera. Ngoài điều đó ra, chúng rất giống nhau.

Dưới đây là đoạn mã mẫu từ tài liệu drei