Three.js Setup

Three.js Setup Three.js adalah library JavaScript yang membuat pembuatan grafik 3D di web menjadi jauh lebih mudah. Three.js membungkus WebGL dengan API yang…

Three.js adalah library JavaScript yang membuat pembuatan grafik 3D di web menjadi jauh lebih mudah. Three.js membungkus WebGL dengan API yang intuitif.

Instalasi

# Dengan npm
npm install three

# Atau gunakan CDN
# <script type="importmap">
# {
#   "imports": {
#     "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
#     "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
#   }
# }
# </script>

Tiga Komponen Utama

Setiap aplikasi Three.js membutuhkan 3 hal: Scene, Camera, dan Renderer.

1. Scene — "Panggung"

Scene adalah container untuk semua objek 3D, cahaya, dan kamera:

import * as THREE from "three";

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e);

2. Camera — "Mata"

Camera menentukan dari mana dan bagaimana kita melihat scene:

const camera = new THREE.PerspectiveCamera(
  75,                                    // FOV (field of view) dalam derajat
  window.innerWidth / window.innerHeight, // aspect ratio
  0.1,                                   // near clipping plane
  1000                                   // far clipping plane
);

camera.position.z = 5; // mundurkan kamera agar bisa melihat objek

PerspectiveCamera mensimulasikan penglihatan manusia — objek jauh terlihat lebih kecil (perspektif). Ada juga OrthographicCamera yang tidak punya perspektif (seperti blueprint).

3. Renderer — "Kanvas"

Renderer menggambar scene ke layar:

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

Setup Lengkap Minimal

import * as THREE from "three";

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

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

// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Tambah objek — kubus sederhana
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x3498db });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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

OrbitControls — Kontrol Kamera dengan Mouse

OrbitControls memungkinkan user memutar, zoom, dan pan kamera:

import { OrbitControls } from "three/addons/controls/OrbitControls.js";

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;  // gerakan halus
controls.dampingFactor = 0.05;
controls.enableZoom = true;
controls.autoRotate = false;

// Jangan lupa update di animation loop!
function animate() {
  requestAnimationFrame(animate);
  controls.update(); // PENTING!
  renderer.render(scene, camera);
}
animate();

Handle Window Resize

Agar 3D scene responsif saat window di-resize:

window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

Axes Helper & Grid Helper

Untuk debugging dan orientasi:

// Sumbu X (merah), Y (hijau), Z (biru)
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// Grid di lantai
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

Template Project

Struktur folder yang direkomendasikan:

project/
  index.html
  style.css
  main.js
  package.json

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script type="module" src="main.js"></script>
</body>
</html>

Sekarang kamu sudah punya fondasi Three.js! Di pelajaran selanjutnya, kita akan menambahkan geometri, material, dan pencahayaan.

Three.js Setup — Creative Web