{"id":20589739,"url":"https://github.com/patrick-s-young/dynamic-react-three-fiber-example","last_synced_at":"2025-09-26T04:30:26.166Z","repository":{"id":105946521,"uuid":"515210833","full_name":"patrick-s-young/dynamic-react-three-fiber-example","owner":"patrick-s-young","description":"Dynamically creating/disposing of react-three-fiber meshes + physics","archived":false,"fork":false,"pushed_at":"2022-07-30T16:11:21.000Z","size":304,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-16T07:33:41.993Z","etag":null,"topics":["cannon-es","react-three-cannon","react-three-fiber","threejs","zustand"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patrick-s-young.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-18T14:08:09.000Z","updated_at":"2024-03-22T16:44:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"a84b8e45-7887-4159-89fd-3eb0148457f3","html_url":"https://github.com/patrick-s-young/dynamic-react-three-fiber-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick-s-young%2Fdynamic-react-three-fiber-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick-s-young%2Fdynamic-react-three-fiber-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick-s-young%2Fdynamic-react-three-fiber-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick-s-young%2Fdynamic-react-three-fiber-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patrick-s-young","download_url":"https://codeload.github.com/patrick-s-young/dynamic-react-three-fiber-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234291770,"owners_count":18809245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cannon-es","react-three-cannon","react-three-fiber","threejs","zustand"],"created_at":"2024-11-16T07:31:14.291Z","updated_at":"2025-09-26T04:30:25.725Z","avatar_url":"https://github.com/patrick-s-young.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Managing the dynamic adding and removing of React Three Fiber meshes and bodies\n\nHaving worked with React and Three.js, I was intrigued by the idea of a React approach to 3D web apps. \n\nI 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.\n\nLooking 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). \n\nIn 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.\n\nWith 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...\n\n![dynamic-react-three-fiber_1080x703](https://user-images.githubusercontent.com/42591798/181865083-630fad5f-cbb0-49f3-becb-883b7b45718f.gif)\n\nThe 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. \n\nThat'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.\n\nTo 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).\n\n\n## View In Sandbox\n[codesandbox.io/s/managing-dynamic-react-three-cannon-bodies](https://codesandbox.io/s/managing-dynamic-react-three-cannon-bodies-ic9zl8)\n\n## Running Locally\n\nMake sure you have [Node.js](http://nodejs.org/) installed.\n\n```sh\ngit clone https://github.com/patrick-s-young/dynamic-three-cannon-example.git # or clone your own fork\ncd dynamic-three-cannon-example\nnpm install\nnpm start\n```\n\n\n## Built With\n* [@react-three/fiber](https://www.npmjs.com/package/@react-three/fiber) - React renderer for three.js.\n* [@react-three/cannon](https://www.npmjs.com/package/@react-three/cannon) - React hooks for cannon-es, a rigid body physics engine.\n* [zustand](https://www.npmjs.com/package/zustand) - state-management solution that uses simplified flux principles.\n* [@react-three/drei](https://www.npmjs.com/package/@react-three/drei) - Helper library for @react-three/fiber.\n\n## Authors\n\n* **Patrick Young** - [Patrick Young](https://github.com/patrick-s-young)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrick-s-young%2Fdynamic-react-three-fiber-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrick-s-young%2Fdynamic-react-three-fiber-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrick-s-young%2Fdynamic-react-three-fiber-example/lists"}