【Playcanvas】カメラを自由自在に操ってみよう！

福田です！
本日はPlayCanvasでカメラ移動をさせていきます！

PlayCanvas上で物を配置したものを自由に見まわしたいときがあると思います。
そんな時にカメラの動かし方を知らなければ大変です！ここで勉強していつでも動かせるようになっておきましょう！

とりあえずソースコードです！

var CameraControl = pc.createScript('cameraControl');

// カメラの移動速度
CameraControl.attributes.add('moveSpeed', { type: 'number', default: 10 });
CameraControl.attributes.add('lookSpeed', { type: 'number', default: 0.25 }); // 新しい属性：カメラの見回す速度

// 初期化処理
CameraControl.prototype.initialize = function () {
    this.eulers = new pc.Vec3();
    this.moveDir = new pc.Vec3();

    this.bindEvents(true);

    this.move = {
        forward: false,
        back: false,
        left: false,
        right: false
    };

    // マウスイベントの追加
    if (this.app.mouse) {
        this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
        this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
    }

    // カメラの角度
    this.eulers = new pc.Vec3();

};

// イベントリスナーのバインド/アンバインド
CameraControl.prototype.bindEvents = function (bind) {
    var app = pc.app;
    var method = bind ? 'on' : 'off';

    app.keyboard[method](pc.EVENT_KEYDOWN, this.onKeyDown, this);
    app.keyboard[method](pc.EVENT_KEYUP, this.onKeyUp, this);
};

// キーボードが押された時の処理
CameraControl.prototype.onKeyDown = function (event) {
    this.updateMoveDirection(event.key, true);
};

// マウスクリック時の処理
CameraControl.prototype.onMouseDown = function (event) {
    // 左クリックでポインタロック
    if (event.button === pc.MOUSEBUTTON_LEFT) {
        // if (!this.app.mouse.isPointerLocked()) { // ポインタがロックされていない場合のみロックする
        this.app.mouse.enablePointerLock();
        // }
    }
};

// マウス移動時の処理
CameraControl.prototype.onMouseMove = function (event) {
    if (!pc.Mouse.isPointerLocked()) return; // ポインタロックが必要


    // マウスの動きに応じて角度を変更
    this.eulers.x -= event.dy * this.lookSpeed;
    this.eulers.y -= event.dx * this.lookSpeed;

    // 角度の制限
    this.eulers.x = pc.math.clamp(this.eulers.x, -90, 90);

    // カメラの回転を更新
    this.entity.setLocalEulerAngles(this.eulers.x, this.eulers.y, 0);
};

// キーボードが離された時の処理
CameraControl.prototype.onKeyUp = function (event) {
    this.updateMoveDirection(event.key, false);
};

// 移動方向の更新
CameraControl.prototype.updateMoveDirection = function (key, isPressed) {
    switch (key) {
        case pc.KEY_W:
        case pc.KEY_UP:
            this.move.forward = isPressed;
            break;
        case pc.KEY_S:
        case pc.KEY_DOWN:
            this.move.back = isPressed;
            break;
        case pc.KEY_A:
        case pc.KEY_LEFT:
            this.move.left = isPressed;
            break;
        case pc.KEY_D:
        case pc.KEY_RIGHT:
            this.move.right = isPressed;
            break;
    }
};

// 更新処理
CameraControl.prototype.update = function (dt) {
    var moveSpeed = this.moveSpeed * dt;

    this.moveDir.set(0, 0, 0);
    if (this.move.forward) this.moveDir.add(this.entity.forward);
    if (this.move.back) this.moveDir.sub(this.entity.forward);
    if (this.move.right) this.moveDir.add(this.entity.right);
    if (this.move.left) this.moveDir.sub(this.entity.right);

    this.moveDir.normalize().scale(moveSpeed);
    this.entity.translate(this.moveDir);
};

このコードをカメラエンティティにくっつけてあげるとカメラが自由に動くようになります！

下で解説します！

スクリプトの初期化

カメラコントロールの作成:
var CameraControl = pc.createScript('cameraControl'); は新しいカメラコントロールスクリプトを作成します。
属性の追加:
moveSpeed と lookSpeed は、それぞれカメラの移動速度と視点移動の速度を制御するための属性です。

初期化処理

変数の設定:
this.eulers と this.moveDir は、それぞれカメラの角度と移動方向を保存するためのベクトルです。
イベントリスナーの設定:
キーボードとマウスの入力に基づいてカメラを操作するためのイベントリスナーを設定します。

イベントハンドラ

キーボードイベント:
onKeyDown と onKeyUp は、キーボードのキーが押されたり離されたりしたときに呼び出される関数です。これにより、特定のキーでカメラの移動方向を制御します。
マウスイベント:
onMouseDown は、マウスのボタンがクリックされたときにポインターロックを有効にする関数です。onMouseMove は、マウスが動いたときにカメラの視点を移動する関数です。