02 Elemen Utama Three JS

4 Elemen Utama di Three JS

Untuk buat Three JS yang paling sederhana wajib ada 4 elemen ini:

1. Scene
2. Object
3. Camera
4. Renderer

Scene

Scene itu kaya container tapi untuk 3D, semua objek 3D, partikel, cahaya, dll. Semua adanya di dalam scene ini. Jadi sebelum buat apapun, panggil dulu scene:

// Scene
const scene = new THREE.Scene()

---

Object

Object ini bisa apa saja di Three JS, bisa aja bentuk bentuk primitif kaya kotak, bulat, segitiga, dll. Atau bisa juga partikel, cahaya, dll.

Mesh

Sebelum membuat sebuah object geometri, kita harus kenal dulu yang namanya mesh. Mesh adalah gabungan objek geometri dan materialnya (material itu bagaimana object itu terlihat, kaya warnanya, dll). Contoh, saya buat BoxGeometry dan MeshBasicMaterial untuk membuat object pertama:

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })

lalu semuanya di gabung jadi Mesh

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)

Kalau sudah di gabung dan jadi Mesh, saatnya di masukan ke panggung alias Scene, caranya kaya gini:

scene.add(mesh)

kalau ga dimasukin ya ga akan muncul objeknya, kan ga ada di panggung.

---

Camera

Camera tidak bisa di lihat di canvas, tapi lebih ke point of view. Ketika kita ingin melihat sebuah object di scene kita bisa menyimpan beberapa tipe kamera. Dan ada beberapa kamera di Three JS. Untuk sekarang mengenal dulu kamera yang point of view-nya langsung ke object-nya, namanyaPerspective Camera.

Field of View

Field of View di singkat juga dengan fov, adalah seberapa besar sudut pandang kita terhadap objek.

Aspect Ratio

Aspect Ratio adalah lebar di kali tinggi ukuran canvas. Jadi, biasanya sebelum membuat camera ke dalam scene, kita tentukan dulu ukuran canvas-nya.

// Sizes
const sizes = 
{
	width: 800,
	height: 600
}
 
// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
 
scene.add(camera)

INGAT!

Jangan lupa untuk selalu tambahkan scene.add setiap kali kita membuat objek yang harus di tempel di scene/panggung.

---

Renderer

Renderer fungsinya untuk me-render semua objek dan panggung kita untuk ditampilkan ke dalam canvas. Di dalam index.html, kita masukkan elemen <canvas>:

<canvas class='webgl'></canvas>

lalu, kita panggil di JavaScript seperti ini:

// Canvas
const canvas = document.querySelector('canvas.webgl')
 
// Renderer
const renderer = new THREE.WebGLRenderer(
{
	canvas: canvas
})
 
renderer.setSize(sizes.width, sizes.height)

---

Sekarang, karena kita udah punya semua elemen utamanya, selanjutnya kita bisa fokus ke fungsi-fungsi dasar dari Three JS.