[javascript] Three.js를 사용한 웹 3D 애니메이션
Three.js는 웹에서 3D 그래픽을 생성하고 제어하는 JavaScript 라이브러리입니다. 페이스북이 개발한 React와 같이 Three.js는 3D 그래픽 애니메이션 개발을 간편하게 만들어 줍니다. Three.js를 사용하면 브라우저를 통해 다양한 형식의 3D 모델을 만들고 조작할 수 있습니다.
Three.js의 기능
Three.js를 사용하면 다음과 같은 기능을 사용할 수 있습니다.
- 3D 모델의 로딩 및 표시
- 조명과 재질을 사용한 실시간 렌더링
- 카메라 컨트롤 및 애니메이션
- 쉐이더를 사용한 사용자 정의 그래픽 처리
- 물리 시뮬레이션
- VR(가상현실) 및 AR(증강현실) 지원
Three.js 설치하기
Three.js를 사용하려면 우선 Three.js 라이브러리를 다운로드하거나 CDN을 사용하여 웹 페이지에 추가해야 합니다. 다음은 npm을 통해 Three.js를 설치하는 방법입니다.
npm install three
또는 CDN을 사용하여 Three.js 스크립트를 추가할 수도 있습니다.
<script src="https://cdn.jsdelivr.net/npm/three@0.132.0/build/three.min.js"></script>
Three.js 사용하기
Three.js를 사용하여 간단한 3D 애니메이션을 만들어 보겠습니다. 먼저 HTML 파일에 다음과 같이 <div> 요소를 추가해 줍니다.
<div id="myCanvas"></div>
그리고 JavaScript에서 Three.js를 초기화하고 3D 캔버스를 생성하는 코드를 작성합니다.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("myCanvas").appendChild(renderer.domElement);
위의 코드는 Three.js 캔버스를 생성하고 렌더러를 초기화합니다.
마지막으로, 애니메이션 루프를 설정하여 매 프레임마다 갱신되는 애니메이션을 만듭니다.
function animate() {
requestAnimationFrame(animate);
// 애니메이션 코드 작성
renderer.render(scene, camera);
}
animate();
위의 코드는 animate 함수를 사용하여 애니메이션 루프를 설정하고, renderer.render 메서드를 사용하여 씬과 카메라를 렌더링합니다. 이제 애니메이션을 만들 준비가 되었습니다!