In this @react-three/fiber example, I leveraged use-cannons's useHingeConstraint to create a collections of 'paddles' that can be set to rotate clockwise/counterclockwise at varying speeds.

With the hooks version of useHingeContraint, a ref is returned for accessing the api:

const [, , hingeApi] = useHingeConstraint(doorRef, doorFrameRef, {
 collideConnected: false,
 axisA: [0, 1, 0],
   axisB: [0, 1, 0],
   pivotA: [-1.05, 0, 0],
   pivotB: [0, 0, 0]
 }
);

Then wrap the api in a useEffect with the speed state variable as a depency:

useEffect(() => {
 hingeApi.setMotorSpeed(speed)
}, [speed]);

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

codesandbox.io/s/rgccxz

Make sure you have Node.js installed.

git clone https://github.com/patrick-s-young/react-three-cannon-hinge-constraint.git # or clone your own fork
cd react-three-cannon-hinge-constraint
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.