feat: add activeCollisionTypes prop to RigidBody and Collider compone…

…nts (#678)

* feat: add activeCollisionTypes prop to RigidBody and Collider components

* chore: add changeset

* chore: cleanup ActiveCollisionTypesExample

* fix: revert unintentional version bumps

* feat: organise imports

* fix: revert unintentional version bumps

* chore: change @react-three/rapier-addons to depend on @react-three/rapier ^1.3.1

.changeset/green-paws-mix.md

@@ -0,0 +1,5 @@
+---
+"@react-three/rapier": patch
+---
+
+feat: add `activeCollisionTypes` prop to RigidBody and Collider components

demo/src/App.tsx

@@ -41,6 +41,7 @@ import { SnapshotExample } from "./examples/snapshot/SnapshotExample";
 import { SpringExample } from "./examples/spring/SpringExample";
 import { StutteringExample } from "./examples/stuttering/StutteringExample";
 import { Transforms } from "./examples/transforms/TransformsExample";
+import { ActiveCollisionTypesExample } from "./examples/active-collision-types/ActiveCollisionTypesExample";
 
 const demoContext = createContext<{
   setDebug?(f: boolean): void;
@@ -121,7 +122,8 @@ const routes: Record<string, ReactNode> = {
   snapshot: <SnapshotExample />,
   spring: <SpringExample />,
   "rope-joint": <RopeJointExample />,
-  "contact-skin": <ContactSkinExample />
+  "active-collision-types": <ActiveCollisionTypesExample />,
+  "contact-skin": <ContactSkinExample />,
 };
 
 export const App = () => {

demo/src/examples/active-collision-types/ActiveCollisionTypesExample.tsx

@@ -0,0 +1,57 @@
+import { ActiveCollisionTypes } from "@dimforge/rapier3d-compat";
+import { Box, Sphere } from "@react-three/drei";
+import { useFrame } from "@react-three/fiber";
+import { RapierRigidBody, RigidBody } from "@react-three/rapier";
+import { useRef, useState } from "react";
+
+const activeCollisionTypes =
+  ActiveCollisionTypes.DEFAULT | ActiveCollisionTypes.KINEMATIC_FIXED;
+
+const Ball = () => {
+  const rb = useRef<RapierRigidBody>(null);
+
+  const [color, setColor] = useState("blue");
+
+  useFrame(({ clock: { elapsedTime } }) => {
+    if (!rb.current) return;
+
+    rb.current.setTranslation(
+      { x: Math.sin(elapsedTime) * 3, y: 0, z: 0 },
+      true
+    );
+  });
+
+  return (
+    <RigidBody
+      ref={rb}
+      colliders="ball"
+      type="kinematicPosition"
+      activeCollisionTypes={activeCollisionTypes}
+      onCollisionEnter={() => setColor("green")}
+      onCollisionExit={() => setColor("blue")}
+    >
+      <Sphere>
+        <meshStandardMaterial color={color} />
+      </Sphere>
+    </RigidBody>
+  );
+};
+
+const Wall = () => {
+  return (
+    <RigidBody type="fixed" colliders="cuboid">
+      <Box args={[0.5, 5, 2]}>
+        <meshStandardMaterial color="white" transparent opacity={0.5} />
+      </Box>
+    </RigidBody>
+  );
+};
+
+export const ActiveCollisionTypesExample = () => {
+  return (
+    <group>
+      <Ball />
+      <Wall />
+    </group>
+  );
+};

packages/react-three-rapier/src/types.ts

@@ -1,21 +1,22 @@
 import { MutableRefObject, RefObject } from "react";
 
 import {
+  ActiveCollisionTypes,
   CoefficientCombineRule,
-  Collider as RapierCollider,
   ImpulseJoint,
   InteractionGroups,
+  Collider as RapierCollider,
   RigidBody as RapierRigidBody,
   TempContactManifold
 } from "@dimforge/rapier3d-compat";
 import { Rotation, Vector } from "@dimforge/rapier3d-compat/math";
-import { Object3DProps, Vector3, Quaternion } from "@react-three/fiber";
+import { Object3DProps, Quaternion, Vector3 } from "@react-three/fiber";
 import { Object3D } from "three";
 import { ColliderProps } from ".";
 import { RigidBodyState } from "./components/Physics";
 
 export { CoefficientCombineRule as CoefficientCombineRule } from "@dimforge/rapier3d-compat";
-export { RapierRigidBody, RapierCollider };
+export { RapierCollider, RapierRigidBody };
 
 export type RefGetter<T> = MutableRefObject<() => T | undefined>;
 
@@ -187,7 +188,7 @@ export interface ColliderOptions<ColliderArgs extends Array<unknown>> {
   scale?: Object3DProps["scale"];
 
   /**
-   * Callback when this collider collides with another collider.
+   * Callback when this collider collideas with another collider.
    */
   onCollisionEnter?: CollisionEnterHandler;
 
@@ -221,6 +222,16 @@ export interface ColliderOptions<ColliderArgs extends Array<unknown>> {
    */
   solverGroups?: InteractionGroups;
 
+  /**
+   * The collision types active for this collider.
+   *
+   * Use `ActiveCollisionTypes` to specify which collision types should be active for this collider.
+   *
+   * @see https://rapier.rs/javascript3d/classes/Collider.html#setActiveCollisionTypes
+   * @see https://rapier.rs/javascript3d/enums/ActiveCollisionTypes.html
+   */
+  activeCollisionTypes?: ActiveCollisionTypes;
+
   /**
    * Sets the uniform density of this collider.
    * If this is set, other mass-properties like the angular inertia tensor are computed
@@ -446,6 +457,17 @@ export interface RigidBodyOptions extends ColliderProps {
    */
   solverGroups?: InteractionGroups;
 
+  /**
+   * The default active collision types for all colliders in this rigid body.
+   * Can be customized per-collider.
+   * 
+   * Use `ActiveCollisionTypes` to specify which collision types should be active for this collider.
+   *
+   * @see https://rapier.rs/javascript3d/classes/Collider.html#setActiveCollisionTypes
+   * @see https://rapier.rs/javascript3d/enums/ActiveCollisionTypes.html
+   */
+  activeCollisionTypes?: ActiveCollisionTypes;
+
   onSleep?(): void;
 
   onWake?(): void;

packages/react-three-rapier/src/utils/utils-collider.ts

@@ -138,6 +138,9 @@ const mutableColliderOptions: MutableColliderOptions = {
   restitutionCombineRule: (collider, value) => {
     collider.setRestitutionCombineRule(value);
   },
+  activeCollisionTypes: (collider, value: number) => {
+    collider.setActiveCollisionTypes(value);
+  },
   contactSkin: (collider, value: number) => {
     collider.setContactSkin(value);
   },