From 1dc78d0e28c43d5ba1744805e46787bd0f2f2aa3 Mon Sep 17 00:00:00 2001 From: Isaac Mason Date: Fri, 14 Jun 2024 23:46:10 +1000 Subject: [PATCH] feat: add activeCollisionTypes prop to RigidBody and Collider components (#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 | 5 ++ demo/src/App.tsx | 4 +- .../ActiveCollisionTypesExample.tsx | 57 +++++++++++++++++++ packages/react-three-rapier/src/types.ts | 30 ++++++++-- .../src/utils/utils-collider.ts | 3 + 5 files changed, 94 insertions(+), 5 deletions(-) create mode 100644 .changeset/green-paws-mix.md create mode 100644 demo/src/examples/active-collision-types/ActiveCollisionTypesExample.tsx diff --git a/.changeset/green-paws-mix.md b/.changeset/green-paws-mix.md new file mode 100644 index 00000000..9520c8c2 --- /dev/null +++ b/.changeset/green-paws-mix.md @@ -0,0 +1,5 @@ +--- +"@react-three/rapier": patch +--- + +feat: add `activeCollisionTypes` prop to RigidBody and Collider components diff --git a/demo/src/App.tsx b/demo/src/App.tsx index c17babf3..25b1cd41 100644 --- a/demo/src/App.tsx +++ b/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 = { snapshot: , spring: , "rope-joint": , - "contact-skin": + "active-collision-types": , + "contact-skin": , }; export const App = () => { diff --git a/demo/src/examples/active-collision-types/ActiveCollisionTypesExample.tsx b/demo/src/examples/active-collision-types/ActiveCollisionTypesExample.tsx new file mode 100644 index 00000000..8f319cb2 --- /dev/null +++ b/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(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 ( + setColor("green")} + onCollisionExit={() => setColor("blue")} + > + + + + + ); +}; + +const Wall = () => { + return ( + + + + + + ); +}; + +export const ActiveCollisionTypesExample = () => { + return ( + + + + + ); +}; diff --git a/packages/react-three-rapier/src/types.ts b/packages/react-three-rapier/src/types.ts index 7316ca0a..eb53db46 100644 --- a/packages/react-three-rapier/src/types.ts +++ b/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 = MutableRefObject<() => T | undefined>; @@ -187,7 +188,7 @@ export interface ColliderOptions> { 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> { */ 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; diff --git a/packages/react-three-rapier/src/utils/utils-collider.ts b/packages/react-three-rapier/src/utils/utils-collider.ts index 5789dc6a..c2bdd22c 100644 --- a/packages/react-three-rapier/src/utils/utils-collider.ts +++ b/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); },