Three.js를 사용한 3D 그래픽 렌더링
Three.js는 웹 브라우저에서 3D 그래픽을 생성하고 렌더링하기 위한 JavaScript 라이브러리입니다. 이 라이브러리는 WebGL을 기반으로 작동하며, 자바스크립트로 3D 객체를 만들고 조작하는 간편한 인터페이스를 제공합니다.
Three.js를 사용하기 위해서는 몇 가지 단계를 따라야 합니다. 먼저, HTML 파일에 Three.js를 포함하는 스크립트를 추가해야 합니다. 다음으로, 원하는 3D 객체를 생성하고 컨테이너에 추가합니다. 마지막으로, 각 객체의 속성을 설정하고 애니메이션을 적용할 수 있습니다.
아래는 Three.js를 사용하여 3D 그래픽을 렌더링하는 간단한 예제 코드입니다.
// HTML 파일에 Three.js 스크립트 추가
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
// 컨테이너 생성
var container = document.getElementById('container');
// 렌더러 생성
var renderer = new THREE.WebGLRenderer();
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
// 카메라 생성
var camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
camera.position.z = 5;
// 씬 생성
var scene = new THREE.Scene();
// 큐브 생성
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 애니메이션 함수
function animate() {
requestAnimationFrame(animate);
// 큐브 회전
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 렌더링
renderer.render(scene, camera);
}
// 애니메이션 실행
animate();
위의 예제 코드에서는 Three.js를 사용하여 큐브를 생성하고 회전 애니메이션을 적용합니다. 컨테이너에 렌더러를 추가하고, 카메라와 씬을 설정합니다. 마지막으로, 애니메이션 함수를 작성하고 실행합니다.
Three.js를 사용하면 다양한 속성과 기능을 조합하여 원하는 3D 그래픽을 만들 수 있습니다. 자세한 정보와 예제는 Three.js 공식 문서를 참조하시기 바랍니다.