three.js CameraControl - PointerLockControls

javascript에는 pointer lock api라는 것이 있어 브라우저에서 마우스 포인터를 사라지고 고정시키는 역할을 한다. 

PointerLockControls는 이를 three.js에서 간편하게 구현한 컨트롤러이다.

 

import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls'	

// Controls
const controls = new PointerLockControls(camera, renderer.domElement);

controls.domElement.addEventListener('click', () =>{
    controls.lock();
});
controls.addEventListener('lock', ()=>{
    console.log('lock!');
});
controls.addEventListener('unlock', ()=>{
    console.log('unlock!');
})

PointerLockControls를 이용하여 클릭했을 때 마우스 포인터를 lock시키고, esc를 누르면 unlock하도록 할 수 있다.