three.js texture 적용하기

// webpack.config.js

{	
    plugins: [

    	...

        new CopyWebpackPlugin({
            patterns: [
                { from: "./src/main.css", to: "./main.css" },
                { from: "./src/textures", to: "./textures" },
                // { from: "./src/models", to: "./models" },
                // { from: "./src/sounds", to: "./sounds" }
            ],
        })
    ]
}

css나 텍스처와 같이 그대로 복사할 파일들은 webpack의 CopyWebpackPlugin을 사용한다.

 

// main.js

// texture
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(
    '텍스처 경로...',
    () => {
        console.log('로드 완료');
    },
    () => {
        console.log('로드 중');
    },
    () => {
        console.log('로드 에러');
    },
);

const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshStandardMaterial({
    map: texture,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

textureLoader를 이용해서 texture를 로드하고, material에 map으로 적용하면 텍스처를 적용할 수 있다.

 

// main.js

// texture
const loadingManager = new THREE.LoadingManager();
loadingManager.onStart = () => {
    console.log('로드 시작');
};
loadingManager.onProgress = img => {
    console.log(img + ' 로드');
};
loadingManager.onLoad = () => {
    console.log('로드 완료');
};
loadingManager.onError = () => {
    console.log('에러');
};

const textureLoader = new THREE.TextureLoader(loadingManager);
const baseColorTex = textureLoader.load(
    'basecolor 텍스처 경로');
const ambientTex = textureLoader.load(
    'ambientOcclusion 텍스처 경로');
const normalTex = textureLoader.load(
    'normal 텍스처 경로');
const roughnessTex = textureLoader.load(
    'roughness 텍스처 경로');
const heightTex = textureLoader.load(
    'height 텍스처 경로');
    
...

const material = new THREE.MeshStandardMaterial({
    map: baseColorTex,
    // map: ambientTex,
    // map: normalTex,
    // map: roughnessTex,
    // map: heightTex,
});

위와 같이 여러 개의 텍스처를 load한 다음 사용할 수 있다.