Tutorial Three.js: Buat Scene 3D Interaktif dan Deploy ke Vercel

Three.js adalah library JavaScript populer untuk membuat grafis 3D di browser menggunakan WebGL. Artikel ini membahas cara membuat scene 3D sederhana, menambahkan kontrol kamera, lalu mendeploy hasilnya ke Vercel agar bisa dibuka dari mana saja.

Panduan ini cocok untuk pengembang yang sudah familiar dengan HTML, CSS, dan JavaScript dasar, serta ingin mulai bereksperimen dengan 3D di web.

Tahap	Yang Akan Dibuat
1	Setup project Three.js
2	Scene, kamera, renderer, dan objek 3D
3	Animasi dan OrbitControls
4	Deploy ke Vercel

Persiapan

Pastikan Anda sudah menginstal Node.js (disarankan versi LTS). Buat folder project baru dan inisialisasi:

mkdir threejs-demo && cd threejs-demo npm init -y npm install three npm install --save-dev vite

Vite digunakan sebagai bundler agar development lebih cepat. Tambahkan script di package.json:

"scripts": {   "dev": "vite",   "build": "vite build",   "preview": "vite preview" }

Struktur File Dasar

Buat file index.html di root project:

        Three.js Demo      

Lalu buat file main.js:

import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; const scene = new THREE.Scene(); scene.background = new THREE.Color(0x111111); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(1.5, 1.5, 1.5); const material = new THREE.MeshStandardMaterial({ color: 0x00aaff }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(5, 5, 5); scene.add(light); scene.add(new THREE.AmbientLight(0x404040)); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; function animate() {   requestAnimationFrame(animate);   cube.rotation.x += 0.01;   cube.rotation.y += 0.01;   controls.update();   renderer.render(scene, camera); } animate(); window.addEventListener('resize', () => {   camera.aspect = window.innerWidth / window.innerHeight;   camera.updateProjectionMatrix();   renderer.setSize(window.innerWidth, window.innerHeight); });

Menjalankan di Lokal

Jalankan perintah:

npm run dev

Buka URL yang muncul di terminal (biasanya http://localhost:5173). Anda akan melihat kubus biru yang berputar. Gunakan mouse untuk mengorbit kamera berkat OrbitControls.

Menambahkan Texture atau Model (Opsional)

Untuk memuat texture, letakkan file gambar di folder public/ lalu gunakan THREE.TextureLoader. Untuk model 3D (GLTF/GLB), gunakan GLTFLoader dari three/examples/jsm/loaders/GLTFLoader.js.

Contoh singkat memuat GLTF:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; const loader = new GLTFLoader(); loader.load('/model.glb', (gltf) => {   scene.add(gltf.scene); });

Build untuk Produksi

Jalankan:

npm run build

Hasil build akan berada di folder dist/. Pastikan tidak ada error sebelum lanjut deploy.

Deploy ke Vercel

Ada dua cara mudah:

1. Via Vercel CLI

npm install -g vercel vercel login vercel

Ikuti prompt. Untuk production: vercel --prod.

2. Via GitHub + Dashboard Vercel

• Push project ke repository GitHub.
• Login ke vercel.com, klik “Add New Project”, pilih repository.
• Framework Preset biarkan otomatis (Vite), Root Directory kosong, Build Command: npm run build, Output Directory: dist.
• Klik Deploy.

Setelah selesai, Vercel akan memberikan URL publik (contoh: threejs-demo.vercel.app). Setiap push ke branch utama akan memicu deploy ulang secara otomatis.

Tips Optimasi

• Gunakan renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) agar performa lebih baik di layar high-DPI.
• Hindari terlalu banyak light dan objek berpoligons tinggi di device mobile.
• Pertimbangkan compression untuk model GLTF (draco) jika file besar.
• Aktifkan damping pada OrbitControls untuk pengalaman kamera yang lebih halus.

Kesimpulan

Dengan Three.js + Vite, Anda bisa membuat scene 3D interaktif relatif cepat. Vercel mempermudah proses hosting tanpa perlu mengelola server sendiri. Dari kubus sederhana, Anda bisa mengembangkan ke portfolio 3D, product configurator, visualisasi data, hingga pengalaman web immersive.

Jika Anda membutuhkan bantuan mengembangkan aplikasi 3D, integrasi Three.js ke project existing, optimasi performa WebGL, atau deployment yang lebih kompleks, tim Clovertechno siap membantu. Kunjungi clovertechno.id untuk konsultasi jasa pembuatan software, solusi AI, dan pengembangan web modern sesuai kebutuhan bisnis Anda.