재질, 로딩 매니저(여러개의 텍스쳐 이미지)

로딩 매니저

• 텍스처를 로드할 때 LoadingManager를 사용하여 로딩 상태를 관리하는 방법이다.
• 이를 통해 로딩 진행 상태를 모니터링하고, 모든 리소스가 성공적으로 로드되었는지 확인할 수 있다.

 

 

 

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(
  "/textures/fabric/Fabric_Weave_001_basecolor.png"
);
const ambientTex = textureLoader.load(
  "/textures/fabric/Fabric_Weave_001_ambientOcclusion.png"
);
const normalTex = textureLoader.load(
  "/textures/fabric/Fabric_Weave_001_normal.png"
);
const roughnessTex = textureLoader.load(
  "/textures/fabric/Fabric_Weave_001_roughness.png"
);
const heightTex = textureLoader.load(
  "/textures/fabric/Fabric_Weave_001_height.png"
);

const material = new THREE.MeshBasicMaterial({
  side: THREE.DoubleSide,
  map: baseColorTex
  // map: ambientTex
  // map: normalTex
  // map: roughnessTex
  // map: heightTex
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);