內 Rapier physics in React

Last update: Jun 17, 2022

use-rapier

Under heavy development. All APIs are subject to change.

Alpha Usage

Hooks:

{ // Generates a RigidBody and attaches a BoxCollider to it, returns a ref const [box, rigidBody, collider] = useCuboid( { position: [1, 1, 1] }, { args: [0.5, 0.5, 0.5] } ); return ; };">
import { Box } from "@react-three/drei";
import { useCuboid } from "use-rapier";

const RigidBox = () => {
  // Generates a RigidBody and attaches a BoxCollider to it, returns a ref
  const [box, rigidBody, collider] = useCuboid(
    { position: [1, 1, 1] },
    { args: [0.5, 0.5, 0.5] }
  );

  return <Box ref={box} />;
};

Or, using components:
This is equivalent to the above

{ return ( ); };">
import { Box } from "@react-three/drei";

const RigidBox = () => {
  return (
    <RigidBody position={[1, 1, 1]}>
      <Box />
      <CuboidCollider args={[0.5, 0.5, 0.5]} />
    </RigidBody>
  );
};

Roadmap

In order, but also not necessarily:

  • Draft of all base shapes
  • Draft of all base joints
  • Translation and rotational constraints
  • Collision events -- Rapier Event Queue
  • Switch to using Vite for development?
  • Docs
  • CodeSandbox examples
  • Helpers, for things like Vehicle, Rope, Player, etc

GitHub

https://github.com/pmndrs/react-three-rapier
Comments
  • 1. Side effects in useMemo

    First I just want to say great work with this!

    I was reading through the code and noticed that you're calling world.createRigidBody inside useMemo which breaks some React rules since world.createRigidBody has side effects. useMemo isn't the best choice for this anyway because React can decide to throw away the value at any time and recompute it.

    https://github.com/pmndrs/react-three-rapier/blob/a4b9f3fb2ca40abea8f5dcd6d4c44068f60fe398/packages/react-three-rapier/src/hooks.ts#L94-L116

    In my own integration I ended up using a getter which as far as I can tell should be React 18+ safe. The approach is described in the bottom of https://github.com/reactwg/react-18/discussions/18

    https://github.com/alexandernanberg/playground/blob/973c512aa192a6500a503a15aea6d6dd1b83d2be/src/components/physics.tsx#L265-L272

    Reviewed by alexandernanberg at 2022-05-19 12:14
  • 2. perf: only update active bodies

    Only update position/rotation of bodies that are active and not fixed

    Another perf improvement would be to avoid creating a new Object3d in each frame, we should be able to reuse the same instance. Same thing with the Quaternion

    Reviewed by alexandernanberg at 2022-05-26 07:40
  • 3. How to use Motors

    From rapier docs, the motor is accessible from the joint creation.

    let joint = world.createImpulseJoint(params, body1, body2);
    (joint as RAPIER.PrismaticJoint).configureMotorVelocity(1.0, 0.5);
    

    But the useImpulseJoint hook doesn't expose it.

    https://github.com/pmndrs/react-three-rapier/blob/4f7440c880295a6f0ea63f2f013e8e06370c3568/packages/react-three-rapier/src/hooks.ts#L410-L432

    Question

    How to use Motors? Is there another way? Are there plans to expose the joint from the hooks?

    I'd expect something like this:

    const joint = useRevoluteJoint(...)
    
    <Box onClick={() => { joint.configureMotorVelocity(1.0, 0.5); }} />
    

    I'd be glad to contribute with a PR.

    Reviewed by brunnolou at 2022-05-22 14:48
  • 4. feat: add router to demo

    Small update to the demo adding a router, making so people can link to a specific demo. Let me know what you think.

    Also removed some unnecessary React imports in a second commit

    Reviewed by alexandernanberg at 2022-05-24 17:53
  • 5. Will Rapier run in a WebWorker?

    Searching through this code and Rapier docs I was unable to determine if this package would run Rapier in a separate thread/WebWorker, like use-cannon does automatically.

    Reviewed by Glavin001 at 2022-05-23 17:17
  • 6. Version Packages

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    @react-three/[email protected]

    Minor Changes

    • 7e36172: Add collision and sleep/awake events
    Reviewed by github-actions[bot] at 2022-06-09 06:53
  • 7. Version Packages

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    @react-three/[email protected]

    Minor Changes

    • 584ce08: Expose joint api, however no joint is returned when created (rapier bug?)

    Patch Changes

    • 584ce08: All parts now uses a more rigid initiation process
    • 584ce08: Apply bounding box offset for auto colliders
    • 584ce08: Use single update loop instead of individual rigid body callbacks
    Reviewed by github-actions[bot] at 2022-05-29 13:09
  • 8. Version Packages

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    @react-three/[email protected]

    Patch Changes

    • 4f7440c: fix: make global colliders setting progate to children
    Reviewed by github-actions[bot] at 2022-05-19 10:38
  • 9. Version Packages

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    @react-three/[email protected]

    Patch Changes

    • 260e6d1: Fix Physics "colliders" value not being applied in children by default
    Reviewed by github-actions[bot] at 2022-05-19 10:27
React ESI: Blazing-fast Server-Side Rendering for React and Next.js
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

Jun 18, 2022
30 Days of React challenge is a step by step guide to learn React in 30 days
30 Days of  React challenge is a step by step guide to learn React in 30 days

30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take up to 100 days, follow your own pace.

Jun 27, 2022
React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.
React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content.

Dec 7, 2021
React People lists and connects React developers around the world.

React People React People lists and connects React developers around the world. Progress View the Project page for details on what's planned and what'

Jun 14, 2022
React Backbone Binding that works with React 16

WithBackbone React Higher Order Component which will bind Backbone Data that works with React Fiber (v.16) Why did we make it There are already a coup

Mar 19, 2021
A description of React's new core algorithm, React Fiber

React Fiber Architecture Introduction React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of

Jun 22, 2022
React Clone - How React Works: An In-Depth Guide
React Clone - How React Works: An In-Depth Guide

訄郕 訄訇郋訄迮 React: 郈郋迡郋訇郇郋迮 郕郋赲郋迡赲郋 邽赲迮, 迡郱! 郋邿 訄迮 郈郋郕訄迠 赲訄邾, 迮迣郋 郇訄邽郇訄迮 React. 虴郋 郋 郋郱郇訄訄迮? 衪郋 郋郱郇訄訄迮, 郋 邾

Nov 25, 2021
A drum machine built with React using the Create React App toolchain.

drum-machine A simple drum machine built with React using the Create React App toolchain. Getting Started Clone or download the repository. Open a com

Dec 30, 2021
React-Login-app - Create a Login and Registration Page with React Router
React-Login-app - Create a Login and Registration Page with React Router

About In this repo I was given a Task to create a Login and Registration page wh

Dec 31, 2021
Insomnia-react-app - A react app that will help you relax and sleep better
Insomnia-react-app - A react app that will help you relax and sleep better

insomnia - a sleep inducer app An app that will help you relax and sleep better.

May 30, 2022
React-three-ts-bp - [TS] Stable version for React-Three + Spring & Tailwind bp

React-three-ts-bp - [TS] Stable version for React-Three + Spring & Tailwind bp

Jan 3, 2022
Aviasales React-Redux-MobX- - A quick start Redux + TypeScript Create React App template

A quick start Redux + TypeScript Create React App template An opinionated quick

Mar 14, 2022
A simple way to write re-usable features with React + EffectorA simple way to write re-usable features with React + Effector

Effector Factorio The simplest way to write re-usable features with React + Effector Install npm install effector-factorio Why this? People became to

Jun 16, 2022
Calculator-in-react - Calculator made in React.JS using Hooks as useReducer
Calculator-in-react - Calculator made in React.JS using Hooks as useReducer

Calculator-in-react - Calculator made in React.JS using Hooks as useReducer

Mar 9, 2022
Thirdweb react SDK: The official React.JS wrapper for the thirdweb sdk.

The thirdweb React SDK provides a collection of hooks to use in your React apps to interact with your thirdweb contracts.

Jun 25, 2022
React-fade: Proof of Concept react fade in/out that just works without any effort
React-fade: Proof of Concept react fade in/out that just works without any effort

react-fade Proof of Concept react fade in/out that just works without any effort. Inspired by react native layout animations. How it works FadeIn noth

May 17, 2022
React Query Typed Api - An opinioneted wrapper around react-query to implement fully typed api requests
React Query Typed Api - An opinioneted wrapper around react-query to implement fully typed api requests

React Query Typed Api - An opinioneted wrapper around react-query to implement fully typed api requests

May 31, 2022
User-friendly query builder for React
User-friendly query builder for React

react-awesome-query-builder User-friendly React component to build queries. Inspired by jQuery QueryBuilder Using awesome Ant Design v4 for widgets No

Jun 22, 2022
React component to blur image backgrounds using canvas.
React component to blur image backgrounds using canvas.

React Blur React component for creating blurred backgrounds using canvas. Live demo Installation npm install react-blur --save Usage var Blur = requir

Jun 5, 2022