[javascript] Three.js를 사용하여 실시간 3D 시뮬레이션 구현
Three.js는 웹 브라우저에서 3D 그래픽을 생성하고 제어하기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 간단한 코드로도 멋진 3D 시뮬레이션을 만들 수 있습니다.
Three.js 설치
Three.js를 사용하기 위해 먼저 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령어를 실행하여 Three.js를 설치하세요.
npm install three
HTML 파일 설정
Three.js를 사용하기 위해 HTML 파일을 설정해야 합니다. 다음과 같이 HTML 파일을 작성하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D 시뮬레이션</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="path/to/three.min.js"></script>
<script src="path/to/main.js"></script>
</body>
</html>
three.min.js 파일은 Three.js 라이브러리 파일이 위치한 경로로 수정해야 합니다. main.js 파일은 시뮬레이션을 구현할 JavaScript 파일의 경로로 수정해야 합니다.
JavaScript 파일 작성
main.js 파일에 실제 3D 시뮬레이션을 구현하는 코드를 작성합니다.
// Scene, Camera, Renderer 생성
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.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 카메라 위치 설정
camera.position.z = 5;
// 애니메이션 함수
function animate() {
requestAnimationFrame(animate);
// 큐브 회전
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
// 애니메이션 시작
animate();
위 코드는 Three.js를 사용하여 회전하는 색상이 바뀌는 큐브를 시뮬레이션하는 예제입니다. 코드를 실행하면 웹 브라우저에서 3D 시뮬레이션을 볼 수 있습니다.
결론
Three.js를 사용하면 웹 브라우저에서 간단하게 3D 그래픽을 구현할 수 있습니다. 이 라이브러리의 다양한 기능을 활용하여 실시간 3D 시뮬레이션을 구현해보세요.