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.
codesandbox.io/s/usecannon-hook-usespring-example-beqvzs
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- @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.
- Patrick Young - Patrick Young
This project is licensed under the MIT License - see the LICENSE file for details.