Dalam pelajaran ini kita akan mengeksplorasi cara dan komponen untuk membuat pengalaman 3D kita lebih pro-looking.

Meskipun konten dari scene itu penting, cara penyajiannya bisa membuat perbedaan besar. Model 3D yang tampak terbaik bisa terlihat biasa saja jika tidak disajikan dengan cara yang baik.

Proyek awal kita adalah sebuah Tesla Model 3 yang ditampilkan di tengah layar.

Scene ini mengandung sebuah orbit control sehingga kita bisa bergerak mengelilingi mobil. Saya mengonfigurasi kontrol untuk selalu memiliki pandangan yang baik dari mobil. Ini juga bagian dari staging dan pengalaman pro-looking.

Hanya ada satu sumber cahaya: sebuah ambient light. Ini nyaris tidak menerangi scene dan mobil terlihat datar.

Mari kita lihat bagaimana kita bisa memperbaikinya! Saya jamin bahwa hasil akhir akan terlihat jauh lebih baik.

Stage

Stage dari Drei library adalah komponen wrapper yang membuat pengaturan pencahayaan studio yang tepat untuk scene Anda.

Mari kita bungkus mobil kita dengan komponen Stage:

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

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

Mobilnya sudah terlihat jauh lebih baik! Pencahayaan lebih realistis dan mobil terlihat lebih 3D. Kita bahkan memiliki bayangan!

Kita dapat menyesuaikan komponen Stage dengan memberikannya beberapa props:

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

• intensity mengontrol intensitas cahaya. Nilai default-nya adalah 0.5.
• preset mengontrol pengaturan pencahayaan. Nilai default-nya adalah rembrandt.
• environment mengontrol environment preset. Nilai default-nya adalah city. (kita akan membahas lingkungan nanti dalam pelajaran ini)

Komponen ini sangat berguna dan merupakan cara cepat untuk membuat scene Anda terlihat lebih baik. Ia juga memiliki props lain yang dapat Anda periksa di dokumentasi.

Terkadang Anda memerlukan kontrol lebih, itulah mengapa kita akan menjelajahi cara lain untuk membuat lingkungan pencahayaan.

Warna latar belakang dan kabut

Sejauh ini dalam kursus ini, kita selalu menjaga latar belakang transparan. Ini menghasilkan latar belakang putih karena latar belakang dari halaman HTML kita.

Yang berarti Anda dapat mengubah warna latar belakang dengan mengatur warna latar belakang body dari halaman Anda dalam CSS dan bahkan menggunakan gradien atau gambar.

Dalam index.css tambahkan yang berikut:

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

Ini adalah gradien yang saya temukan di Grabient.

Pemandangan kita sekarang memiliki latar belakang yang bagus.

Kita tidak selalu bisa mengandalkan latar belakang halaman untuk mengatur warna latar belakang pemandangan kita. Misalnya jika kita ingin menggunakan kabut, itu memerlukan scene untuk memiliki warna latar belakang.

Untuk menambahkan warna latar belakang ke pemandangan kita, kita perlu melampirkan komponen color ke properti background dari scene.

Mari tambahkan latar belakang biru tua ke pemandangan kita:

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

Pemandangan 3D kita sekarang memiliki latar belakang dan menyembunyikan gradien halaman.

Sekarang mari tambahkan beberapa kabut ke pemandangan kita:

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

Komponen fog memerlukan 3 argumen:

• color: warna dari kabut.
• near: jarak dari kamera di mana kabut dimulai.
• far: jarak dari kamera di mana kabut berakhir.

Kabut ini secara halus memudar antara jarak near dan far.