[javascript] Three.js를 사용하여 웹에서의 3D 디지털 트윈 개발

29 Nov 2023

javascript

웹 개발에서 3D 디지털 트윈이란 객체나 캐릭터의 3D 모델을 만들고, 그 모델을 사용하여 움직임을 만들어내는 것을 말합니다. Three.js는 웹에서 3D 그래픽을 쉽게 구현할 수 있도록 도와주는 JavaScript 라이브러리입니다. Three.js를 사용하면 웹 페이지에서 3D 디지털 트윈을 만들 수 있으며, 다양한 애니메이션 효과와 상호작용을 추가할 수 있습니다.

Three.js 시작하기

Three.js 설치하기

Three.js를 사용하기 위해선 먼저 다운로드 및 설치해야 합니다. 아래 방법을 따라 Three.js를 설치할 수 있습니다.

https://threejs.org/로 이동하여 Three.js의 최신 버전을 다운로드합니다.
다운로드한 파일을 프로젝트의 디렉토리에 추가합니다.
HTML 파일에서 Three.js 파일을 로드합니다.

<script src="/path/to/three.js"></script>

Three.js를 사용하여 3D 모델 만들기

Three.js를 사용하여 3D 모델을 만들기 위해선 몇 가지 단계를 거쳐야 합니다.

Scene(장면) 생성하기: Three.js에서 모든 객체는 Scene에 추가되어 표시됩니다.
Camera(카메라) 생성하기: 모델을 볼 수 있도록 시점을 설정합니다.
Renderer(렌더러) 생성하기: 3D 모델을 렌더링하기 위한 WebGL 위에 2D 그래픽을 그립니다.
Geometry(기하학) 생성하기: 모델의 형태와 구조를 설명합니다.
Material(재질) 생성하기: 모델의 외관과 속성을 설정합니다.
Mesh(메시) 생성하기: Geometry와 Material을 결합하여 실제 3D 모델을 만듭니다.
Light(조명) 생성하기: 모델에 조명 효과를 추가합니다.

// Scene 생성하기
const scene = new THREE.Scene();

// Camera 생성하기
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Renderer 생성하기
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Geometry 생성하기
const geometry = new THREE.BoxGeometry();

// Material 생성하기
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// Mesh 생성하기
const cube = new THREE.Mesh(geometry, material);

// Scene에 Mesh 추가하기
scene.add(cube);

// 조명 생성하기
const light = new THREE.PointLight(0xffffff);
light.position.set(10, 10, 10);
scene.add(light);

// 애니메이션 함수 정의하기
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}

// 애니메이션 시작하기
animate();

위 코드는 Three.js를 사용하여 간단한 큐브를 만들고 회전하는 애니메이션을 추가한 예시입니다.

결론

Three.js는 웹 개발에서 3D 디지털 트윈을 구현하는 데 사용되는 강력한 JavaScript 라이브러리입니다. Three.js를 사용하면 웹 페이지에서 세련된 3D 그래픽을 구현할 수 있으며, 다양한 애니메이션과 상호작용을 추가할 수 있습니다. 웹 개발에 관심 있는 개발자라면 Three.js를 통해 쉽고 빠르게 3D 디지털 트윈을 개발해보는 것을 추천합니다.

Three.js 시작하기

Three.js 설치하기

Three.js를 사용하여 3D 모델 만들기

결론

참고 자료