728x90

웹 애플리케이션에서 사용자가 직접 파일을 선택하고, 그 파일을 Three.js를 사용해 표시하는 방법을 설명하겠습니다. 여기서는 사용자가 GLTF 파일을 선택하여 브라우저에서 렌더링하는 예제를 다뤄볼게요.

Step-by-Step 코드 설명

  1. HTML 파일 입력: 사용자가 파일을 선택할 수 있도록 <input type="file">을 HTML에 추가합니다.
  2. GLTFLoader 사용: 사용자가 선택한 파일을 GLTFLoader로 읽어들여 장면에 추가합니다.
  3. Scene 구성: 선택된 모델을 표시하기 위한 Scene, Camera, Lighting 등을 설정합니다.
  4. Renderer 구성: 렌더러를 설정하고, 장면을 렌더링합니다.

HTML 구조

먼저, HTML 구조를 설정해보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js GLTF Loader</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <input type="file" id="file-input" accept=".gltf,.glb">
    <canvas id="c"></canvas>
    <script type="module" src="main.js"></script>
</body>
</html>

JavaScript 코드 (main.js)

이제, JavaScript 코드에서 파일을 읽어들이고 렌더링하는 부분을 작성해보겠습니다.

import * as THREE from 'https://cdn.skypack.dev/three@0.152.2';
import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.152.2/examples/jsm/loaders/GLTFLoader.js';

const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({ canvas });

const scene = new THREE.Scene();

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

// Light 구성
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);

const ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
scene.add(ambientLight);

// 파일 선택 이벤트 핸들러
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.readAsArrayBuffer(file);

        reader.onload = function(event) {
            const contents = event.target.result;

            // 로드한 파일을 GLTFLoader로 읽어들임
            const loader = new GLTFLoader();
            loader.parse(contents, '', (gltf) => {
                const model = gltf.scene;
                scene.add(model);
            }, (error) => {
                console.error('An error occurred while parsing the model:', error);
            });
        };
    }
});

function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
        renderer.setSize(width, height, false);
    }
    return needResize;
}

function render() {
    resizeRendererToDisplaySize(renderer);

    renderer.render(scene, camera);

    requestAnimationFrame(render);
}

requestAnimationFrame(render);

동작 설명

  1. 파일 선택: HTML에서 <input type="file">을 사용해 사용자가 GLTF 또는 GLB 파일을 선택할 수 있도록 합니다.
  2. FileReader 사용: 선택된 파일을 FileReader로 읽어들여, GLTFLoader가 사용할 수 있는 바이너리 데이터로 변환합니다.
  3. GLTFLoader: GLTFLoader.parse() 메서드를 사용해, 로드된 바이너리 데이터를 파싱하고 Three.js Scene에 추가합니다.
  4. 렌더링: 렌더링 루프가 지속적으로 실행되며, 사용자가 선택한 모델이 화면에 표시됩니다.

참고사항

  • 이 예제에서는 GLTF/GLB 파일만 지원하지만, 다른 파일 형식을 로드하려면 해당 형식에 맞는 로더를 사용하면 됩니다.
  • 브라우저에서 GLTF/GLB 파일을 직접 선택하고 렌더링하므로, 로컬 파일이나 서버의 파일 경로를 지정하지 않아도 됩니다.
  • 사용자가 선택한 모델이 크거나 복잡한 경우, 로드 시간이 걸릴 수 있으며, 이 경우 추가적인 로딩 표시를 구현할 수 있습니다.

이 코드를 로컬 개발 환경에서 HTML 파일과 JavaScript 파일로 구성하여 실행하면, 파일을 선택한 후 해당 3D 모델이 화면에 표시되는 것을 확인할 수 있습니다. 더 궁금한 사항이 있다면 언제든지 질문해 주세요!

728x90
반응형
저작자표시 비영리 동일조건

'Software > JavaScript' 카테고리의 다른 글

Javascript 시작하기 - WebSerial 사용  (0) 2024.08.22
Javascript 시작하기 -PWA 소개  (0) 2024.08.07
Javascript 시작하기 - GIS 라이브러리  (0) 2024.08.06
Javascript 시작하기 - 3D 라이브러리  (0) 2024.08.06
Javascript 시작하기 - console 객체 2  (0) 2024.08.03

+ Recent posts

티스토리툴바