Trong bài học này, chúng ta sẽ khám phá các cách và thành phần để làm cho trải nghiệm 3D của chúng ta trở nên chuyên nghiệp hơn.

Trong khi nội dung của một cảnh là quan trọng, cách nó được trình bày có thể tạo ra một sự khác biệt lớn. Các mô hình 3D đẹp nhất có thể trông bình thường nếu chúng không được trình bày một cách tốt.

Dự án khởi đầu của chúng ta là một mô hình Tesla Model 3 được hiển thị ở giữa màn hình.

Cảnh này chứa một orbit control để chúng ta có thể di chuyển xung quanh chiếc xe. Tôi đã cấu hình control để luôn có một góc nhìn tốt về chiếc xe. Đây cũng là một phần của dàn dựng và trải nghiệm chuyên nghiệp.

Chỉ có một nguồn sáng: một đèn ambient. Nó hầu như không làm sáng cảnh và chiếc xe trông phẳng.

Hãy xem cách chúng ta có thể cải thiện điều này! Tôi hứa với bạn kết quả cuối cùng sẽ trông tốt hơn nhiều.

Stage

Stage từ Drei library là một component bao bọc tạo ra một thiết lập ánh sáng studio thích hợp cho cảnh của bạn.

Hãy bao bọc chiếc xe của chúng ta trong một component Stage:

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

export const Experience = () => {
  return (
    <>
      {/* ... */}
      <Stage>
        <TeslaModel3 scale={0.012} position-z={0.6} />
      </Stage>
      {/* ... */}
    </>
  );
};

Chiếc xe đã trông tốt hơn nhiều rồi! Ánh sáng trở nên thực tế hơn và chiếc xe trông 3D hơn. Chúng ta thậm chí còn có bóng!

Chúng ta có thể tuỳ chỉnh component Stage bằng cách truyền vào một số props:

Copy
<Stage intensity={0.4} preset={"upfront"} environment={"studio"}>
  <TeslaModel3 scale={0.012} position-z={0.6} />
</Stage>

• intensity được sử dụng để điều chỉnh cường độ của ánh sáng. Giá trị mặc định là 0.5.
• preset điều chỉnh thiết lập ánh sáng. Giá trị mặc định là rembrandt.
• environment điều chỉnh environment preset. Giá trị mặc định là city. (chúng ta sẽ tìm hiểu về environment sau trong bài học này)

Component này rất hữu ích và là một cách nhanh chóng để làm cho cảnh của bạn trông tốt hơn. Nó cũng có các props khác mà bạn có thể kiểm tra trong tài liệu.

Đôi khi bạn sẽ cần có nhiều kiểm soát hơn, đó là lý do vì sao chúng ta sẽ tìm hiểu các cách khác để tạo ra môi trường ánh sáng.

Màu nền và sương mù

Cho đến nay trong khóa học này, chúng ta luôn giữ nền trong suốt. Điều này dẫn đến một nền trắng vì nền của trang HTML của chúng ta.

Điều đó có nghĩa là bạn có thể thay đổi màu nền bằng cách cài đặt màu nền của body của trang của bạn trong CSS và thậm chí sử dụng gradient hoặc hình ảnh.

Trong index.css, thêm đoạn mã sau:

Copy
body {
  margin: 0;
  background-color: #d9afd9;
  background-image: linear-gradient(0deg, #d9afd9 0%, #97d9e1 100%);
}

Đây là một gradient tôi tìm thấy trên Grabient.

Cảnh của chúng ta giờ có một nền đẹp.

Chúng ta không thể luôn dựa vào nền trang để cài đặt màu nền của cảnh. Ví dụ, nếu chúng ta muốn sử dụng sương mù, nó yêu cầu cảnh có một màu nền.

Để thêm một màu nền cho cảnh, chúng ta cần gắn một thành phần color vào thuộc tính background của scene.

Hãy thêm một nền xanh đậm cho cảnh:

Copy
<Canvas camera={{ position: [-3, 1.5, 12], fov: 30 }}>
  <color attach="background" args={["#171720"]} />
  {/* ... */}
</Canvas>

Cảnh 3D của chúng ta giờ có nền và che đi gradient của trang.

Bây giờ hãy thêm một chút sương mù vào cảnh:

Copy
<Canvas camera={{ position: [-3, 1.5, 12], fov: 30 }}>
  <color attach="background" args={["#171720"]} />
  <fog attach="fog" args={["#171720", 20, 30]} />
  {/* ... */}
</Canvas>

Thành phần fog có 3 tham số:

• color: màu sắc của sương mù.
• near: khoảng cách từ camera nơi sương mù bắt đầu.
• far: khoảng cách từ camera nơi sương mù kết thúc.

Nó mờ dần một cách mềm mại giữa các khoảng cách near và far.