Three.js Geometri & Material

Di Three.js, setiap objek 3D (Mesh) terdiri dari dua komponen: Geometry (bentuk) dan Material (tampilan permukaan).

Built-in Geometries

Three.js menyediakan banyak geometri siap pakai:

// Kubus
const box = new THREE.BoxGeometry(1, 1, 1);
// BoxGeometry(width, height, depth)

// Bola
const sphere = new THREE.SphereGeometry(0.5, 32, 32);
// SphereGeometry(radius, widthSegments, heightSegments)

// Silinder
const cylinder = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
// CylinderGeometry(radiusTop, radiusBottom, height, radialSegments)

// Kerucut
const cone = new THREE.ConeGeometry(0.5, 1, 32);

// Torus (donat)
const torus = new THREE.TorusGeometry(0.5, 0.2, 16, 100);
// TorusGeometry(radius, tube, radialSegments, tubularSegments)

// Bidang datar
const plane = new THREE.PlaneGeometry(2, 2);

// Torus Knot — bentuk keren untuk demo
const knot = new THREE.TorusKnotGeometry(0.5, 0.15, 100, 16);

Segments menentukan seberapa halus permukaan. Lebih banyak segments = lebih halus tapi lebih berat.

Materials — Tampilan Permukaan

MeshBasicMaterial — Tanpa Pencahayaan

const material = new THREE.MeshBasicMaterial({
  color: 0x3498db,
  wireframe: false,     // tampilkan sebagai rangka kawat?
  transparent: true,
  opacity: 0.8,
  side: THREE.DoubleSide  // tampilkan kedua sisi
});

MeshBasicMaterial tidak terpengaruh cahaya — selalu tampil dengan warna penuh. Cocok untuk debugging atau efek neon.

MeshStandardMaterial — Material Realistis (PBR)

const material = new THREE.MeshStandardMaterial({
  color: 0x3498db,
  roughness: 0.5,    // 0 = licin mengkilap, 1 = kasar matte
  metalness: 0.3,    // 0 = non-metal, 1 = full metal
});

MeshStandardMaterial menggunakan PBR (Physically Based Rendering) — hasilnya realistis dan terpengaruh cahaya.

MeshPhongMaterial — Specular Highlight

const material = new THREE.MeshPhongMaterial({
  color: 0x3498db,
  shininess: 100,     // seberapa mengkilap (default 30)
  specular: 0xffffff, // warna pantulan cahaya
});

Lebih ringan dari Standard tapi kurang realistis. Cocok untuk objek yang perlu highlight mengkilap.

Pencahayaan (Lighting)

Material Standard dan Phong membutuhkan cahaya untuk terlihat!

AmbientLight — Cahaya Merata

const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
// AmbientLight(color, intensity)
scene.add(ambientLight);

Menerangi semua objek secara merata dari segala arah. Tidak menghasilkan bayangan.

DirectionalLight — Cahaya Matahari

const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 10, 5);
dirLight.castShadow = true; // untuk bayangan
scene.add(dirLight);

Cahaya sejajar dari arah tertentu, seperti matahari.

PointLight — Lampu Titik

const pointLight = new THREE.PointLight(0xff6b6b, 1, 50);
// PointLight(color, intensity, distance)
pointLight.position.set(2, 3, 2);
scene.add(pointLight);

Cahaya menyebar dari satu titik ke segala arah, seperti lampu bohlam.

Texture — Gambar pada Permukaan

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("texture.jpg");

const material = new THREE.MeshStandardMaterial({
  map: texture,           // warna/gambar dasar
  normalMap: normalTex,   // detail permukaan (bump)
  roughnessMap: roughTex, // variasi kehalusan
});

Contoh Lengkap: Scene dengan Berbagai Objek

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

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

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

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

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

// Cahaya
scene.add(new THREE.AmbientLight(0xffffff, 0.3));
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 10, 5);
scene.add(dirLight);

// Kubus merah
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({ color: 0xe74c3c, roughness: 0.3 })
);
cube.position.x = -2;
scene.add(cube);

// Bola biru
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(0.7, 32, 32),
  new THREE.MeshStandardMaterial({ color: 0x3498db, metalness: 0.5 })
);
scene.add(sphere);

// Torus hijau
const torus = new THREE.Mesh(
  new THREE.TorusGeometry(0.5, 0.2, 16, 100),
  new THREE.MeshPhongMaterial({ color: 0x2ecc71, shininess: 100 })
);
torus.position.x = 2;
scene.add(torus);

// Lantai
const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(10, 10),
  new THREE.MeshStandardMaterial({ color: 0x2c3e50 })
);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -1;
scene.add(floor);

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

Dengan geometri, material, dan pencahayaan, kamu sudah bisa membuat scene 3D yang menarik!