WebGL - 인터랙티브 큐브

안녕하세요, 야심 찬 프로그래머 여러분! 오늘 우리는 WebGL의 세계로 흥미로운 여정을 떠납니다. 마우스로 회전시킬 수 있는 인터랙티브 큐브를 만들어 보겠습니다. 코드를 작성한 적이 없어도 걱정 마세요 - 여러분을 단계별로 안내해 드리겠습니다. 지혜로운 늙은 거북이의 인내심을 가지고 가요. 시작해 보겠습니다!

WebGL - Interactive Cube

기본 개념 이해

큐브를 그리기 전에 몇 가지 기본 개념을 빠르게 다루어 보겠습니다.

WebGL이란?

WebGL (Web Graphics Library)는 브라우저에서 3D 그래픽을 렌더링할 수 있게 해주는 JavaScript API입니다. 웹 페이지에 강력한 슈퍼파워를 부여하여 놀라운 시각 효과를 만들 수 있습니다!

필요한 것들

텍스트 편집기 (Notepad++나 Visual Studio Code 등)
웹 브라우저 (Chrome, Firefox 또는 현대적인 브라우저)
약간의 호기심과 한 가닥 인내심!

예제 - 인터랙티브 큐브 그리기

단계 1: HTML 설정

먼저, 우리 웹 페이지의 뼈대를 만들어 보겠습니다. 텍스트 편집기를 열고 interactive_cube.html이라는 새 파일을 생성합니다. 다음 코드를 복사하고 붙여넣습니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebGL Interactive Cube</title>
<style>
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// 우리 WebGL 코드가 여기 들어갈 자리입니다
</script>
</body>
</html>

이 코드는 우리의 HTML 구조를 설정하고 Three.js 라이브러리를 포함시킵니다. Three.js는 WebGL 작업을 훨씬 쉽게 만들어 줍니다.

단계 2: 시ーン 생성

이제 JavaScript를 추가하여 3D 시ーン을 만들어 보겠습니다. 스크립트 태그의 주석을 대체하여 다음 코드를 넣습니다:

// 시ーン, 카메라, 렌더러 설정
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

// 큐브 생성
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

이를 간단히 설명하자면:

우리는 3D 오브젝트의 무대인 시ーン을 만듭니다.
카메라는 우리의 시점을 정의합니다.
렌더러는 시ーン을 그리는 역할을 합니다.
우리는 BoxGeometry를 사용하여 큐브를 만들고 녹색으로 칠합니다.
마지막으로 카메라를 중앙에서 5단위 떨어진 곳에 위치시킵니다.

단계 3: 큐브 애니메이션

큐브를 회전시키기 위해 애니메이션 루프를 추가해야 합니다. 이전 블록 뒤에 다음 코드를 추가합니다:

function animate() {
requestAnimationFrame(animate);

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render(scene, camera);
}
animate();

이 함수는 반복적으로 호출되어 각 프레임에서 큐브를 약간 회전시키고 시ーン을 다시 렌더링합니다.

단계 4: 인터랙티브 만들기

이제 마우스로 큐브를 회전시킬 수 있는 인터랙티브 기능을 추가해 보겠습니다. animate() 함수 앞에 다음 코드를 추가합니다:

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaMove = {
x: e.offsetX - previousMousePosition.x,
y: e.offsetY - previousMousePosition.y
};

cube.rotation.y += deltaMove.x * 0.01;
cube.rotation.x += deltaMove.y * 0.01;
}

previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});

이 코드는 마우스 이벤트에 대한 이벤트 리스너를 추가하여 마우스를 클릭하고 드래그할 때 큐브를 회전시킵니다.

단계 5: 더 재미있게 만들기

큐브를 좀 더 흥미롭게 만들기 위해 각 면에 다른 색상을 주어 보겠습니다. 재질 생성 줄을 다음과 같이 변경합니다:

const materials = [
new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 빨간색
new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 초록색
new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 파란색
new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 노란색
new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 보라색
new THREE.MeshBasicMaterial({ color: 0x00ffff })  // 청록색
];
const cube = new THREE.Mesh(geometry, materials);

이제 우리의 큐브는 각 면마다 다른 색상을 가지게 됩니다!

결론

축하합니다! 여러분은 WebGL을 사용하여 인터랙티브 3D 큐브를 만들었습니다. 이것은 3D 그래픽 프로그래밍의 시작에 불과합니다. 여러분의 여정을 계속하면 더 놀라운 것들을 발견하게 될 것입니다.

코드를 배우는 것은 자전거 타는 것과 같습니다.처음에는 흔들릴 수 있지만, 연습을 하면 곧 자유자재로 타게 됩니다!

여기 우리가 사용한 주요 메서드를 요약한 표입니다:

메서드	설명
`THREE.Scene()`	새로운 3D 시ーン 생성
`THREE.PerspectiveCamera()`	카메라 시점 설정
`THREE.WebGLRenderer()`	시ーン 렌더링 처리
`THREE.BoxGeometry()`	큐브 지오메트리 생성
`THREE.MeshBasicMaterial()`	큐브 재질 정의
`THREE.Mesh()`	지오메트리와 재질 결합
`requestAnimationFrame()`	애니메이션 루프 호출

계속 실험하고, 배우고, 가장 중요한 것은 즐겁게 만들어 보세요! WebGL의 세계는 여러분의 것이며, 여러분은 이를 탐험하기 위해 준비되었습니다. 행복한 코딩을 기원합니다!

Credits: Image by storyset

이전 튜토리얼:

WebGL - 큐브 회전