[javascript] Three.js를 사용하여 웹에서의 실시간 체스 게임 구현

29 Nov 2023

javascript

이번 포스트에서는 Three.js를 사용하여 웹에서 실시간 체스 게임을 구현하는 방법에 대해 알아보겠습니다. Three.js는 JavaScript 3D 라이브러리로, 웹 브라우저에서 3D 콘텐츠를 만들고 제어할 수 있게 해줍니다.

1. Three.js 설치

먼저 Three.js를 설치해야 합니다. 다음 명령어를 사용하여 프로젝트에 Three.js를 추가합니다.

npm install three

2. 체스 보드 생성

다음으로 체스 보드를 생성해보겠습니다. 체스 보드를 표현하기 위해 Three.js의 PlaneGeometry를 사용할 수 있습니다. 체스 보드의 너비와 높이를 설정하고, GridHelper를 사용하여 격자를 추가합니다.

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.PlaneGeometry(8, 8);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const chessBoard = new THREE.Mesh(geometry, material);
scene.add(chessBoard);

const gridHelper = new THREE.GridHelper(8, 1, 0xffffff, 0xffffff);
scene.add(gridHelper);

camera.position.z = 10;

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

3. 체스 말 추가

이제 체스 말을 추가해보겠습니다. 먼저 체스 말을 표현하기 위해 SphereGeometry를 사용할 수 있습니다. 각 체스 말을 그리드 좌표에 배치하고, Material과 Mesh를 사용하여 스타일을 적용합니다.

// 체스 말 추가
const pawnGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const pawnMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const whitePawn = new THREE.Mesh(pawnGeometry, pawnMaterial);
whitePawn.position.x = -3.5;
whitePawn.position.y = -3.5;
scene.add(whitePawn);

const kingGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const kingMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const blackKing = new THREE.Mesh(kingGeometry, kingMaterial);
blackKing.position.x = 3.5;
blackKing.position.y = 3.5;
scene.add(blackKing);

4. 움직임 추가

체스 말을 클릭하여 움직일 수 있도록 해보겠습니다. 체스 말을 클릭하면 해당 말이 선택되고, 다시 클릭하면 선택이 해제됩니다. 선택된 말은 키보드 상하좌우 화살표 키를 사용하여 움직일 수 있습니다.

let selectedPiece = null;

function onMouseClick(event) {
  const mouse = new THREE.Vector2(
    (event.clientX / window.innerWidth) * 2 - 1,
    -(event.clientY / window.innerHeight) * 2 + 1
  );

  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);

  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    const object = intersects[0].object;
    
    if (selectedPiece === object) {
      selectedPiece = null;
    } else {
      selectedPiece = object;
    }
  }
}

function onKeyDown(event) {
  if (selectedPiece) {
    const speed = 0.1;
    switch (event.key) {
      case 'ArrowUp':
        selectedPiece.position.y += speed;
        break;
      case 'ArrowDown':
        selectedPiece.position.y -= speed;
        break;
      case 'ArrowLeft':
        selectedPiece.position.x -= speed;
        break;
      case 'ArrowRight':
        selectedPiece.position.x += speed;
        break;
    }
  }
}

window.addEventListener('click', onMouseClick);
window.addEventListener('keydown', onKeyDown);

위의 코드를 추가하면 체스 말을 선택하고 움직일 수 있습니다.

결론

이렇게 Three.js를 사용하여 웹에서 실시간 체스 게임을 구현할 수 있습니다. Three.js를 통해 3D 그래픽을 렌더링하고, 각 체스 말의 행동을 구현할 수 있습니다. Three.js의 다양한 기능을 활용하여 더욱 복잡하고 진보된 체스 게임을 만들 수도 있습니다.