Learning Timeline
Key Insights
The Advantage of Multimodal Input
Gemini has the unique ability to 'see' videos. If you have footage of a complex physics simulation, you can upload that video and instruct Gemini to 'Replicate the physics and lighting seen in this video' without needing to write out complex technical details.
AI Code Debugging Tips
If the simulation doesn't appear, make sure to check the 'Console' in your browser (F12). Sometimes Gemini uses outdated Three.js CDN links; you can ask the AI to 'Update the Three.js CDN link to the latest version' if the graphics fail to render.
Prompts
3D Lighting & Reflection Simulation Generation
Target:
Gemini 1.5 Pro / 3.1 Pro
Generate a complete HTML file using Three.js that creates an interactive 3D scene. Include a metallic sphere with a highly reflective surface (mirror-like) and a textured floor. Add a point light that follows the user's mouse cursor in real-time. The sphere should exhibit dynamic reflections based on its surroundings. Include a side panel (dat.GUI) to allow the user to adjust the light intensity, sphere metalness, and roughness in real-time. Ensure the physics and shadows are realistic.
Step by Step
Building Interactive 3D Physics Simulations with Gemini
- Open the Google AI Studio interface and select the Gemini 1.5 Pro or Gemini 3.1 Pro model from the dropdown menu on the right.
- Upload a reference video (if available) or provide a visual description of the physics simulation you want to create in the prompt field.
- Type specific instructions to build the simulation using a JavaScript library like Three.js for 3D rendering.
- Specify requirements for dynamic lighting and material properties (such as reflection or roughness) that need to change in real-time.
- Click the 'Run' or 'Generate' button and wait for the AI to generate the complete source code (HTML, CSS, and JavaScript).
- Copy the code and paste it into a code editor like VS Code or an online platform like CodePen or Replit.
- Launch the simulation preview in your browser and try interacting with the 3D elements (such as clicking or dragging) to ensure the physics effects and reflections are working correctly.
- If the output needs adjustments, provide a follow-up prompt to tune the light intensity or material reflection quality.
