[javascript] Three.js를 사용하여 웹에서의 360도 VR 콘텐츠 개발

29 Nov 2023

javascript

소개

Three.js는 자바스크립트 기반의 3D 라이브러리로, 웹에서 3D 그래픽을 구현하기 위해 많이 사용됩니다. 이 라이브러리를 사용하여 웹에서 360도 가상현실(Virtual Reality, VR) 콘텐츠를 개발하는 방법을 알아보겠습니다.

Three.js 라이브러리 설치

Three.js 라이브러리는 CDN을 통해 간단히 사용할 수 있습니다. HTML 문서의 <head> 태그 안에 다음 코드를 추가하여 라이브러리를 가져옵니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

360도 환경 생성

가상현실 콘텐츠를 개발하기 위해선 사방으로 확장된 360도 환경을 생성해야 합니다. Three.js에서는 SphereGeometry 클래스를 사용하여 구 형태의 3D 모델을 만들 수 있습니다.

const scene = new THREE.Scene();

const geometry = new THREE.SphereGeometry(500, 60, 40);
const material = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load('panorama.jpg'),
  side: THREE.DoubleSide
});
const sphere = new THREE.Mesh(geometry, material);

scene.add(sphere);

위 코드에서 panorama.jpg는 360도 환경의 이미지 경로입니다. SphereGeometry의 첫 번째 파라미터는 반지름, 두 번째 파라미터는 가로 분할 수, 세 번째 파라미터는 세로 분할 수를 의미합니다.

카메라 생성

VR 콘텐츠를 사용자가 돌아다닐 수 있도록 카메라를 생성해야 합니다. Three.js에서는 PerspectiveCamera 클래스를 사용하여 카메라를 생성할 수 있습니다.

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

camera.position.set(0, 0, 0.1);
scene.add(camera);

위 코드에서 PerspectiveCamera의 첫 번째 파라미터는 시야각, 두 번째 파라미터는 카메라의 가로 세로 비율, 세 번째와 네 번째 파라미터는 가까운 면과 먼 면을 의미합니다. camera.position.set을 사용하여 카메라의 위치를 설정할 수 있으며, x, y, z 좌표로 설정할 수 있습니다.

렌더러 생성

Three.js에서는 WebGLRenderer 클래스를 사용하여 3D 콘텐츠를 렌더링할 수 있습니다. 이를 위해 HTML 문서의 <body> 태그 안에 <canvas> 태그를 추가합니다.

<canvas id="canvas"></canvas>

그리고 자바스크립트에서 다음 코드를 작성하여 렌더러를 생성합니다.

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#canvas')
});

renderer.setSize(window.innerWidth, window.innerHeight);

위 코드에서 setSize 메소드의 파라미터로는 렌더러의 크기를 지정합니다. window.innerWidth와 window.innerHeight를 사용하여 브라우저 창의 크기에 맞게 설정합니다.

사용자 입력 처리

VR 콘텐츠에서 사용자 입력은 중요한 역할을 수행합니다. 사용자가 콘텐츠를 돌아다니기 위해 마우스나 터치 입력을 처리할 수 있도록 다음 코드를 추가합니다.

const controls = new THREE.OrbitControls(camera, renderer.domElement);

controls.enableZoom = false; // 줌 기능 비활성화
controls.enablePan = false; // 팬 기능 비활성화
controls.autoRotate = true; // 자동 회전 활성화
controls.autoRotateSpeed = 0.5; // 자동 회전 속도 설정

위 코드에서 OrbitControls 클래스는 마우스나 터치 입력을 이용하여 카메라를 움직일 수 있도록 도와줍니다. enableZoom과 enablePan은 줌과 팬 기능을 사용할지 여부를 설정하는 옵션입니다. autoRotate는 콘텐츠를 자동으로 회전시키는 기능을 활성화합니다. autoRotateSpeed는 자동 회전 속도를 조절하는 값입니다.

애니메이션 루프

Three.js에서 3D 콘텐츠를 움직이고 갱신하기 위해 애니메이션 루프를 사용합니다. 다음 코드를 사용하여 애니메이션 루프를 만들 수 있습니다.

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

animate();

위 코드에서 requestAnimationFrame은 브라우저에게 애니메이션을 업데이트하도록 요청합니다. renderer.render 메소드를 사용하여 씬과 카메라를 렌더링합니다. animate 함수를 호출하여 애니메이션 루프를 시작합니다.

결론

이렇게 Three.js를 사용하여 웹에서의 360도 VR 콘텐츠를 개발하는 방법을 알아보았습니다. Three.js를 이용하면 웹 브라우저 상에서도 가상현실 콘텐츠를 간편하게 개발할 수 있습니다. Three.js 공식 문서와 예제를 참고하여 추가적인 개발을 진행해 보세요.

소개