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

カメラコントロール

ほとんどのアプリケーションでは、ユーザーがカメラを動かす手段が必要です。これを一から書く代わりに、エンジンに付属する scripts/esm/camera-controls.mjs の CameraControls スクリプトを使用できます。1つのスクリプトで、プロダクション品質のナビゲーションが手に入ります:

  • オービット — マウスの左ドラッグでフォーカスポイントを中心に回転、右ドラッグでパン、マウスホイールでズームします。
  • フライ — WASDキーでカメラを自由に移動しながら、マウスで視点を動かします。
  • タッチとゲームパッド — マルチタッチジェスチャーとゲームパッド入力を標準でサポートします。

スクリプトをカメラエンティティにアタッチします:

// スクリプトを読み込む（ここではCDNから。アプリにバンドルすることも可能）
const asset = new pc.Asset('camera-controls', 'script', {
    url: 'https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs'
});
app.assets.add(asset);
app.assets.load(asset);

asset.ready(() => {
    // カメラエンティティにアタッチする
    camera.addComponent('script');
    camera.script.create('cameraControls', {
        properties: {
            focusPoint: new pc.Vec3(0, 1, 0)
        }
    });
});

バンドラーを使用してアプリをビルドする場合は、代わりにスクリプトクラスを直接インポートできます:

import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';

camera.addComponent('script');
camera.script.create(CameraControls);

設定​

このスクリプトは豊富な属性を公開しています。よく使われるものは次のとおりです:

属性デフォルト説明
enableOrbittrueオービットコントロールを有効にする
enableFlytrueフライコントロールを有効にする
enablePantrueパンを有効にする
focusPoint[0, 0, 0]カメラが周回する中心点
rotateSpeed0.2回転の感度
moveSpeed10フライの移動速度（moveFastSpeed と moveSlowSpeed のバリエーションあり）
zoomSpeed0.001ズームの感度
pitchRange[-360, 360]カメラのピッチ角の制限（度単位）
zoomRange[0.01, 0]ズーム距離の最小/最大（最大が0の場合は無制限）

ダンピング属性（rotateDamping、moveDamping、zoomDamping、focusDamping、すべてデフォルトは 0.98）は、動きがどれだけ滑らかに減速するかを制御します。0にすると即座に停止します。純粋なオービットカメラを作るにはフライを無効に、純粋なフライカメラを作るにはオービットを無効にしてください。

サンプル​

エンジンのサンプルでスクリプトの動作を確認できます:

Orbit Camera
Fly Camera

独自のカメラロジックを構築したい場合は、Orbit Cameraチュートリアルで完全な実装を解説しています。