https://github.com/patrick-s-young/use-spring-cannon-hook-example

React three useSpring cannon hook example
https://github.com/patrick-s-young/use-spring-cannon-hook-example

character-animation leva react-three-cannon react-three-fiber use-cannon zustand

Last synced: about 1 month ago
JSON representation

React three useSpring cannon hook example

• Host: GitHub
• URL: https://github.com/patrick-s-young/use-spring-cannon-hook-example
• Owner: patrick-s-young
• Created: 2022-08-03T03:03:18.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-04T18:49:07.000Z (over 2 years ago)
• Last Synced: 2024-10-24T18:34:32.648Z (about 2 months ago)
• Topics: character-animation, leva, react-three-cannon, react-three-fiber, use-cannon, zustand
• Language: JavaScript
• Homepage:
• Size: 291 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Hook-based Physics With use-cannon  

I have worked extensively with [three.js](https://github.com/mrdoob/three.js/) and [cannon-es](https://github.com/pmndrs/cannon-es) ([Poimandres](https://github.com/pmndrs)' maintained fork of [Stefan Hedman](https://github.com/schteppe)'s [cannon.js](https://github.com/schteppe/cannon.js)). While both of these offer streamlined abstractions of more complicated code, there is still a lot of boilerplate involved.

Fortunatley, the React-compatible, hook-based ecosystem developed by [Poimandres]() makes WebXR app development more streamlined and declaritive. 

In this [@react-three/fiber](https://www.npmjs.com/package/@react-three/fiber) example, I leveraged [use-cannons](https://github.com/pmndrs/use-cannon)'s useCompoundBody and useFrame to create the rotating stage. For the 'robot', useSpring was enlisted for the bobbing head. 

![01_24fps](https://user-images.githubusercontent.com/42591798/182773111-109324a7-b169-4fd8-b90f-318f2db88903.gif)

The slider was enabled by [leva](https://github.com/pmndrs/leva), a hook-based GUI library, and [zustand](https://www.npmjs.com/package/zustand), a state management solution. Both are brought to you by - you guessed it - [Poimandres](https://pmnd.rs/).

## View In Sandbox

[codesandbox.io/s/usecannon-hook-usespring-example-beqvzs](https://codesandbox.io/s/usecannon-hook-usespring-example-beqvzs)

## Running Locally

Make sure you have [Node.js](http://nodejs.org/) installed.

```sh

git clone https://github.com/patrick-s-young/use-spring-cannon-hook-example.git # or clone your own fork

cd use-spring-cannon-hook-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.

* [leva](https://github.com/pmndrs/leva) - hook-based GUI library.

* [@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.