Tutorial Three.js: Panduan untuk Pemula

Three.js adalah salah satu pustaka JavaScript paling populer untuk membuat grafik 3D di peramban web. Dibangun di atas WebGL, ini menyederhanakan proses pembuatan dan tampilan grafik komputer 3D animasi di peramban web tanpa mengharuskan Anda mempelajari WebGL tingkat rendah. Baik Anda ingin membuat visualisasi interaktif, game, atau pengalaman web imersif, Three.js menyediakan alat yang Anda butuhkan untuk mewujudkan ide Anda.

Sebelum kita menyelami pengembangan Three.js, pertimbangkan untuk mencoba Apidog sebagai alternatif Postman untuk kebutuhan pengujian API Anda. Apidog menawarkan antarmuka intuitif dengan fitur canggih untuk pengembangan, pengujian, dan dokumentasi API—semua tanpa fitur berlebihan yang membuat banyak pengguna frustrasi dengan Postman. Ini adalah alat pendamping yang sangat baik saat mengembangkan aplikasi web yang berinteraksi dengan API.

button

Sekarang, mari kita mulai perjalanan kita ke Three.js!

1. Menyiapkan Lingkungan Anda

Instalasi

Ada beberapa cara untuk menyertakan Three.js dalam proyek Anda:

Opsi 1: Menggunakan npm (Disarankan)

npm install three

Kemudian impor ke dalam file JavaScript Anda:

import * as THREE from 'three';

Opsi 2: Menggunakan CDN

Tambahkan ini ke file HTML Anda:

<script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>

Opsi 3: Unduh dan sertakan secara lokal

Unduh pustaka dari situs web Three.js, dan sertakan dalam HTML Anda:

<script src="path/to/three.min.js"></script>

Struktur Proyek

Untuk proyek Three.js dasar, Anda memerlukan:

project-folder/
├── index.html
├── style.css
└── script.js

File index.html Anda harus menyertakan:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Aplikasi Three.js Saya</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. Memahami Dasar-Dasar

Three.js beroperasi pada beberapa konsep utama yang penting untuk dipahami:

Komponen Inti

Scene: Anggap ini sebagai wadah yang menampung semua objek, lampu, dan kamera Anda.
Camera: Mendefinisikan bagian mana dari pemandangan yang terlihat (sudut pandang Anda).
Renderer: Menggambar apa yang dilihat kamera ke layar Anda.
Objects (Meshes): Objek 3D dalam pemandangan Anda, biasanya terdiri dari geometri dan material.
Lights: Sumber pencahayaan untuk pemandangan Anda.

Membuat Pemandangan Pertama Anda

Berikut adalah contoh dasar untuk membuat kubus berputar:

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

// Buat kamera
const camera = new THREE.PerspectiveCamera(
    75,                                     // Bidang pandang
    window.innerWidth / window.innerHeight, // Rasio aspek
    0.1,                                    // Bidang kliping dekat
    1000                                    // Bidang kliping jauh
);
camera.position.z = 5;

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

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

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

3. Membuat Aplikasi Anda Responsif

Untuk memastikan aplikasi Three.js Anda terlihat bagus di semua perangkat, Anda perlu menangani perubahan ukuran jendela:

// Tangani perubahan ukuran jendela
window.addEventListener('resize', () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    // Perbarui renderer
    renderer.setSize(width, height);
    
    // Perbarui kamera
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

4. Menambahkan Material dan Pencahayaan

Pemandangan dasar hanyalah permulaan. Mari tingkatkan kualitas visual dengan material dan lampu:

Material

// Material standar dengan refleksi
const material = new THREE.MeshStandardMaterial({
    color: 0x0088ff,       // Warna biru
    roughness: 0.5,        // Agak mengkilap
    metalness: 0.5,        // Agak metalik
});

// Material Phong untuk permukaan mengkilap sederhana
const phongMaterial = new THREE.MeshPhongMaterial({
    color: 0xff0000,       // Warna merah
    shininess: 100,        // Sangat mengkilap
    specular: 0x111111     // Warna sorotan specular
});

Lampu

// Tambahkan cahaya ambien
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

// Tambahkan cahaya directional (seperti matahari)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// Tambahkan cahaya titik (seperti bola lampu)
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

5. Membuat Geometri yang Berbeda

Three.js hadir dengan banyak geometri bawaan:

// Bola
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.x = -3;
scene.add(sphere);

// Silinder
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
const cylinder = new THREE.Mesh(cylinderGeometry, material);
cylinder.position.x = 0;
scene.add(cylinder);

// Torus (donat)
const torusGeometry = new THREE.TorusGeometry(0.8, 0.3, 16, 100);
const torus = new THREE.Mesh(torusGeometry, material);
torus.position.x = 3;
scene.add(torus);

6. Membuat Teks di Three.js

Teks dapat ditambahkan ke pemandangan Anda menggunakan TextGeometry:

// Pertama, muat font
const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
    const textGeometry = new THREE.TextGeometry('Hello Three.js!', {
        font: font,
        size: 0.5,
        height: 0.1,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 5
    });
    
    const textMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 });
    const text = new THREE.Mesh(textGeometry, textMaterial);
    
    // Pusatkan teks
    textGeometry.computeBoundingBox();
    const textWidth = textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
    text.position.x = -textWidth / 2;
    
    scene.add(text);
});

7. Menggambar Garis

Anda dapat membuat garis di Three.js untuk wireframe atau visualisasi jalur:

// Buat titik untuk garis
const points = [];
points.push(new THREE.Vector3(-2, 0, 0));
points.push(new THREE.Vector3(0, 2, 0));
points.push(new THREE.Vector3(2, 0, 0));

// Buat geometri garis
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);

// Buat material
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });

// Buat garis
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

8. Interaksi dan Kontrol

Untuk memungkinkan pengguna berinteraksi dengan pemandangan 3D Anda, Anda dapat menambahkan kontrol:

// Impor OrbitControls
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Buat kontrol
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Tambahkan efek redaman halus
controls.dampingFactor = 0.05;

// Perbarui loop animasi
function animate() {
    requestAnimationFrame(animate);
    
    // Perbarui kontrol
    controls.update();
    
    renderer.render(scene, camera);
}

9. Memuat Model 3D

Anda dapat mengimpor model yang dibuat di perangkat lunak seperti Blender:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load(
    'path/to/model.gltf',
    // Dipanggil saat dimuat
    function(gltf) {
        scene.add(gltf.scene);
    },
    // Dipanggil selama pemuatan
    function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    // Dipanggil jika terjadi kesalahan
    function(error) {
        console.error('Terjadi kesalahan', error);
    }
);

10. Debugging dan Tips Kinerja

Panel Statistik

import Stats from 'three/examples/jsm/libs/stats.module.js';

const stats = new Stats();
document.body.appendChild(stats.dom);

function animate() {
    requestAnimationFrame(animate);
    stats.begin();
    
    // Kode animasi Anda di sini
    
    stats.end();
    renderer.render(scene, camera);
}

Tips Kinerja

Gunakan BufferGeometry alih-alih Geometry (yang sudah usang)
Gunakan kembali material dan geometri jika memungkinkan
Setel renderer.powerPreference = 'high-performance' untuk penggunaan GPU yang lebih baik
Gunakan Object3D.frustumCulled = true untuk menyembunyikan objek di luar tampilan kamera
Optimalkan kompleksitas model dengan menggunakan lebih sedikit poligon jika memungkinkan

Kesimpulan

Anda sekarang telah mempelajari dasar-dasar Three.js, mulai dari menyiapkan lingkungan Anda hingga membuat pemandangan 3D interaktif. Ini hanyalah permulaan—Three.js menawarkan berbagai macam fitur untuk membuat pengalaman web 3D yang menakjubkan.

Untuk memperdalam pengetahuan Anda, jelajahi dokumentasi Three.js resmi dan galeri contoh. Komunitas ini juga aktif di forum dan GitHub, menyediakan sumber daya dan dukungan untuk pengembang di semua tingkatan.

Ingat, cara terbaik untuk belajar adalah dengan bereksperimen. Mulailah dengan proyek sederhana dan secara bertahap tingkatkan ke pemandangan yang lebih kompleks. Dengan latihan dan kesabaran, Anda akan membuat pengalaman web 3D yang mengesankan dalam waktu singkat!

Selamat membuat kode dengan Three.js!

button