Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/patrick-s-young/dynamic-react-three-fiber-example
Dynamically creating/disposing of react-three-fiber meshes + physics
https://github.com/patrick-s-young/dynamic-react-three-fiber-example
cannon-es react-three-cannon react-three-fiber threejs zustand
Last synced: 5 days ago
JSON representation
Dynamically creating/disposing of react-three-fiber meshes + physics
- Host: GitHub
- URL: https://github.com/patrick-s-young/dynamic-react-three-fiber-example
- Owner: patrick-s-young
- Created: 2022-07-18T14:08:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-30T16:11:21.000Z (over 2 years ago)
- Last Synced: 2024-11-16T07:33:41.993Z (2 months ago)
- Topics: cannon-es, react-three-cannon, react-three-fiber, threejs, zustand
- Language: JavaScript
- Homepage:
- Size: 297 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Managing the dynamic adding and removing of React Three Fiber meshes and bodies
Having worked with React and Three.js, I was intrigued by the idea of a React approach to 3D web apps.
I am specifically interested in Three.js + cannon physics, so when I saw the react-three [developer examples](https://cannon.pmnd.rs/) I was excited to learn more.
Looking through the various demo projects, I couldn't find an instance where a collection of objects (like a bunch of spheres) were being dynamically created/destroyed. I did find a demo [where a fixed number of objects are created/destroyed](https://cannon.pmnd.rs/#/demo/CubeHeap).
In the scenario I was thinking of, a specific item could be removed based on some criteria (like a collision event), with the total amount of objects growing and shrinking over time.
With this in mind, I put together this example where a ball is created every second. When a ball collides with a wall, it is removed...
The balls are managed using the familar React component Array.map() method that iterates over a collection of ball objects. When a ball collides with a wall, its key is used to filter it from the ball array.
That's all you need to do. React Three takes care of removing the ball mesh from the scene and the ball body from the world.
To keep logic centralized, I recommend [zustand](https://www.npmjs.com/package/zustand), brought to you by the [collective of open-source developers](https://pmnd.rs/) that brought us [@react-three/fiber](https://www.npmjs.com/package/@react-three/fiber) and [@react-three/cannon](https://www.npmjs.com/package/@react-three/cannon).
## View In Sandbox
[codesandbox.io/s/managing-dynamic-react-three-cannon-bodies](https://codesandbox.io/s/managing-dynamic-react-three-cannon-bodies-ic9zl8)
## Running Locally
Make sure you have [Node.js](http://nodejs.org/) installed.
```sh
git clone https://github.com/patrick-s-young/dynamic-three-cannon-example.git # or clone your own fork
cd dynamic-three-cannon-example
npm install
npm start
```
## Built With
* [@react-three/fiber](https://www.npmjs.com/package/@react-three/fiber) - React renderer for three.js.
* [@react-three/cannon](https://www.npmjs.com/package/@react-three/cannon) - React hooks for cannon-es, a rigid body physics engine.
* [zustand](https://www.npmjs.com/package/zustand) - state-management solution that uses simplified flux principles.
* [@react-three/drei](https://www.npmjs.com/package/@react-three/drei) - Helper library for @react-three/fiber.
## Authors
* **Patrick Young** - [Patrick Young](https://github.com/patrick-s-young)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.