03 Transform Object

Sebelumnya kita sudah buat elemen utama di Three JS, salah satunya adalah buat object 3D, sekarang cara mentransformasi object tersebut adalah sebagai berikut.

Ada 4 property untuk transform object di Three JS:

1. position -> untuk memindahkan object
2. scale ->untuk mengubah ukuran object
3. rotation -> untuk memutar object
4. quaternion -> sama untuk memutar object, tapi lebih matematis

position Memindahkan Object

Untuk memindahkan objek kita gunakan property position. position, punya 3 argumen, yaitu x, y, z.

Cara pakainya bisa satu per satu kaya gini:

mesh.position.x = 1
mesh.position.y = 2
mesh.position.z = 3

atau pakai method set kaya gini:

mesh.position.set(1, 2, 3)

Axes Helper

Kalau bingung di mana arah X, Y, dan Z, pakai axes helper:

const axesHelper = new THREE.AxesHelper(2)
scene.add(axesHelper)

nilai 2 itu artinya panjang garis axis-nya, terserah mau kamu buat sepanjang apa.

scale Mengubah UkuranObject

Untuk scaling object pakai property scale dengan argumen x, y, z. Cara pakainya gampang, kalau nilainya 1 itu artinya tidak ada perubahan, kalau misal nilainya 0.5 berarti setengah kali lebih kecil dari ukuran aslinya, kalau misal nilainya 2 berarti 2 kali lebih besar dari ukuran aslinya.

mesh.scale.x = 2
mesh.scale.y = .25
mesh.scale.z = .5

rotate Memutar Object

Untuk rotate object pakai property rotate dengan argumen x, y, z. Beda dengan Scale dan Move, nilai x, y, z ini bukan axis garis vector3 ya. Ini Euler, jadi muter di sumbu x, y, atau z.

Nah! Karena rotasi itu mainannya muter-muter kan, jadi nilainya kalau pengen putarannya bagus pakai nilai Phi, satu Phi itu putarannya setengah putaran alias 180 derajat atau kalau mau di angka bisa nulis 3.14, cuma daripada nulis angka di nilai x, y, atau z-nya tulisnya pakai nilai Phi aja: Math.PI. Contoh puter 270 derajat di sumbu x sama sumbu y:

mesh.rotation.x = Math.PI * .25
mesh.rotation.y = Math.PI * .25

Look at this!

Object3D punya method agar bisa memutar objek ke arah objek lain, kaya yang nyuruh “liat objek ini nih!”, maka si objek akan berputar pada sumbu -z ke arah objek tersebut. Ga cuma objek, camera juga bisa di arahkan ke objek terebut.

camera.lookAt(new THREE.Vector3(0, -1, 0))
camera.lookAt(mesh.position)

Bikin Grup

Kalau pernah desain pakai software desain pasti kalian pernah mengumpulkan beberapa objek gambar kalian dalam satu group biar kalau kita geser-geser semua objek di dalam grup itu ikut bergeser, atau kita besarkan kecilkan semuanya ikut. Nah! Di sini juga sama, kita bisa buat satu grup agar semua objek di dalam grup bisa ikut transformasi tanpa harus satu-satu.

Contoh, kita buat 3 kotak dalam satu grup, kita cukup panggil class Group-nya ThreeJS:

/**
 * Objects
 */
const group = new THREE.Group()
group.scale.y = 2
group.rotation.y = 0.2
scene.add(group)
 
const cube1 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
)
cube1.position.x = - 1.5
group.add(cube1)
 
const cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
)
cube2.position.x = 0
group.add(cube2)
 
const cube3 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
)
cube3.position.x = 1.5
group.add(cube3)

Lihat bedanya? Jadi yang masuk ke panggung (scene) adalah grupnya bukan object-nya, sedangkan si object masuknya ke group, karena jadi bagian group.

Hasil akhir script.js

import * as THREE from 'three'
 
// Canvas
const canvas = document.querySelector('canvas.webgl')
 
// Scene
const scene = new THREE.Scene()
 
/**
 * Axes Helper
 */
const axesHelper = new THREE.AxesHelper(2)
scene.add(axesHelper)
 
/**
 * Objects
 */
const group = new THREE.Group()
group.scale.y = 2
group.rotation.y = 0.2
scene.add(group)
 
const cube1 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
)
cube1.position.x = - 1.5
group.add(cube1)
 
const cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
)
cube2.position.x = 0
group.add(cube2)
 
const cube3 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
)
cube3.position.x = 1.5
group.add(cube3)
 
/**
 * Sizes
 */
const sizes = {
    width: 800,
    height: 600
}
 
/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
// camera.lookAt(new THREE.Vector3(0, - 1, 0))
scene.add(camera)
 
/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)