DIPERBARUI: 2026-11-06

[B2-M4]Mahir⏱ 45 Mnt Baca + 70 Mnt Praktik

Pengantar 3D WebGL di Browser: Three.js Scene, Kamera & GLTF

Merakit Kanvas 3D Interaktif, Mengatur Pencahayaan & Optimasi Offscreen Pause

BAGIKAN MODUL:Dukung rekan developer & tim Anda

💬WHATSAPP inLINKEDIN 𝕏POST

[KONTRAK HASIL BELAJAR // B2-M4]Standar Kompetensi Industri

⏱ 45 Mnt Baca•⚡ 70 Mnt Praktik•Lulus: ≥ 80/100 Poin

01. Target Pembelajar & Prasyarat

Web developer yang ingin menambahkan dimensi 3D ke dalam website.

Prasyarat:Modul B2-M1: Model Mental React 19

02. Kompetensi Konseptual (Level 1–2)

✓Menjelaskan koordinat ruang 3D (X, Y, Z) dan frustum kamera perspektif.

03. Kompetensi Praktis & Artefak Nyata (Level 3–4)

✓Membuat scene Three.js yang memuat model GLTF lokal dan berhenti merender saat keluar dari viewport.

Artefak yang Dibangun: Kanvas 3D mandiri `minimal-three-scene.html`.

04. Aplikasi Nyata & Verifikasi

Penerapan Industri: Komponen ruang kerja 3D Hermes (#hermes-3d-canvas) di Z-Automation.

Metode Verifikasi: Memeriksa penggunaan GPU di Chrome Task Manager sebelum dan sesudah scroll keluar viewport.

[BAGIAN 01 // MASALAH & URGENSI ARSITEKTURAL]

Mengapa Subjek Ini Krusial dalam Rekayasa Nyata?

Pelajari fondasi grafika komputer di browser: Scene, PerspectiveCamera, WebGLRenderer, pemuatan model .glb lokal, dan pembersihan memori GPU.

Dalam lingkungan produksi, kegagalan memahami batas-batas arsitektur sistem sering kali menyebabkan bug yang sulit dilacak, pemborosan biaya komputasi, atau antarmuka yang lambat bagi pengguna.

[BAGIAN 02 // MEKANISME DI BALIK LAYAR]

Bagaimana Sistem Sebenarnya Bekerja di Tingkat Protokol

Tritunggal Three.js: Scene, Camera, Renderer

Untuk merender dunia 3D, Anda membutuhkan tiga pilar: 1) Scene (panggung tempat objek diletakkan), 2) Camera (mata virtual yang melihat panggung), dan 3) Renderer (mesin yang menerjemahkan geometri dan cahaya menjadi piksel pada elemen `<canvas>`).

[DIAGRAM TEKNIS SVG INTERAKTIF // DIAG-02]

Alur Arsitektur Sistem Otonom & Runtime

LANGKAH 1 DARI 4

ENTITAS AKTIF:User -> Sistem

Pesan bahasa alami diterima melalui antarmuka web atau webhook chat.

[LIVE PAYLOAD INSPECTOR]JSON 2026

{
  "input": "Berapa estimasi biaya pembuatan landing page bisnis?"
}

[BAGIAN 03 // MATRIKS KESALAHPAHAMAN]

Koreksi Asumsi Umum vs Realitas Rekayasa

×ASUMSI KELIRU

“Menampilkan objek 3D di browser pasti membuat baterai laptop boros dan berat.”

✓REALITAS SISTEM

Dengan membatasi devicePixelRatio ke 1.75 dan mematikan render saat elemen keluar dari layar (offscreen pause), WebGL sangat efisien.

[BAGIAN 04 // LABORATORIUM PRAKTIS & KODE]

Implementasi Langkah-demi-Langkah

Hasil akhir yang diharapkan: Kanvas Three.js yang merender kubus berputar dan berhenti saat di-scroll keluar.

STRUKTUR PROYEK DIREKOMENDASIKAN:

lab-b2-m4/
└── three-scene.html

1Membuat Scene Three.js Teroptimasi

Inisialisasi renderer dengan pembatasan pixel ratio.

three-scene.html•html

✓Tested Successfully

LINGKUNGAN TERUJI: Three.js r18732 BARIS KODE

1	<!DOCTYPE html>
2	<html>
3	<head><style>body { margin: 0; background: #07080A; } canvas { display: block; }</style></head>
4	<body>
5	<canvas id="c"></canvas>
6	<script type="module">
7	import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.187.0/build/three.module.js';
8
9	const canvas = document.querySelector('#c');
10	const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
11	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.75));
12	renderer.setSize(window.innerWidth, window.innerHeight);
13
14	const scene = new THREE.Scene();
15	const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
16	camera.position.z = 4;
17
18	const geometry = new THREE.BoxGeometry();
19	const material = new THREE.MeshBasicMaterial({ color: 0x1A2FFB, wireframe: true });
20	const cube = new THREE.Mesh(geometry, material);
21	scene.add(cube);
22
23	function animate() {
24	requestAnimationFrame(animate);
25	cube.rotation.x += 0.01;
26	cube.rotation.y += 0.01;
27	renderer.render(scene, camera);
28	}
29	animate();
30	</script>
31	</body>
32	</html>

KEPUTUSAN ARSITEKTURAL UTAMA:

• Membatasi setPixelRatio(Math.min(devicePixelRatio, 1.75)): Mencegah rendering di layar 3x/4x Retina yang membakar GPU tanpa peningkatan visual yang berarti.

PERINTAH EKSEKUSI TERMINAL:

$ Buka file three-scene.html di browser.

OUTPUT YANG DIHARAPKAN:

Kubus kawat biru berputar di atas latar obsidian.

[BAGIAN 05 // PANDUAN TROUBLESHOOTING & TANTANGAN]

Mengantisipasi Masalah Umum & Tantangan Ekstensi

Pesan Error: Layar hitam pekat

Penyebab: Kamera berada di dalam objek

Solusi Eksak: Tarik posisi camera.position.z menjauh.

⚡ TANTANGAN EKSTENSI MANDIRI:

Tambahkan IntersectionObserver untuk memanggil cancelAnimationFrame saat canvas tidak terlihat.

[RUBRIK EVALUASI KOMPETENSI 100 POIN // B2-M4]

Uji Kompetensi Mandiri & Verifikasi Hasil

Standar kelulusan Z-Automation mewajibkan skor minimum 80 / 100 Poin dengan komponen Implementasi Praktis minimal 21 / 35 Poin (60%). Jawab soal diagnostik dan centang hasil pengujian praktis Anda.

BAGIAN A // PERTANYAAN DIAGNOSTIK KONSEPTUAL & TEKNIS (40 POIN)

01.Mengapa kita harus membatasi 'renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.75))'?

Untuk mencegah GPU bekerja 4x–9x lipat lebih berat pada layar smartphone modern resolusi ultra-tinggi.

Karena Three.js hanya mendukung layar hitam putih.

BAGIAN B // DAFTAR PERIKSA HASIL IMPLEMENTASI PRAKTIS (35 POIN — MIN. 21 POIN)

Centang item di bawah ini hanya jika Anda telah menjalankan kode di komputer Anda dan mengamati output yang benar:

Kubus berputar stabil di 60 FPS+25 Poin

← MODUL SEBELUMNYA[B2-M3] Koreografi Scroll & Motion Terukur dengan GSAP dan Lenis MODUL SELANJUTNYA →[B3-M1] Merancang REST API, Route Handlers & Validasi Skema Data