pmndrs/react-three-rapier

これは何？

主な機能

• 01react-three-fiberのシーンで使える、宣言的なRigidBodyコンポーネントとコライダーコンポーネント。
• 02メッシュの境界、球、凸包、三角形メッシュのジオメトリからコライダーを自動生成。
• 03回転、スライダー、ばねのジョイントなど、6種類のジョイントをReactフックとして提供。
• 04インスタンスごとのコライダーや複合形状に対応した、インスタンス化された剛体。
• 05衝突、センサー、接触力のイベントコールバックと、衝突グループによるフィルタリング。
• 06デバッグ表示、設定可能な時間ステップ、ワールドスナップショットのシリアライズ。

ユースケース

• react-three-fiberのゲームやインタラクティブなシーンに、落下する小物や跳ねるボールなど、物理演算で動くオブジェクトを追加する。
• 3D Reactアプリケーション内で、ジョイントを使ったラグドール、チェーン、ドア、車輪を構築する。
• インスタンス化されたメッシュを使って、何千もの小さな剛体をシミュレーションする。
• センサーコライダーを使って、3Dシーン内のゾーンやトリガーを検出する。

クイックスタート

1. 1

   npmからパッケージをインストールします

   npm install @react-three/rapier
2. 2

   PhysicsとRigidBodyをインポートし、Suspense内でシーンをPhysicsでラップします

使う前に知っておきたいこと

• !バージョン2には@react-three/fiber v9とReact v19が必要です。React v18を使用する場合は、fiber v8とv1を使用してください。

トピック

よくある質問

react-three-rapier とは？

Rapier WASM物理エンジンをReactにバインディングし、剛体、コライダー、ジョイントをreact-three-fiberのシーンに組み込めます。 react-three/rapierはRapier WASM物理エンジンをReactコンポーネントで扱えるようにし、react-three-fiberのシーンでメッシュと並べて物理オブジェクトを宣言できます。Physicsコンポーネントがシミュレーションを作成し、RigidBodyコンポーネントがメッシュをそのシミュレーションに接続します。コライダーコンポーネントでは、形状を手動で定義することも、メッシュのジオメトリから自動生成することもできます。

react-three-rapier は無料で使えますか？ライセンスは？

react-three-rapier は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-three-rapier は今もメンテナンスされていますか？

活発にメンテナンス中。react-three-rapier の最終コミットは 2026年10月12日 です。

react-three-rapier は何に使えますか？

react-three-fiberのゲームやインタラクティブなシーンに、落下する小物や跳ねるボールなど、物理演算で動くオブジェクトを追加する。 3D Reactアプリケーション内で、ジョイントを使ったラグドール、チェーン、ドア、車輪を構築する。 インスタンス化されたメッシュを使って、何千もの小さな剛体をシミュレーションする。 センサーコライダーを使って、3Dシーン内のゾーンやトリガーを検出する。

react-three-rapier のインストール方法は？

npmからパッケージをインストールします: npm install @react-three/rapier PhysicsとRigidBodyをインポートし、Suspense内でシーンをPhysicsでラップします

react-three-rapier はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/pmndrs/react-three-rapier