재질, 여러 이미지 텍스쳐가 적용된 큐브

 

각 면에 다른 텍스쳐 넣기

  /* 6개의 텍스쳐 이미지 로드 */
  // 주의 : webpack.config.js파일 CopyWebpackPlugin에서 textures의 경로 설정이 되었는지 체크하기
  const textureLoader = new THREE.TextureLoader(loadingManager);
  const rightTexture = textureLoader.load("/textures/mcstyle/right.png");
  const leftTexture = textureLoader.load("/textures/mcstyle/left.png");
  const topTexture = textureLoader.load("/textures/mcstyle/top.png");
  const bottomTexture = textureLoader.load("/textures/mcstyle/bottom.png");
  const frontTexture = textureLoader.load("/textures/mcstyle/front.png");
  const backTexture = textureLoader.load("/textures/mcstyle/back.png");
 
  /* 여러 이미지 텍스쳐가 적용된 큐브 */
  const materials = [
    new THREE.MeshBasicMaterial({ map: rightTexture }),
    new THREE.MeshBasicMaterial({ map: leftTexture }),
    new THREE.MeshBasicMaterial({ map: topTexture }),
    new THREE.MeshBasicMaterial({ map: bottomTexture }),
    new THREE.MeshBasicMaterial({ map: frontTexture }),
    new THREE.MeshBasicMaterial({ map: backTexture })
  ];

 

 

magFilter란?

• magFilter는 텍스처가 확대될 때 어떤 방식으로 보간(Interpolation)할지를 결정하는 속성이다.
• 즉, 텍스처가 확대될 때 텍스처의 픽셀이 어떻게 화면에 표시될지를 제어한다.

 

 

THREE.NearestFilter란?

• NearestFilter는 가장 가까운 텍셀(texel, 텍스처의 픽셀)을 선택하는 방식으로 확대를 처리한다.
• 이 필터를 사용하면 텍스처가 확대될 때 부드러운 보간 없이 픽셀이 그대로 보이게 되어, 블록 모양의 픽셀화된 느낌을 준다.
• 고해상도보다는 저해상도나 픽셀 아트 스타일의 그래픽을 구현할 때 유용하다.

 

 

  // magFilter - 텍스처가 확대될 때 텍스처의 픽셀이 어떻게 화면에 표시될지를 제어
  // THREE.NearestFilter - 부드러운 보간 없이 픽셀이 그대로 보이게 되어, 블록 모양의 픽셀화된 느낌을 준다.
  rightTexture.magFilter = THREE.NearestFilter;
  leftTexture.magFilter = THREE.NearestFilter;
  topTexture.magFilter = THREE.NearestFilter;
  bottomTexture.magFilter = THREE.NearestFilter;
  frontTexture.magFilter = THREE.NearestFilter;
  backTexture.magFilter = THREE.NearestFilter;