「three.js」키보드로 3D 오브젝트 움직이기

three.js를 활용한다면 키보드와 마우스 반응과 관련된 3D앱을 빠르게 제작할 수 있다. 

 

 

[ 키보드 좌우상하 키 입력시 Box 동작]

 

 

---

| 조건

1) 상자들이 놓여 있고, 키보드의 좌우 컨트롤에 따라 상자들은 좌우로 움직인다. 

2) 키보드의 아래, 위의 화살표 입력키에 따라 상자들이 x축을 기준으로 회전한다. 

 

 

 

 

 

---

| 기본 구조

init함수와 루프 함수(render)를 생성해준다.

 

let scene, camera, renderer, cube, control, light;
let ele = document.getElementById('wd-keyboard')
let cubes = [];
const LEFT = 37, RIGHT = 39, UP = 38, DOWN = 40;
let add = 0.2;

let randomRange = function (from, to) {
    let x = Math.random() * (to - from);
    return from + x;
}


let init = function () {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 45, ele.clientWidth / ele.clientHeight, 0.1, 1000 );
    camera.position.set( -10, 30, -20 );
    camera.lookAt( scene.position );

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( ele.clientWidth, ele.clientHeight );

    scene.background = new THREE.Color( 0xffffff );

    light = new THREE.DirectionalLight( 0xffffff, 1 );
    control = new OrbitControls( camera, renderer.domElement );
    control.update();

    scene.add(light);

    createGeometry();

    ele.appendChild( renderer.domElement );
    document.addEventListener( "keydown", keyCodeOn, false );
}

let render = function () {

    requestAnimationFrame( render );
    renderer.render( scene, camera );

}

 

 

키보드의 e.keyCode 수치를 나타내는 'LEFT', 'RIGHT', 'UP', 'DOWN'을 변수로 지정하고, box의 위치값을 랜덤하게 반환하는 randomRange()함수를 생성한다.

 

 

 

 

 

---

| 3D 오브젝트 생성

화면에 박스 오브젝트를 생성해주는 createGeometry함수를 생성한다. 랜덤 함수를 이용해 대략 10개 정도 띄워준다.

 

let createGeometry = function () {
    
    let geometry = new THREE.BoxGeometry(3, 3, 3);
   
    for (let i = 1; i <= 10; i++) {  

        let material = new THREE.MeshPhongMaterial({
           
            color: Math.random() * 0xffffff,
            shininess: 100,
            side: THREE.doubleside
        
        });
        
        cube = new THREE.Mesh( geometry, material );
        cube.position.x = randomRange( -20, 20 );
        cube.position.z = randomRange( -20, 20 ); 
        cubes.push(cube);
        scene.add(cube);
    
    }

}

 

 

 

 

 

---

| 키보드 이벤트 함수

키보드 이벤트가 발생했을 때, 이벤트와 연결할 수 있는 함수가 필요하다. 사용자의 입력값과 연결할 수 있는 함수, keyCodeOn()을 생성해준다.

 

let keyCodeOn = function(e){ 
    if ( e.keyCode === LEFT ) 
    {
        add = 0.2;
    } 
    else if( e.keyCode === RIGHT )
    {
        add = -0.2;
    }
    else if( e.keyCode === DOWN )
    {
        scene.rotation.x += add;
    }
    else if( e.keyCode === UP )
    {
        scene.rotation.x -= add;
    }
    else
    {
        return;
    }

    cubes.forEach( cube => {
        cube.position.x += add;
    })
}

 

키보드 이벤트의 키값에 따라 add값이 변한다. 이에 따라 add의 값과 연결된 cube.x의 값 역시 변경된다.(x축으로 움직이거나 회전) 

 

 

사실상 3D웹앱에서 키보드 이벤트는 마우스에 비해 사용빈도가 높지 않지만, 부가적인 기능을 개발할 때 중요하게 사용될 수 있다. 그러므로 기본적으로 숙지해야 될 부분이다.