Sphere Packing 3D using Three.js

The Sphere Packing 3D project creates an immersive WebGL experience where dynamic spheres pack into 3D space in real-time. Developed with Three.js, this visual simulation demonstrates mathematical and physical concepts like collision detection, space filling, and growth animation in a browser environment.

Perfect for visualizing spatial optimization, procedural generation, or interactive UI design with 3D motion.

🧰 Technologies Used:

• HTML5 – Scene canvas container

• CSS3 – Basic layout and responsiveness

• JavaScript (ES6) – Sphere logic and animation loop

• Three.js – 3D rendering, lights, and scene control

• Raycasting / Bounding Spheres – Optional for collision avoidance

🌀 Features:

• Randomized or grid-based sphere generation

• Real-time animation of sphere growth and packing

• Collision detection to prevent overlaps

• OrbitControls for user interaction

• Optional glow, color gradients, or dynamic lighting

• Responsive performance for browser and mobile

🕹️ How It Works:

1. The canvas initializes a 3D scene with a camera and light.

2. Spheres are created and allowed to grow until they touch another.

3. Each new sphere checks for overlap with others and stops growing when packed.

4. The scene is continuously rendered with smooth animations and interactions.

💡 Bonus: Use the mouse to rotate, zoom, and explore the packing in depth.

🧠 Learning Highlights:

• Object3D instancing and geometry manipulation

• Using THREE.Vector3 for spatial calculations

• Managing animation loops with requestAnimationFrame

• Responsive and scalable 3D UI techniques

🛠 Customization Ideas:

• Add wireframe view or outline glow

• Pack spheres inside arbitrary shapes (cube, heart, text)

• Control number of spheres, speed, and spacing via GUI

• Export packing result as image or 3D model