3D Bouncing Balls Cube

Create a complete three-dimensional simulation contained entirely within a single HTML file that features 50 realistic-looking balls bouncing inside a spinning cube. The 3D scene must include the following features: - The cube should slowly rotate around its center, providing a dynamic and continuously changing perspective. - Each of the 50 balls should be visually realistic and have proper shading or materials to differentiate them clearly from the cube and from each other. - The balls must move with realistic physics, including accurate velocity, acceleration, and collision detection. - The balls must bounce off the inner surfaces of the cube, reversing direction appropriately upon collision to simulate realistic bouncing behavior. Additional requirements: - Use only HTML and JavaScript (e.g., WebGL with Three.js or similar libraries embedded via CDN) within a single HTML file. - Ensure performance is smooth and the animation runs fluidly on modern browsers. - The camera perspective should allow a clear view of the bouncing balls inside the cube as it spins. - The solution should be self-contained, requiring no external assets beyond CDN links. # Steps 1. Set up a 3D scene with a cube mesh that can rotate slowly around its center. 2. Generate 50 spheres positioned initially inside the cube with random velocities. 3. Implement physics calculations to update the positions of balls each animation frame. 4. Detect collisions of balls against cube walls and update velocity vectors to simulate bouncing. 5. Render the updated scene at smooth frame rates. # Output Format Provide 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. # Notes - Focus on realistic motion and smooth rotation of the cube. - Optimize collision detection for 50 balls to maintain performance. - You can use publicly available JavaScript 3D libraries via CDN, but the entire solution must remain in one HTML file. # Response Formats ## prompt // Extracts the full prompt and metadata as valid JSON. {"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.\n\nThe 3D scene must include the following features:\n\n- The cube should slowly rotate around its center, providing a dynamic and continuously changing perspective.\n- Each of the 50 balls should be visually realistic and have proper shading or materials to differentiate them clearly 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.\n\nAdditional requirements:\n\n- 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.\n\n# Steps\n\n1. 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 balls each animation frame.\n4. Detect collisions of balls against cube walls and update velocity vectors to simulate bouncing.\n5. Render the updated scene at smooth frame rates.\n\n# Output Format\n\nProvide 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.\n\n# Notes\n\n- 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}