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

React three useSpring cannon hook example

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.

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

• @react-three/fiber - React renderer for three.js.
• @react-three/cannon - React hooks for cannon-es, a rigid body physics engine.
• zustand - state-management solution that uses simplified flux principles.
• leva - hook-based GUI library.
• @react-three/drei - Helper library for @react-three/fiber.

Authors

• Patrick Young - Patrick Young

License

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