Overview
This prompt aims to guide developers in creating a 3D simulation using HTML and JavaScript. Programmers and coding enthusiasts will benefit from the hands-on experience in 3D graphics and physics.
Prompt Overview
Purpose: This project aims to create an engaging 3D animation of bouncing balls within a rotating cube.
Audience: It is designed for programmers and developers interested in 3D graphics and physics simulations using HTML and JavaScript.
Distinctive Feature: The simulation features realistic physics, allowing the balls to bounce accurately off the cube’s surfaces.
Outcome: Users will experience a visually captivating and interactive 3D environment directly in their web browsers.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Animation & VFX, Content & Media Creation
- Techniques: Function Calling / Tool Use, Structured Output, Zero-Shot Prompting
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
- ["3D","Physics","Animation","HTML"] – "3d","physics","animation","html"
Example Variables Block
- ["3D","Physics","Animation","HTML"]: Example "3d","physics","animation","html"
The Prompt
{“prompt”:”Create a complete three-dimensional simulation contained entirely within a single HTML file that features 50 realistic-looking balls bouncing inside a spinning cube.nnThe 3D scene must include the following features:nn- The cube should rotate slowly around its center, providing a dynamic and continuously changing perspective.n- Each of the 50 balls should be visually realistic, with proper shading or materials to clearly differentiate them from the cube and from each other.n- The balls must move with realistic physics, including accurate velocity, acceleration, and collision detection.n- The balls must bounce off the inner surfaces of the cube, reversing direction appropriately upon collision to simulate realistic bouncing behavior.nnAdditional requirements:nn- Use only HTML and JavaScript (e.g., WebGL with Three.js or similar libraries embedded via CDN) within a single HTML file.n- Ensure performance is smooth, and the animation runs fluidly on modern browsers.n- The camera perspective should allow a clear view of the bouncing balls inside the cube as it spins.n- The solution should be self-contained, requiring no external assets beyond CDN links.nn# Stepsnn1. Set up a 3D scene with a cube mesh that can rotate slowly around its center.n2. Generate 50 spheres positioned initially inside the cube with random velocities.n3. Implement physics calculations to update the positions of the balls each animation frame.n4. Detect collisions of the balls against cube walls and update velocity vectors to simulate bouncing.n5. Render the updated scene at smooth frame rates.nn# Output FormatnnProvide the complete HTML code as a single text block. This code should include all necessary HTML, CSS, and JavaScript so that saving it as an .html file and opening it in a modern web browser displays the described simulation immediately.nn# Notesnn- Focus on realistic motion and smooth rotation of the cube.n- Optimize collision detection for 50 balls to maintain performance.n- You can use publicly available JavaScript 3D libraries via CDN, but the entire solution must remain in one HTML file.”,”name”:”3D Bouncing Balls Cube”,”short_description”:”Generates a 3D animation of 50 bouncing balls inside a rotating cube in a single HTML file.”,”icon”:”CubeIcon”,”category”:”programming”,”tags”:[“3D”,”Physics”,”Animation”,”HTML”],”should_index”:true}
Screenshot Examples
How to Use This Prompt
- [PROMPT]: Instructions for creating a simulation.
- [NAME]: Title of the 3D simulation project.
- [SHORT_DESCRIPTION]: Brief overview of the simulation’s purpose.
- [ICON]: Visual representation of the project.
- [CATEGORY]: Classification of the project type.
- [TAGS]: Keywords related to the project.
- [STEPS]: Outline of the implementation process.
- [NOTES]: Additional considerations for development.
Tips for Best Results
- Optimize Performance: Use efficient algorithms for collision detection to maintain smooth animations.
- Use Libraries Wisely: Leverage Three.js via CDN for easy 3D rendering without external assets.
- Realistic Physics: Implement accurate velocity and acceleration calculations for natural ball movement.
- Dynamic Perspective: Ensure the cube rotates slowly for an engaging and continuously changing view of the scene.
FAQ
- What is the main feature of the 3D simulation?
The simulation features 50 realistic balls bouncing inside a slowly rotating cube. - Which technologies are used for the simulation?
The simulation uses HTML and JavaScript, specifically WebGL with Three.js via CDN. - How are the balls' movements simulated?
The balls' movements are simulated using realistic physics, including velocity and collision detection. - What is required for the simulation to run smoothly?
Optimized collision detection and smooth rendering are necessary for fluid animation performance.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
