Search

Pengenalan dan Memulai Membuat Project dengan Three.js

Ibnu Ahmad Fauzi March 11, 2025
FAUZIDLEWARE - Three.js adalah pustaka JavaScript berbasis WebGL yang digunakan untuk membuat dan merender grafik 3D di dalam browser. Dengan Three.js, kamu bisa membuat objek 3D, menambahkan pencahayaan, tekstur, animasi, dan efek khusus tanpa perlu menulis kode WebGL yang kompleks.


Fitur utama Three.js:
  • Memungkinkan grafik 3D yang lebih kompleks dan realistis langsung di browser.
  • Bisa menggunakan perspektif atau ortografik untuk tampilan yang berbeda.
  • Menyediakan berbagai material dan efek untuk meningkatkan visualisasi objek.
  • Bisa memuat model dari format seperti GLTF, OBJ, FBX, dan lainnya.
  • Bisa berinteraksi dengan objek 3D menggunakan mouse atau input lainnya.
  • Dan masih banyak lainnya.

Gambar: website Three.js


Langkah Awal Belajar Three.js

Persiapan project

Buat file dengan nama index.html lalu isi dengan kode berkut

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js Pertama</title>
  </head>
  <body>
    <script type="module">
      import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.min.js";

      // 1. Buat scene
      const scene = new THREE.Scene();

      // 2. Buat kamera
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      camera.position.z = 5;

      // 3. Buat renderer
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // 4. Buat objek (Kubus)
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      // 5. Render loop
      function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>


Lalu jalankan file tersebut dengan extensions Live Server yang ada di code editor Visual Studio Code atau bisa langsung jalankan file index.html

Gambar: hasil render Three.js

Secara sederhana, yang sudah kita buat di atas adalah:

  • Membuat scene sebagai dunia 3D
  • Menambahkan kamera agar kita bisa melihat objek
  • Membuat renderer untuk menampilkan hasil di layar
  • Membuat kubus 3D dan menambahkannya ke scene
  • Menggunakan loop animasi agar objek bisa bergerak


Penjelasan Masing-Masing Kode

Menyertakan Three.js ke dalam project

import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.min.js';

Kode di atas digunakan untuk melakukan import Three.js menggunakan CDN. 

"*" artinya mengambil seluruh modul, dan menggunakan karakter "THREE" sebagai inisialisasi yang digunakan ke dalam pemakaian kode.

Membuat scene

const scene = new THREE.Scene();

Scene adalah tempat di mana semua objek 3D berada.

Membuat kamera

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
 

  • Menggunakan kamera perspektif dengan sudut pandang 75 derajat.
  • window.innerWidth / window.innerHeight menyesuaikan rasio aspek dengan ukuran layar.
  • 0.1, 1000 menentukan batas near dan far dari kamera.
  • camera.position.z = 5 mengatur posisi kamera agar lebih jauh dari titik pusat, sehingga objek terlihat.

Membuat renderer

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

  • WebGLRenderer adalah engine yang merender grafik 3D ke dalam canvas HTML5.
  • setSize(window.innerWidth, window.innerHeight) menyesuaikan ukuran canvas sesuai dengan layar.
  • document.body.appendChild(renderer.domElement) menambahkan canvas ke halaman HTML agar tampilan terlihat.

Membuat object 3D (kubus)

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

  • BoxGeometry() membuat objek berbentuk kubus.
  • MeshBasicMaterial({ color: 0x00ff00 }) memberi warna hijau pada kubus.
  • Mesh(geometry, material) menggabungkan bentuk dan material menjadi satu objek.
  • scene.add(cube) menambahkan kubus ke dalam scene agar terlihat.

Animasi dan perulangan render

function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();

  • requestAnimationFrame(animate) menjalankan fungsi animate berulang-ulang, menciptakan animasi yang mulus.
  • cube.rotation.x += 0.01 & cube.rotation.y += 0.01 membuat kubus berputar di sumbu X dan Y.
  • renderer.render(scene, camera) menggambar ulang scene setiap frame agar animasi berjalan.



Kesimpulan

Kode tersebut akan membuat sebuah kubus hijau 3D yang berputar di layar. Hasilnya dapat dijalankan langsung di browser tanpa perlu server khusus. Setelah belajar pendahuluan dari Three.js pada artikel ini, kita bisa melanjutkan ke level lebih lanjut seperti mempelajari pencahayaan, tekstur, atau interaksi dengan mouse.

Tags
Ibnu Ahmad Fauzi

Posted by Ibnu Ahmad Fauzi

Post a Comment

0 Comments