物理

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

Demo
Code

basic-physics.jsx
// ↑ imports hidden
export const BasicPhysics = () => {

  const sphereMaterial = useMaterial({ diffuse: 'red' });
  const boxMaterial = useMaterial({ diffuse: '#4ecdc4' });

  return (<>
    {/* Ground (static) */}
    <Entity name="ground" position={[0, -0.6, 0]} scale={[100, 0.1, 100]}>
      <RigidBody type="static" friction={0.5} />
      <Collision type="box" halfExtents={[50, 0.1, 50]} />
    </Entity>

    {/* Falling sphere */}
    <Entity name="sphere" position={[0, 6, 0]}>
      <RigidBody type="dynamic" mass={1} />
      <Collision type="sphere" />
      <Render type="sphere" material={sphereMaterial} />
    </Entity>

    {/* Falling box */}
    <Entity name="box" 
      position={[0.1, 8, 0]} 
      rotation={[math.random(0, 360), math.random(0, 360), math.random(0, 360)]}
    >
      <RigidBody type="dynamic" mass={2} />
      <Collision type="box" />
      <Render type="box" material={boxMaterial} />
    </Entity>
  </>);
};

物理プロパティ

<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 物理ドキュメントを参照してください。

はじめに​

使い方​

物理プロパティ​

usePhysics フック​

はじめに

使い方

物理プロパティ

`usePhysics` フック