재질, 텍스쳐 이미지 로드하기

 

텍스쳐가 있는 사이트에서 다운로드하기

https://3dtextures.me/

3d texture 구글에 검색해  원하는 텍스쳐 다운로드 하기 

 

기본 예제

  /* 텍스쳐 이미지 로드 */
  const textureLoader = new THREE.TextureLoader();
  const texture = textureLoader.load(
    "./textures/watermelon/Watermelon_001_basecolor.jpg"
  );
  
    /* Messh 만들기 */
  const geometry = new THREE.BoxGeometry(2, 2, 2);
  const material = new THREE.MeshStandardMaterial({
    // color: 'orangered',
    map: texture
  });

• MeshBasicMaterial로 설정해 줄 경우 그림자나 조명 등 효과가 없다.
• 텍스쳐를 적용할 때 어울리는 mesh를 설정해 주면 된다.

 

앞면과 뒷면에 다른 텍스처 적용

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

/* 주제: 텍스쳐 이미지 로드하기 */

const onLoad = () => {
  console.log("로드 완료");
};

const onProgress = () => {
  console.log("로드 중");
};

const onError = () => {
  console.log("로드 에러");
};

export default function example() {
  /* 텍스쳐 이미지 로드 */
  // 주의 : webpack.config.js파일 CopyWebpackPlugin에서 textures의 경로 설정이 되었는지 체크하기
  const textureLoader = new THREE.TextureLoader();
  const frontTexture = textureLoader.load(
    "/textures/watermelon/Watermelon_001_basecolor.jpg",
    onLoad, // 로드 완료 시 호출
    onProgress, // 로드 중일 때 호출
    onError // 로드 에러 시 호출
  );
  const backTexture = textureLoader.load(
    "/textures/watermelon/Watermelon_001_roughness.jpg",
    onLoad, // 로드 완료 시 호출
    onProgress, // 로드 중일 때 호출
    onError // 로드 에러 시 호출
  );

	...
    
  /* Messh 만들기 */
  const geometry = new THREE.BoxGeometry(2, 2, 2);

  // MeshBasicMaterial는 조명이나 그림자의 영향을 받지 않는다.
  // material 배열 생성, 앞면과 뒷면에 다른 텍스처 적용

  // 외부 면
  const frontMaterial = new THREE.MeshStandardMaterial({ map: frontTexture });
  const outsideMaterials = [
    frontMaterial, // 오른쪽 면 (x+)
    frontMaterial, // 왼쪽 면 (x-)
    frontMaterial, // 위쪽 면 (y+)
    frontMaterial, // 아래쪽 면 (y-)
    frontMaterial, // 앞면 (z+)
    frontMaterial // 뒷면 (z-)
  ];

  // 내부 면
  const backMaterial = new THREE.MeshStandardMaterial({
    // map: backTexture,
    color: "red",
    side: THREE.BackSide
  });
  const insideMaterials = [
    backMaterial, // 오른쪽 면 (x+)
    backMaterial, // 왼쪽 면 (x-)
    backMaterial, // 위쪽 면 (y+)
    backMaterial, // 아래쪽 면 (y-)
    backMaterial, // 앞면 (z+)
    backMaterial // 뒷면 (z-)
  ];

  // 두 개의 정육면체를 생성
  const outsideMesh = new THREE.Mesh(geometry, outsideMaterials);
  const insideMesh = new THREE.Mesh(geometry, insideMaterials);

  // 두 정육면체를 씬에 추가
  scene.add(outsideMesh);
  scene.add(insideMesh);

  /* 그리기 */
 ...
}

 

 

텍스쳐가 안보이는 경우

webpack을 사용하고 있기 때문에 경로 설정을 해주어야 한다.

// webpack.config.js

...

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" }
	],
})

경로 설정 후 서버 재실행해주기