three.jsでtexture、normalMap、roughnessMapを貼ってみた

webpackでexrファイルの読み込みは

file-loaderにexrと記述するだけ

{

　　test: /\.(jpg|png|gif|exr|svg|gltf|glb)$/,

　　　　use: [

　　　　　　　　　　　　{

　　　　　　　　　　　　　loader: 'file-loader',

　　　　　　　　　　　　　options: {

　　　　　　　　　　　　　outputPath: 'assets/images/',

　　　　　　　　　　　},

　　　　　　　},

　　　],

}

nomalmapを使う時はEXRLoaderを使う

this.exrloader = new EXRLoader();

 

const geometry = new THREE.SphereGeometry(30, 30, 30);

const texture = new THREE.TextureLoader().load(textures[i], (texture) => {

　　　　　texture.wrapS = THREE.RepeatWrapping;

　　　　　texture.wrapT = THREE.RepeatWrapping;

　　　　　texture.repeat.set(1, 1);

});

 

const nomal = this.exrloader.load(leathernormal, (texture) => {

texture.wrapS = THREE.RepeatWrapping;

texture.wrapT = THREE.RepeatWrapping;

texture.repeat.set(1, 1);

}

 

~

const material = new THREE.MeshStandardMaterial({

　　　　map: texture,

　　　　normalMap: normal,

　　　　roughnessMap: rough,

});