メインコンテンツまでスキップ

物理

PlayCanvas は堅牢な 物理システム を搭載しています。重力、コリジョン、力、制約を含む 3D 空間でのオブジェクトのリアルなシミュレーションを可能にします。物理システムは ammo.js 物理エンジンで動作します。

はじめに​

PlayCanvas は物理エンジンとして ammo.js を使用します。ammo.js は WASM ライブラリで、React では遅延ロードされます。これにより、必要な時だけ ammo.js を配信し、バンドルサイズを抑えることができます。ammo.js がロードされる前にコンテンツをレンダリングしたり、ユーザーインタラクションの結果としてのみ物理が必要な場合にも対応できます。いずれにしても、ammo.js の遅延ロードにより、コンテンツを素早くレンダリングできます。

物理システムを使用するには、sync-ammo 依存関係をインストールする必要があります。

npm install sync-ammo

また、ルートの <Application/> コンポーネントに <Application usePhysics/> Prop を追加する必要があります。

ヒント

PlayCanvas React は <Application usePhysics/> Prop が設定されている場合にのみ ammo.js をロードします。

<Application usePhysics>
  <Entity>
    <Rigidbody type="box" />
  </Entity>
</Application>

使い方​

Entity に RigidBody と Collision コンポーネントを追加することで、物理シミュレーションに参加させることができます。以下の例では、静的な地面、落下する球、落下するボックスを作成しています。

Objects falling under gravity - View Code

物理プロパティ​

<RigidBody/> と <Collision/> コンポーネントのさまざまなプロパティを変更して物理挙動をカスタマイズできます。詳細は 物理ドキュメント を参照してください。

<RigidBody 
  type="dynamic"
  mass={1}                // オブジェクトの質量
  linearDamping={0.1}     // 移動の空気抵抗
  angularDamping={0.1}    // 回転の空気抵抗
  friction={0.5}          // 表面摩擦
  restitution={0.3}       // 反発係数（0 = 反発なし、1 = 完全反発）
/>
<Collision 
  type="box"
  halfExtents={[1, 1, 1]} // ボックスコリジョンのサイズ
  radius={0.5}            // 球/シリンダーコリジョンの半径
  height={2}              // カプセル/シリンダーコリジョンの高さ
/>

usePhysics フック​

物理エンジンは遅延インスタンス化されるため、リアクティブな方法でこれを処理する必要があります。そこで usePhysics フックの出番です。

import { usePhysics } from '@playcanvas/react/hooks';

const PhysicsStatus = () => {
  const { isPhysicsEnabled, isPhysicsLoaded, physicsError } = usePhysics();
  // ...
};

usePhysics フックは物理エンジンの状態に関する情報を提供します。usePhysics フックの詳細は API リファレンスを参照してください。

PlayCanvas の物理についての詳細は PlayCanvas 物理 ドキュメントを参照してください。

トラブルシューティング​

webpack で Can't resolve 'sync-ammo' の警告が出る​

sync-ammo はオプションの依存関係で、物理を使用する場合にのみ必要です。インストールしていない場合でも、webpack (next build --webpack を含む) はビルド時にすべてのインポートを解決するため、次の警告を出力します。

Module not found: Error: Can't resolve 'sync-ammo'

この警告は無害です。PlayCanvas React は usePhysics が設定されている場合にのみ sync-ammo をロードします。Vite と Turbopack は未インストールのパッケージを警告なしで処理するため、変更は不要です。

webpack で警告を抑制するには、モジュールを無視します。

webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.IgnorePlugin({ resourceRegExp: /^sync-ammo$/ })
  ]
};

Next.js では next.config.mjs に追加します。デフォルトの Turbopack ビルドは webpack 設定があると失敗するため、next build --webpack でビルドする場合にのみ追加してください。

next.config.mjs
export default {
  webpack: (config, { webpack }) => {
    config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /^sync-ammo$/ }));
    return config;
  }
};
警告

IgnorePlugin を使用すると、sync-ammo がインストールされていても webpack はバンドルしません。usePhysics を有効にする場合は削除してください。