Akses ke aplikasi dikunci
Untuk mendapatkan akses ke tutorial 3D ini, Anda harus terlebih dahulu berlangganan kanal YouTube kami.
Rencana Real-time: Website 3D dengan Gemini
Lupakan generator prompt. Ini adalah rencana interaktif lengkap, langkah demi langkah. Dari chat kosong hingga pengalaman 3D interaktif – hanya dengan percakapan dengan kecerdasan buatan secara real-time.
Langkah 1: Menyiapkan lingkungan
Anda tidak perlu menginstal apa pun di komputer. Seluruh proses berjalan langsung di peramban. 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 menetapkan fondasi teknis (Three.js dari CDN, semuanya dalam satu file). Salin teks ini dan tempelkan ke Gemini:
Kamu adalah 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 objek 3D berputar di tengah (TorusKnot atau Icosahedron). 2. Impor Three.js dan OrbitControls melalui tautan CDN (unpkg atau cdnjs) di dalam tag script. 3. Harus berupa "single file" – semuanya dalam satu potong kode, tanpa import maps. 4. Jangan gunakan model eksternal (GLTF) atau tekstur (JPG/PNG). Semuanya harus dibuat secara prosedural di dalam kode (MeshStandardMaterial, pencahayaan, warna). 5. Tambahkan pencahayaan titik (PointLight) dan bayangan halus. 6. Atur latar belakang ke warna yang sangat gelap.
Langkah 3: Menjalankan dan memeriksa
Begitu Gemini menghasilkan kode, salin dari kanan atas kotak kode. Buka tab kedua (misalnya CodePen) dan tempel seluruh kode HANYA ke kolom HTML (biarkan kolom CSS dan JS kosong, kode kita sudah berisi semuanya).
Tip: Anda akan langsung melihat objek 3D yang berputar. Coba klik dan seret dengan mouse – berkat OrbitControls Anda dapat memutarnya!
Langkah 4: Iterasi secara real-time
Sekarang kerja nyata secara real-time dimulai. Kembali ke Gemini. Tidak perlu menulis kode baru atau mengirimkan kode lama (ia mengingatnya). Cukup mengobrol dan menambahkan permintaan sedikit demi sedikit. Coba kirim pesan-pesan berikut secara bertahap:
Ini sudah bagus. Sekarang ubah material objek dari warna penuh menjadi model "Wireframe" bercahaya (model jala) dengan warna neon biru dan merah muda.
Hebat. Sekarang tambahkan ke latar belakang scene sebuah sistem partikel yang berputar perlahan (Points dan PointsMaterial) yang akan mensimulasikan bintang-bintang di luar angkasa.
Bagus sekali. Sekarang buat supaya ketika saya menggerakkan mouse, warna lampu berubah secara halus berdasarkan posisi kursor di layar.
Langkah 5: Menyelesaikan masalah (Debugging)
Saat mengedit kode secara real-time, AI terkadang membuat kesalahan dan di CodePen Anda hanya akan melihat layar hitam atau putih. Anda tidak perlu mengerti 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 pastikan kamera tidak berada di dalam objek. Coba perbaiki dan kirimkan seluruh versi yang sudah diperbaiki.
Selesai! Menyimpan proyek
Begitu Anda 100% puas dengan hasilnya, salin kode terakhir yang berfungsi dari CodePen. Di Windows buka Notepad atau di Mac TextEdit, tempel kodenya dan simpan file sebagai 'muj_3D_web.html'. Selesai! Anda sekarang memiliki aplikasi 3D sendiri.