THREE.js - PointerLockControls(1인칭 카메라 회전 콘트롤)

FPS게임에서 주로 사용하는
3차원 공간 1인칭 카메라 회전 콘트롤을 가능하게 해주는
THREE.js 플러그인(?) 입니다.

여기서 말하는 1인칭 카메라 회전 이란
마우스 이동으로 카메라의 바라보는 방향을 회전시키는,
마우스의 움직임이 내 눈(시선)의 방향을 대신하는 기능 입니다.

아래 동영상은 1인칭 카메라회전을 사용한 간단한 예 입니다.

 

THREE.js 에서는 위와같은 1인칭 카메라회전 기능을
아주 간단하게 적용할 수 있도록
PointerLockControls 라는 플러그인이 준비되어 있습니다.

 

PointerLockControls 적용시키기

플러그인 불러오기

import {PointerLockControls} from "exmples/jsm/controls/PointerLockControls.js";
// 경로는 내부경로, CDN 등 내 환경에 맞춰 바꿔준다.

 

콘트롤 정의

const 포인터록= new PointerLockControls( camera, document.body );
// camera : 미리 정의한 카메라 객체
// document.body : 대상 엘리먼트. 포인터록 콘트롤은 브라우저 전체에 적용되므로 body에 연결해줘야 한다.

 

끝.

 

이렇게
1. 플러그인을 불러오고
2. 콘트롤을 선언해주면
브라우저 화면에 바로 적용이 된다.
정말 이걸로 끝이다.

그러나

사용상 숙지할 사항이 있다.

브라우저 접속시 자동으로 적용되지 않는다.

웹 개인정보 보호규약으로 인한
오디오, 전체화면 등이 자동으로 실행되지 않는것 처럼
PointerLock 기능 역시 자동으로 실행되지 않는다.

사용자의 "클릭"등의 행동으로 해당기능을 직접 실행하도록 해야 한다.
그래서 PointerLock의 기능을 제어하는 함수는 다음과 같다.

포인터록.lock();
// PointerLock 기능 실행.
// 마우스 포인트를 없애고
// 마우스 이동값을 카메라 객체에 전달하여 회전처리를 한다.

포인터록.unlock();
// PointerLock 기능 해제.

브라우저에 "버튼"등의 사용자와의 상호작용 할수있는 것을 만들어놓고
위의 함수를 연결하여 기능을 실행, 해제 시켜주어야 한다.

맨위의 동영상에서는,
처음 접속시 간단한 도움말 화면을 보여주고
화면을 클릭하면
도움말 화면이 사라지면서 PointerLock이 실행되게 해 놓은 것이다.

또한 PointerLock 은 사용자가 "ESC"키를 누르면 해제가 된다.

그래서 거의 필수적으로
PointerLock 사용시에는 lock, unlock 상황에 대한 이벤트리스너를 등록하여
각 상황에 대한 처리를 마련해 놓아야 한다.

포인터록.addEventListener( 'lock', function () {
	console.log('lock');
});

포인터록.addEventListener( 'unlock', function () {
	console.log('unlock');
});

 

PointerLockControls 공식문서
threejs.org/docs/index.html#examples/en/controls/PointerLockControls

three.js docs