Learning Timeline
Key Insights
Visualization Display Tips
If you cannot see all the elements or notes you have created, make sure to 'Zoom out'. Sometimes the scale of the AI-generated 3D visualization is larger than the default size of your viewer window.
Functionality Check (Play Test)
Always click 'Play' after clicking 'Run'. 'Run' only builds the environment, while 'Play' is required to verify if the animation and timeline notes are moving in sync.
Prompts
Image to 3D Visualization Code
Target:
Gemini 3.1 Pro
Analyze this image and generate the necessary code for an interactive 3D visualization. Include a timeline feature where I can manually add notes and elements that sync with the animation. Ensure the output is compatible with a web-based interactive runner.
Step by Step
Process for Generating Interactive 3D Animations
- Upload your source image into the Gemini 3.1 Pro interface.
- Enter a specific prompt to generate 3D visualization code (such as Three.js or a Python script) based on that image.
- Open the 'Interactive Viewer' interface or a code editor that supports timeline functionality.
- Use your cursor to 'drag' and draw notes or additional elements on the timeline section within the interface.
- Click the 'Run' button located at the top to process the code and your note inputs.
- Click the 'Play' button to run the 3D animation and ensure the code is working correctly.
- Use the 'Zoom out' function on the display screen to view all notes and the visualization structure if the view is too zoomed in.
