Three.js Bouncing 3D Shapes

@MartinBechard

Open live build

Report

What it is for

Colorful cubes, cylinders and pyramids bouncing over a shaded floor with real-time shadows.

How it was made

Three.js Bouncing 3D Shapes Animation Prompt

Create an animation using Three.js with the following specifications:

Shapes:

Include 3D cubes, cylinders, and pyramids.

Create multiple instances of these shapes (e.g., 15 total).

Movement:

The shapes should move randomly within the 3D space.

Implement bouncing behavior when shapes reach the edges of the screen or defined boundaries.

Visual Effects:

Apply shading to the shapes for a more realistic 3D appearance.

Implement shadow casting and receiving for all shapes.

Scene Setup:

Create a Three.js scene with appropriate camera and renderer settings.

Add ambient and directional lighting to the scene.

Include a floor plane to receive shadows.

Interactivity:

Ensure the animation is responsive to window resizing.

Implementation:

Use pure JavaScript, not React or any other framework.

Create a single, self-contained HTML file that includes all necessary code.

Load Three.js from a CDN within the HTML file.

Code Structure:

Wrap the main animation logic in a function (e.g., initBouncingShapes()).

Ensure the animation starts after the DOM is fully loaded.

Performance:

Optimize for smooth animation performance.

Styling:

Set up basic CSS to ensure the canvas takes up the full screen.
Remember to provide clear comments in the code and ensure it's well-organized for readability and potential future modifications.

Paste it into any AI that builds pages. Change the parts in brackets to fit your needs.

Made with: Claude
Type: Visual
Pinned: 22 Oct 2026
Views on Claude: 348
On Reddit: 19 upvotes
Found via: Found on the web

Loading…

Made with

More like this

More like this

The Creative's AI Tarot Cards

Animated Pelican Riding a Bicycle

Double Matthew Walker knot, animated

Head-tracking 3D sneaker viewer