Mengenal Three.js: Membuat Tampilan 3D di Website dan Contoh Implementasi Sederhana
Tampilan website saat ini tidak lagi hanya soal teks dan gambar statis. Banyak website modern mulai menggunakan efek visual interaktif untuk memberikan pengalaman yang lebih menarik. Salah satu teknologi yang sering digunakan untuk kebutuhan ini adalah Three.js.
Three.js memungkinkan developer membuat grafik 3D langsung di browser menggunakan JavaScript. Tanpa perlu software berat, pengguna bisa melihat objek 3D, animasi, dan efek visual langsung dari halaman web.
Apa Itu Three.js
Three.js adalah library JavaScript open source yang digunakan untuk membuat grafik 3D berbasis WebGL. Library ini membantu developer berinteraksi dengan WebGL menggunakan cara yang lebih sederhana dan mudah dipahami.
Tanpa Three.js, pembuatan objek 3D di browser akan sangat kompleks. Dengan Three.js, developer cukup menulis JavaScript biasa untuk membuat scene, kamera, cahaya, dan objek 3D.
Sejarah Singkat Three.js
Three.js pertama kali dikembangkan oleh Ricardo Cabello (Mr.doob). Library ini menjadi populer karena:
-
Open source
-
Dokumentasi cukup lengkap
-
Digunakan oleh banyak website besar
-
Didukung komunitas aktif
Hingga sekarang, Three.js masih terus dikembangkan dan digunakan di berbagai proyek web modern.
Fungsi Nyata Three.js dalam Website
Three.js tidak hanya untuk hiasan. Dalam praktik nyata, Three.js digunakan untuk:
-
Hero section website interaktif
-
Visualisasi produk 3D (contoh: sepatu, mobil, gadget)
-
Landing page startup teknologi
-
Website portofolio kreatif
-
Dashboard data dengan visual 3D
-
Simulasi dan edukasi berbasis web
Penggunaan Three.js yang tepat dapat meningkatkan daya tarik website tanpa harus membuat aplikasi desktop.
Contoh Implementasi Sederhana Three.js
1. Menambahkan Library Three.js
Gunakan CDN agar mudah dicoba.
<script src="https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.min.js"></script>
2. Membuat Struktur Dasar HTML
<body> <script src="script.js"></script> </body>
3. Contoh Kode JavaScript Dasar (script.js)
// Membuat scene
const scene = new THREE.Scene();
// Membuat kamera
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// Membuat renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Membuat objek kubus
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Mengatur posisi kamera
camera.position.z = 5;
// Animasi sederhana
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
4. Hasil yang Didapat
Dengan kode di atas:
-
Website menampilkan kubus 3D
-
Kubus berputar secara otomatis
-
Animasi berjalan langsung di browser
-
Tidak membutuhkan plugin tambahan
Ini adalah contoh paling dasar, namun sudah cukup untuk memahami konsep Three.js.
Kelebihan Three.js
Beberapa keunggulan Three.js antara lain:
-
Bisa membuat tampilan 3D langsung di browser
-
Banyak contoh dan dokumentasi
-
Cocok untuk website modern
-
Bisa dikombinasikan dengan React, Vue, atau framework lain
-
Mendukung animasi dan interaksi pengguna
Kekurangan Three.js
Walaupun powerful, Three.js juga memiliki keterbatasan:
-
Membutuhkan pemahaman dasar matematika 3D
-
Bisa berat jika tidak dioptimasi
-
Tidak cocok untuk semua jenis website
Karena itu, Three.js sebaiknya digunakan jika memang dibutuhkan secara visual.
Kesimpulan
Three.js adalah solusi kuat untuk menghadirkan grafik dan animasi 3D di website. Dengan implementasi yang tepat, Three.js bisa meningkatkan kesan profesional dan interaktif pada tampilan web. Untuk efek visual sederhana hingga kompleks, Three.js masih menjadi pilihan utama di dunia web modern.
