Skip to content

patrick-s-young/use-spring-cannon-hook-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hook-based Physics With use-cannon

I have worked extensively with three.js and cannon-es (Poimandres' maintained fork of Stefan Hedman's 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 example, I leveraged use-cannons's useCompoundBody and useFrame to create the rotating stage. For the 'robot', useSpring was enlisted for the bobbing head.

01_24fps

The slider was enabled by leva, a hook-based GUI library, and zustand, a state management solution. Both are brought to you by - you guessed it - Poimandres.

View In Sandbox

codesandbox.io/s/usecannon-hook-usespring-example-beqvzs

Running Locally

Make sure you have Node.js installed.

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

Authors

License

This project is licensed under the MIT License - see the LICENSE file for details.