【Three.js】入力を Phaser で処理する

2024年1月8日

どうもです、タドスケです。

しぬまでワクワクしていたい

【Three.js】3D ステージ内の移動 | しぬまでワクワクしていたいどうもです、タドスケです。前回はマウス入力を扱ったので、今回はキーボード入力を使ってゲームに応用できそうなものを作ってみました。完成品 WASD キーで上下左右に移…

前回のプログラムを作っていて、入力周りなどの「Three.js（3D 描画）と関係のないコード」をもう少し簡潔に書けないかなーと思いました。

入力用のライブラリを自分で作っても良いのですが、ふと

以前に使った Phaser の入力機能だけ持ってこれないかな？

と思い立ちました。

Phaser については、以下のシリーズで触っています。

しぬまでワクワクしていたい

【Part1】スマホで作るPhaserゲーム〜チュートリアル編〜 | しぬまでワクワクしていたいどうもです。タドスケです。 PCに向かえる時間が取れないけど、それでもスキマ時間にスマホでゲームを作りたい！ということで、前回の記事で調査したスマホアプリ：JS An…

そこで、今回は Three.js と Phaser を組み合わせたプログラムに挑戦してみました。

完成品

完成品はこちら！

WASD キーでキューブが移動します
入力は Phaser 側で、キューブの描画は Three.js で行っています。

コード

コードは以下です。
（ChatGPT に生成させたものを一部修正しています）

<!DOCTYPE html>
<html>
<head>
    <title>Phaser の描画を Three.js にする</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script>
    <script src="with_phaser.js"></script>
</body>
</html>

// Three.js 関連の処理を行うクラス
class ThreeJSScene {
    constructor() {
        this.initScene();
        this.createCube();
        this.addLights();
        this.setupCamera();
    }

    // シーンとレンダラーの初期設定
    initScene() {
        this.scene = new THREE.Scene();
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(this.renderer.domElement);
    }

    // キューブを作成する
    createCube() {
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
        this.cube = new THREE.Mesh(geometry, material);
        this.scene.add(this.cube);
    }

    // 光源を追加する
    addLights() {
        // 平行光源
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(1, 2, 1);
        this.scene.add(directionalLight);

        // 環境光源
        const ambientLight = new THREE.AmbientLight(0x404040);
        this.scene.add(ambientLight);
    }

    // カメラを設定する
    setupCamera() {
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        this.camera.position.z = 5;
    }

    // 更新
    update() {
        this.renderer.render(this.scene, this.camera);
    }

    // キューブを移動する
    moveCube(x, y) {
        this.cube.position.x += x;
        this.cube.position.y += y;
    }
}

// Three.js インスタンスの作成
const threeScene = new ThreeJSScene();

// Phaserゲームの設定
const phaserConfig = {
    type: Phaser.HEADLESS,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    input: {
        keyboard: true
    },
    scene: {
        create: create,
        update: update
    }
};

const game = new Phaser.Game(phaserConfig);
let keys; // グローバル変数としてキーボードオブジェクトを宣言

// Phaser：初期化
function create() {
    // WASDキーの設定
    keys = this.input.keyboard.addKeys({
        'up': Phaser.Input.Keyboard.KeyCodes.W,
        'left': Phaser.Input.Keyboard.KeyCodes.A,
        'down': Phaser.Input.Keyboard.KeyCodes.S,
        'right': Phaser.Input.Keyboard.KeyCodes.D
    });
}

// Phaser：更新
function update() {
    // WASDキーによるキューブの移動
    if (keys.left.isDown) {
        threeScene.moveCube(-0.1, 0);
    }
    if (keys.right.isDown) {
        threeScene.moveCube(0.1, 0);
    }
    if (keys.up.isDown) {
        threeScene.moveCube(0, 0.1);
    }
    if (keys.down.isDown) {
        threeScene.moveCube(0, -0.1);
    }

    // Three.jsレンダラーを更新
    threeScene.update();
}