Three.js는 웹에서 3D 그래픽을 생성하고 표현하기 위한 자바스크립트 라이브러리입니다. 이를 이용하여 텍스처 매핑을 적용해보겠습니다.

텍스처 매핑이란?

텍스처 매핑은 3D 모델의 표면에 이미지를 입히는 기술입니다. 이를 통해 모델에 현실적인 디테일을 추가하거나 원하는 느낌을 연출할 수 있습니다.

Three.js에서 텍스처 매핑 적용하기

Three.js에서 텍스처를 적용하기 위해서는 먼저 이미지를 로드하고 해당 이미지를 텍스처로 만들어야 합니다. 그리고 해당 텍스처를 사용할 재질(Material)에 할당하고, 모델에 적용하는 순서로 진행됩니다.

이미지 로드하기

var textureLoader = new THREE.TextureLoader();
textureLoader.load('texture.jpg', function(texture) {
    // 텍스처 로드 완료 후 처리 로직
});

위의 코드에서 texture.jpg는 적용할 텍스처 파일의 경로입니다. 로드 완료 후 처리할 로직을 적용하면 됩니다.

텍스처를 재질에 할당하기

var material = new THREE.MeshBasicMaterial({
    map: texture
});

var geometry = new THREE.BoxGeometry(1, 1, 1);
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

위의 코드에서 texture는 로드한 텍스처입니다. MeshBasicMaterial을 사용하여 텍스처를 재질에 할당합니다.

모델에 텍스처 적용하기

var loader = new THREE.GLTFLoader();

loader.load('model.glb', function(gltf) {
    gltf.scene.traverse(function(node) {
        if (node.isMesh) {
            node.material.map = texture;
        }
    });

    scene.add(gltf.scene);
});

위의 코드에서 model.glb는 적용할 3D 모델 파일의 경로입니다. 로드한 모델의 scene을 순회하면서 메시(Mesh)인 경우 텍스처를 할당합니다.

결론

Three.js를 이용하여 텍스처 매핑을 적용하는 방법을 살펴보았습니다. 이를 통해 보다 풍부한 3D 환경과 현실감 있는 표현을 구현할 수 있습니다.

참고 자료

• Three.js 공식 문서
• 제목을 적어주세요!