https://github.com/shanestudios/3d-physics-sandbox
https://github.com/shanestudios/3d-physics-sandbox
3d cannonjs physics sandbox simulation softbodies softbody softbody-simulation threejs
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shanestudios/3d-physics-sandbox
- Owner: ShaneStudios
- Created: 2025-09-21T09:16:15.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-21T09:17:58.000Z (9 months ago)
- Last Synced: 2025-10-08T08:16:32.123Z (8 months ago)
- Topics: 3d, cannonjs, physics, sandbox, simulation, softbodies, softbody, softbody-simulation, threejs
- Language: HTML
- Homepage: https://shanestudios.github.io/3D-Physics-Sandbox/
- Size: 7.81 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 3D Physics Sandbox - Shane Studios
A powerful, browser-based 3D physics simulator and sandbox built with Three.js and Cannon.js. Spawn rigid and soft bodies, interact with them via mouse dragging, and experiment with gravity and collisions in real-time. Perfect for prototyping physics effects, educational demos, or just fun experimentation.
## Features
- **Diverse Shapes**: Spawn spheres, boxes, cylinders, cones, capsules, tori, planes, Platonic solids (icosahedron, dodecahedron, octahedron, tetrahedron), and more exotic forms.
- **Soft Body Simulation**: Create squishy objects like jello cubes or deformable spheres using particle systems with distance constraints for realistic deformation and jiggle.
- **Interactive Controls**: Click and drag to grab and throw objects; orbit the camera with mouse.
- **Customizable Resolution**: Adjust the detail level of squishy objects via a slider for performance tuning.
- **Gravity Toggle**: Enable/disable gravity to create zero-G environments.
- **Collision Boundaries**: Enclosed arena with walls and floor for contained simulations.
- **4D Projection**: Spawn rotating tesseracts for a mind-bending hyperspace twist.
- **Real-Time Rendering**: Smooth 60 FPS physics and visuals, with shadows and lighting.
## Quick Start
1. **Download or Clone**:
```
git clone https://github.com/ShaneStudios/3D-Physics-Sandbox.git
cd 3D-Physics-Sandbox
```
2. **Run Locally**:
- Open `index.html` in any modern web browser (Chrome, Firefox, Safari recommended).
- No build tools or servers needed—it's a self-contained static file.
3. **Online Demo**:
- [Live Demo](https://shanestudios.github.io/3D-Physics-Sandbox/)
## Usage
- **Spawning Objects**:
- Select a shape from the dropdown.
- Adjust size (0.5–5) and resolution (for squishy objects only).
- Click **Spawn Shape** to add a random-positioned object above the arena.
- **Interaction**:
- **Orbit Camera**: Left-click and drag to rotate view.
- **Throw Objects**: Left-click on an object and drag to position, then release to fling (velocity based on drag distance).
- **Clear Scene**: Click **Clear All** to remove dynamic objects.
- **Physics Tweaks**:
- Toggle **Gravity** to float or fall objects.
- Higher resolution = more detailed squishy deformation but higher CPU usage.
## Controls
| Action | Input |
|--------|-------|
| Orbit Camera | Mouse drag (left button) |
| Throw/Drag Object | Click + drag on object |
| Spawn | Button click |
| Clear | Button click |
| Toggle Gravity | Button click |
## Performance Tips
- Lower resolution for squishy objects on lower-end hardware.
- Limit spawned objects to ~10–20 for smooth framerates.
- Browser dev tools: Monitor CPU in Performance tab.
## Tech Stack
- **Rendering**: Three.js (v0.139)
- **Physics**: Cannon.js (v0.6.2)
- **CDNs**: Unpkg, Cloudflare (all free, no external dependencies)
## Contributing
Pull requests welcome! For major changes, please open an issue first.
1. Fork the repo.
2. Create your feature branch (`git checkout -b feature/AmazingNewShape`).
3. Commit your changes (`git commit -m 'Add d20 polyhedron support'`).
4. Push to the branch (`git push origin feature/AmazingNewShape`).
5. Open a Pull Request.
## License
MIT License - see [LICENSE](LICENSE) file (or add one if missing).
## Credits
Created by **Shane Studios**
[GitHub](https://github.com/ShaneStudios)
Inspired by physics sandboxes like those in Unity/UE, but fully client-side. Thanks to the Three.js and Cannon.js teams for amazing libraries!