Learning Timeline
Key Insights
Pentingnya Semakan 'Thoughts'
Model Gemini 3 Pro akan memaparkan proses pemikirannya ('thoughts') sebelum menulis kod. Sangat penting untuk menyemak bahagian ini bagi memastikan AI 'sedar' tentang permintaan kompleks seperti 'fog' atau 'lighting sliders' sebelum ia mula menjana kod akhir.
Keupayaan Single-File Output
Kelebihan utama workflow ini ialah Gemini boleh memampatkan semua logik 3D, CSS, dan JavaScript ke dalam satu 'HTML page' ringkas, memudahkan anda, menjalankan simulasi tanpa perlu setup server yang rumit.
Prompts
Prompt Simulasi 3D Voxel
Target:
Gemini 3 Pro
Create an interactive 3D voxel simulation of the Golden Gate Bridge using Three.js. Include UI sliders to control lighting, time of day, fog density, and traffic density. Ensure there are details like water reflections, bobbing boats, and background buildings in San Francisco. Output as a single HTML file.
Step by Step
Menjana Simulasi 3D Interaktif dengan Gemini 3 Pro
- Akses konsol atau environment coding Gemini 3 Pro.
- Masukkan prompt yang meminta simulasi gaya 'voxel' menggunakan library 'Three.js'.
- Nyatakan keperluan elemen interaktif UI secara spesifik dalam prompt (contoh: minta 'sliders' untuk kawalan 'lighting', 'fog', dan 'time of day').
- Hantar prompt untuk memulakan proses penjanaan.
- Semak bahagian 'thoughts' AI semasa ia memproses untuk memastikan ia menyenaraikan setiap elemen visual (seperti pantulan air atau bangunan latar belakang).
- Tunggu sehingga Gemini menghasilkan output kod penuh dalam format 'HTML page'.
- Simpan atau copy kod tersebut ke dalam fail berformat `.html`.
- Buka fail HTML tersebut menggunakan web browser.
- Uji simulasi dengan melaraskan slider untuk melihat perubahan 'traffic density' dan cuaca secara real-time.
