Rencana Real-time: Web 3D dengan Gemini
Lupakan generator prompt. Berikut ini rencana interaktif lengkap, langkah demi langkah. Dari chat kosong hingga pengalaman 3D interaktif – hanya dengan percakapan dengan kecerdasan buatan secara real-time.
Langkah 1: Persiapan lingkungan
Anda tidak perlu menginstal apa pun di komputer. Seluruh proses akan berjalan hanya di browser. Untuk iterasi secepat mungkin, buka dua tab berdampingan:
- Buka Google Gemini gratis (gemini.google.com).
- Buka editor kode online CodePen.io atau PlayCode.io. Di sini kita akan langsung menguji kode yang dihasilkan tanpa harus membuat dan menyimpan file HTML.
Langkah 2: Master-Prompt pembuka
Prompt pertama adalah yang paling penting. Ia menentukan batasan untuk Gemini dan mengatur fondasi teknis (Three.js dari CDN, semuanya dalam satu file). Salin teks ini dan tempel ke Gemini:
Kamu adalah seorang ahli WebGL dan pustaka Three.js. Tugasmu adalah menulis kode HTML lengkap (termasuk CSS dan JS di dalamnya) untuk sebuah scene 3D yang berfungsi. Persyaratan: 1. Buat sebuah objek 3D berputar (TorusKnot atau Icosahedron) di tengah. 2. Impor Three.js dan OrbitControls melalui tautan CDN (unpkg atau cdnjs) di dalam tag script. 3. Harus berupa 'Single file' – semuanya dalam satu potongan kode, tanpa import maps. 4. Jangan gunakan model eksternal (GLTF) atau tekstur (JPG/PNG). Semua dibuat secara prosedural di dalam kode (MeshStandardMaterial, pencahayaan, warna). 5. Tambahkan lampu titik (PointLight) dan bayangan halus. 6. Atur latar belakang ke warna yang sangat gelap.
Langkah 3: Menjalankan dan mengecek
Segera setelah Gemini menghasilkan kode, salin dari pojok kanan atas di kotak kode. Buka tab kedua (misalnya CodePen) dan tempel seluruh kode HANYA ke kolom HTML (biarkan kolom CSS dan JS kosong, karena kode kita sudah mencakup semuanya).
Tip: Kamu akan langsung melihat objek 3D yang berputar. Coba klik dan seret dengan mouse – berkat OrbitControls, kamu bisa memutarnya!
Langkah 4: Iterasi secara real-time
Sekarang pekerjaan nyata secara real-time dimulai. Kembali ke Gemini. Tidak perlu menulis kode baru atau mengirimkan kode lama (ia masih mengingatnya). Cukup lanjutkan mengobrol dan tambahkan permintaan satu per satu. Coba kirim pesan-pesan berikut secara bertahap:
Ini bagus sekali. Sekarang ubah material objek dari warna penuh menjadi 'Wireframe' bercahaya (model jaring) dengan warna biru dan merah muda neon.
Hebat. Sekarang tambahkan pada latar belakang scene sebuah sistem partikel yang berputar perlahan (Points dan PointsMaterial) yang mensimulasikan bintang-bintang di luar angkasa.
Sangat baik. Sekarang buat agar ketika saya menggerakkan mouse, warna lampu mulai berubah secara halus sesuai posisi kursor di layar.
Langkah 5: Mengatasi masalah (Debugging)
Saat mengubah kode secara real-time, AI kadang membuat kesalahan dan di CodePen kamu hanya akan melihat layar hitam atau putih. Kamu tidak perlu paham pemrograman, cukup jelaskan masalahnya di chat:
Kode terakhir yang kamu kirim tidak berfungsi. Layar sepenuhnya hitam dan tidak ada yang berputar. Periksa apakah kamu sudah memuat OrbitControls dengan benar dan apakah kamera tidak berada di dalam objek. Coba perbaiki dan kirimkan seluruh versi yang telah diperbaiki.
Selesai! Menyimpan proyek
Setelah kamu 100% puas dengan hasilnya, salin kode terakhir yang berfungsi dari CodePen. Di Windows, buka Notepad atau di Mac buka TextEdit, tempel kodenya dan simpan file dengan nama 'muj_3D_web.html'. Selesai! Kamu punya aplikasi 3D milikmu sendiri.