Three.js를 활용한 초간단 3D 씬 및 GLTF 모델 로딩 구현

3D 그래픽은 웹에서 인터랙티브한 사용자 경험을 제공하는 중요한 요소입니다. Three.js는 이러한 3D 그래픽을 웹에서 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 이번 글에서는 Three.js를 사용하여 3D 씬을 만들고, 회전하는 큐브, GLTF 모델 로딩, 그리고 카메라 조작을 가능하게 하는 기능을 구현하는 방법을 소개하겠습니다.

 

예시 전체 코드 

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

<div id="canvas-container"></div>

<script>
    // 씬, 카메라, 렌더러 생성
    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.getElementById('canvas-container').appendChild(renderer.domElement);

    // 큐브 생성
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); // Phong 재질로 조명 반응 추가
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    // 조명 추가
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(5, 5, 5).normalize();
    scene.add(light);

    // 애니메이션 루프
    function animate() {
        requestAnimationFrame(animate);

        // 큐브 회전
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
    }
    animate();

    // GLTF 모델 로딩
    const loader = new THREE.GLTFLoader();
    loader.load('path/to/your/model.gltf', function (gltf) {
        scene.add(gltf.scene);
    }, undefined, function (error) {
        console.error('An error occurred while loading the model:', error);
    });

    // OrbitControls 추가 (마우스로 카메라 회전 가능)
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
</script>

 

 

1. Three.js 기본 설치 및 설정

 

CDN 링크 추가:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

 

이 CDN 링크들은 Three.js와 GLTF 파일을 로딩하는 GLTFLoader, 카메라 제어를 위한 OrbitControls를 제공합니다.

 

2. 기본적인 3D 씬 구성

Three.js에서 3D 씬을 구성하려면 씬(Scene), 카메라(Camera), 그리고 렌더러(Renderer)가 필요합니다. 이를 통해 3D 그래픽을 렌더링할 수 있습니다.

 

// 씬, 카메라, 렌더러 생성
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.getElementById('canvas-container').appendChild(renderer.domElement);

camera.position.z = 5;

 

 

• Scene: 모든 3D 객체가 위치할 공간을 정의합니다.
• Camera: 3D 객체를 렌더링할 때, 카메라의 시야각을 설정합니다.
• Renderer: 씬과 카메라 정보를 통해 웹 페이지에 3D 객체를 그립니다.

3. 3D 큐브 생성 및 애니메이션 추가

Three.js는 기본적인 3D 도형(큐브, 구 등)을 쉽게 생성할 수 있습니다. 이번 예시에서는 회전하는 3D 큐브를 추가해 보겠습니다.

// 큐브 생성
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const 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();

 

 

• BoxGeometry: 큐브 형태의 3D 객체를 만듭니다.
• MeshPhongMaterial: 조명에 반응하는 재질을 큐브에 적용하여, 조명 추가 시 더 자연스러운 반응을 표현할 수 있습니다.
• 애니메이션 루프: requestAnimationFrame()을 사용하여 지속적으로 큐브를 회전시킵니다.

 

4. 조명 추가하기

3D 씬에 사실감을 더하려면 조명이 필요합니다. DirectionalLight는 한 방향에서 조명을 비추는 역할을 합니다.

 

// 조명 추가
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5).normalize();
scene.add(light);

 

DirectionalLight: 특정 방향에서 씬을 비추는 조명입니다. 조명을 통해 큐브의 면이 각도에 따라 밝게 또는 어둡게 보이게 만듭니다.

 

5. OrbitControls로 카메라 조작

Three.js는 카메라를 마우스로 조작할 수 있는 기능을 제공합니다. OrbitControls를 사용하면 사용자가 마우스를 통해 카메라를 움직이거나 확대/축소할 수 있습니다.

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

 

 

OrbitControls: 사용자가 마우스로 카메라를 회전시키거나 줌인/줌아웃할 수 있도록 해주는 도구입니다.

 

이 글에서는 Three.js를 이용해 기본적인 3D 씬을 구성하고, 회전하는 큐브, 조명, 외부 GLTF 모델 로딩, 그리고 카메라 조작 기능을 추가하는 방법을 배웠습니다. Three.js는 매우 강력하고 다양한 기능을 제공하는 라이브러리이므로, 이를 통해 더 복잡한 3D 애니메이션과 상호작용을 구현할 수 있습니다.