Sebelum nyemplung, ada baiknya kita mahamin konsep-konsep 3D dulu. Gak usah bingung, santai aja, saya akan coba sharing dengan bahasa yang ceplas ceplos dan gampang dipahami.
Apa itu WebGL?
WebGL (Web Graphics Library) itu ibarat kanvasnya browser buat gambar 3D. Jadi, kalau kita mau bikin grafis 3D di website, WebGL ini jadi alatnya. Gak usah install apa-apa, cukup buka browser dan viola! Bisa langsung nampilin bikin ngedit karya 3D kita.
ThreeJS
Nah, kalau WebGL itu kanvasnya, ThreeJS itu kayak kuas dan cat yang membantu kita menggambar di kanvas tersebut. ThreeJS itu library JavaScript yang powerful banget buat bikin grafis 3D di web. Sedangkan TresJS, itu alat yang ngemudahin kita pakai ThreeJS di framework Vue JS.
Jadi, kalau lagi asik ngoding Vue, terus pengen nambahin 3D, gak usah pusing-pusing lagi, langsung aja pakai TresJS. Gampang banget integrasinya kok.
Tiga Makhluk Penting: Scene, Camera, Renderer
Di dunia 3D, ada tiga makhluk penting yang harus kita kenal: Scene, Camera, dan Renderer.
- Scene: Ini ibarat panggung atau dunia tempat objek 3D kita akan ditampilkan.
- Camera: Camera itu ibarat mata kita yang melihat ke Scene. Kita bisa atur posisi dan arah camera sesuai kebutuhan.
- Renderer: Nah, si Renderer ini yang bertugas menggambar Scene yang dilihat oleh Camera ke kanvas WebGL.
Contohnya gini nih:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
Nah, di TresJS juga kurang lebih sama, cuma lebih gampang aja tinggal impar import set masukin ke props. TresJS ini kayak ORM di SQL, kita bisa pakai modul yang mereka buat atau juga bisa pakai perintah raw threejs-nya.
Kamera dan Pengaturannya
Di ThreeJS, kita bisa atur kamera dengan properti kayak fovy (field of view), aspect (aspek rasio), near (jarak terdekat), dan far (jarak terjauh). Ini ngebantu kita buat ngatur perspektif dan batas pandang kamera.
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.set(0, 0, 5);
Gerak Kamera
kita pasti pernah nonton film atau video yang bikin kita terpukau sama gerakan kameranya. Nah, di dunia 3D, kita juga bisa bikin efek yang serupa!
Misalnya, kita bisa bikin efek “dolly zoom” kayak di film-film Alfred Hitchcock. Caranya, kita gerakin kamera maju atau mundur sambil ngatur field of view (FOV) kamera. Hasilnya, objek utama akan tetap di tengah frame, tapi latar belakangnya seolah-olah “menjauh” atau “mendekat”.
Geometry + Material = Mesh
Kayak HTML dan CSS yang jadi webpage, di ThreeJS, Geometry dan Material itu jadi Mesh. Geometry itu bentuk 3D-nya, sedangkan Material itu tampilan atau teksturnya. Kalau digabungin, tada! Jadilah Mesh/Objek Jadi yang bisa ditampilin di Scene.
Tekstur dan Material
Tekstur itu ibarat kulit yang ngebungkus objek 3D kita. Bayangkan kita lagi bikin model apel. Nah, biar apelnya keliatan realistis, kita bisa kasih tekstur yang ngegambarin kulit apel, lengkap sama pori-pori dan gradasi warnanya.
Di ThreeJS, kita bisa load tekstur dari file gambar kayak JPG atau PNG. Terus, tekstur itu bisa kita pasang ke Material objek kita. Ada berbagai jenis Material yang bisa dipake, tergantung efek yang kita mau.
Misalnya, kita bisa pake MeshBasicMaterial buat ngasih warna solid atau tekstur sederhana. Atau, kita bisa pake MeshPhongMaterial yang bisa ngasih efek kilap dan refleksi cahaya yang lebih realistis.
Contohnya gini:
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
// Cube punya bentuk <geometry> dengan <material> ini
scene.add(cube);
Geometry Lainnya
Selain BoxGeometry, ThreeJS juga nyediain banyak bentuk 3D lainnya lho. Ada SphereGeometry buat bikin bola, CylinderGeometry buat tabung, TorusGeometry buat donat, dan masih banyak lagi. Tinggal pilih sesuai kebutuhan aja.
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
Gerakin Ruang dengan Orbit Controls
Bosen liat objek 3D dari satu sisi doang, kita bisa pake Orbit Controls. Ini memungkinkan kita buat gerakin ruang 3D pake mouse. Tinggal klik, tahan, geser deh!
const controls = new OrbitControls(camera, renderer.domElement);
Helper untuk Melihat Kondisi
Kadang kita pengen liat kondisi benda di Scene, entah itu posisinya, rotasinya, atau skalanya. Nah, buat bantuin kita, ada yang namanya Helper. Ini ibarat kacamata yang bisa nunjukin informasi tambahan tentang objek 3D kita.
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
Cahaya dalam Canvas
Buat bikin adegan 3D yang realistis, kita butuh cahaya. Ada beberapa jenis cahaya yang bisa kita pake, tergantung efek yang kita mau.
- Ambient Light: Cahaya yang terpantul ke segala arah, bikin objek 3D terang merata.
- Directional Light: Cahaya yang bersinar dari arah tertentu, kayak cahaya matahari.
- Point Light: Cahaya yang bersinar ke segala arah dari satu titik koordinat.
Cahaya dalam Dunia Nyata
Coba perhatikan ruangan tempat kita berada sekarang. Cahaya yang masuk ke ruangan itu bisa berasal dari berbagai sumber, seperti matahari, lampu, atau bahkan layar gadget yang kita pegang. Nah, di dunia 3D, kita juga bisa mengatur sumber cahaya seperti itu.
Misalnya, kalau kita bikin adegan outdoor, kita bisa pake Directional Light yang arahnya dari atas ke bawah, biar kayak cahaya matahari. Terus, kita bisa tambahin Ambient Light buat ngasih efek cahaya yang terpantul dari langit atau benda-benda di sekitar.
Kalau kita bikin adegan indoor, kita bisa pake Point Light buat niru cahaya dari lampu di langit-langit atau lampu meja. Posisi dan intensitas cahayanya bisa kita atur sesuai kebutuhan.
Contohnya gini:
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
const pointLight = new THREE.PointLight(0xff0000, 1, 100);
pointLight.position.set(0, 0, 5);
scene.add(pointLight);
Optimasi Performa
Bikin adegan 3D yang kompleks itu seru, tapi jangan lupa mikirin performa juga ya. Kalau adegan kita terlalu berat, nanti malah bikin website kita lemot atau hang.
Salah satu trik optimasi yang bisa dipake adalah “geometry merging”. Jadi, kalau kita punya banyak objek yang bentuknya sama, misalnya pohon di hutan, kita bisa gabungin geometry-nya jadi satu. Hasilnya, jumlah draw call ke GPU berkurang, dan performa pun meningkat.
Trik lainnya adalah pake “Level of Detail” (LOD). Jadi, objek yang jauh dari kamera, kita kasih versi geometry yang lebih simpel. Sedangkan objek yang dekat kamera, kita kasih versi yang lebih detail. Dengan gitu, kita bisa ngurangin beban rendering tanpa ngorbanin kualitas visual.
Post-processing
Terakhir, buat nambahin sentuhan akhir yang ciamik, kita bisa pake efek post-processing. Ini ibarat kita ngedit foto atau video setelah diambil, biar makin kece.
Contohnya, kita bisa nambahin efek bloom yang bikin objek terang jadi “bersinar”. Atau, kita bisa pake efek depth of field buat ngasih efek blur pada objek yang jauh dari fokus kamera.
Efek-efek ini bisa kita bikin dengan bantuan library kayak THREE.EffectComposer atau THREE.PostProcessing. Tinggal tambahin aja ke alur rendering kita, dan voila! Adegan 3D kita jadi makin memukau.
Nah, itu dia penjelasan lengkap tentang ThreeJS dan TresJS, mulai dari konsep dasar sampai teknik-teknik yang lebih advanced. Semoga artikel ini bisa jadi bekal awal buat kita yang mau mulai petualangan di dunia 3D web.
Inget ya, dalam dunia 3D, kreativitas dan eksperimen itu adalah kunci. Jadi, jangan ragu buat coba-coba teknik baru dan gabungin efek-efek yang unik. Siapa tahu, kita bisa jadi pionir tren visual baru di web!
Ini catatan belajarku, sekarang lagi mencoba ngulik lebih jauh tentang ThreeJS dan Gasp biar design sense makin mantap.
Semangat Semangat hehehehe