three.js CameraControl - 게임 컨트롤러 만들기

게임에서 방향키나 WASD를 이용해 전후좌우로 움직이는 컨트롤러를 만들어보자.

 

// KeyController.js

export class KeyController{
    constructor(){
        this.keys = [];

        window.addEventListener('keydown', e=>{
            this.keys[e.code] = true;
        });

        window.addEventListener('keyup', e=>{
            delete this.keys[e.code];
        });
    }
}

KeyController 객체를 만들어서 특정 키보드가 눌렸을 때 key code를 true로 만들고, 떼었을 때 삭제하는 객체를 생성하였다.

 

// main.js 

import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls'
import { KeyController } from './KeyController';

...

// keyboard control
const keyController = new KeyController();

function walk() {
    if(keyController.keys['KeyW'] || keyController.keys['ArrowUp']){
        controls.moveForward(0.05);
    }
    if(keyController.keys['KeyS'] || keyController.keys['ArrowDown']){
        controls.moveForward(-0.05);
    }
    if(keyController.keys['KeyA'] || keyController.keys['ArrowLeft']){
        controls.moveRight(-0.05);
    }
    if(keyController.keys['KeyD'] || keyController.keys['ArrowRight']){
        controls.moveRight(0.05); 
    }
}

function draw() {
    const delta = clock.getDelta();

    walk();

    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
}

KeyController객체를 이용하여 key code가 눌린 상태이면 controls의 move로 이동하도록 한다.