Material & Texture

 

Material

 

3D 객체의 표면 표현 방식을 정의하는 요소

3D 랜더러가 객체를 그릴 때, 빛의 반사, 색상, 투명도 등 다양한 특성을 결정

 

*Three.js에서 모든 재질(Material)은 Material 클래스를 상속받아 만들어져 있음

 

 

Material의 형태

• Point Material
  점으로 표현되는 재질
• Line Material
  선으로 표현되는 재질
• Mesh Material
  메시 형태로 표현되는 재질 (가장 많이 사용되는 유형), 여러 가지 타입이 있음
  MeshBasicMaterial, MeshStandardMaterial, MeshLambertMaterial, MeshPhongMaterial 등이 존재

Meterial

three.js docs

 

 

 

Material의 주요 속성

 

 

visible (가시성)

visible={true}

• true : 렌더링 시 보임
• false : 렌더링 시 보이지 않음

 

transparent (투명 여부)

transparent={true}

• true : 투명도를 적용할 수 있음
• false : 투명도를 무시하고 항상 불투명

 

opacity (불투명도)

opacity={0.5}

• 0 : 완전히 투명
• 1 : 완전히 불투명

단, transparent가 true일 때만 적용됨

 

 

wireframe (와이어프레임 모드)

wireframe={true}

• true : 표면이 와이어 형태로 표현됨
• false : 일반적인 메시 형태로 표현됨

 

color (색상)

color={0xffff00} // 노란색

• Mesh의 기본 색상을 설정

 

side (렌더링할 면)

side={THREE.FrontSide}

• THREE.FrontSide : 앞면만 렌더링
• THREE.BackSide : 뒷면만 렌더링
• THREE.DoubleSide : 앞뒤 모두 렌더링

 

 

기본적인 Material 설정

 

meshBasicMaterial

<meshBasicMaterial
  visible={true}
  transparent={false}
  opacity={1}
  color={0xffff00}
  wireframe={false}
  side={THREE.FrontSide}
/>

• 빛의 영향을 받지 않는 단순한 재질

 

meshStandardMaterial

<meshStandardMaterial color={"white"}/>

• 빛의 영향을 받아서 더 사실적인 표현이 가능

 

Texture 적용하기

 

useLoader 사용하기

 

Three.js에서는 useLoader를 사용하여 텍스처를 불러올 수 있음

import { useLoader } from "@react-three/fiber";

 

 

texture 설정

const texture = useLoader(THREE.TextureLoader, imageUrl);

• TextureLoader을 통해 이미지 파일을 불러와서 텍스처로 설정

 

여러 개의 Material 적용

const materials = [
  new THREE.MeshStandardMaterial(), // 오른쪽
  new THREE.MeshStandardMaterial(), // 왼쪽
  new THREE.MeshStandardMaterial(), // 윗면
  new THREE.MeshStandardMaterial(), // 바닥면
  new THREE.MeshStandardMaterial({ map: texture }), // 앞면 (이미지 적용)
  new THREE.MeshStandardMaterial(), // 뒷면
];

• mat:texture 속성을 추가하면 해당 면에 이미지를 적용 가능

 

P3ColorSpace 또는 SRGBColorSpace 적용

texture.colorSpace = THREE.DisplayP3ColorSpace;

• 색상을 더 정확하게 표현

 

 

CardComponent 구현

const CardComponent = ({ imageUrl }) => {
  const texture = useLoader(THREE.TextureLoader, imageUrl);
  texture.colorSpace = THREE.DisplayP3ColorSpace;

  const materials = [
    new THREE.MeshStandardMaterial(), // 오른쪽
    new THREE.MeshStandardMaterial(), // 왼쪽
    new THREE.MeshStandardMaterial(), // 윗면
    new THREE.MeshStandardMaterial(), // 바닥면
    new THREE.MeshStandardMaterial({ map: texture }), // 앞면 (이미지 적용)
    new THREE.MeshStandardMaterial(), // 뒷면
  ];

  return (
    <mesh material={materials}>
      <boxGeometry args={[1, 1.6, 0.01]} />
    </mesh>
  );
};

• useLoader로 이미지 파일을 불러와서 texture로 설정
• materials 배열을 생성하여 각 면에 적용
• boxGeometry를 사용해 카드 모양의 3D 오브젝트 생성

 

 

카드에 기본 색상 적용

<meshStandardMaterial color={"white"}/>

• 흰색 카드로 설정

 

이미지 적용

 

public 폴더에 이미지 저장

• useLoader를 사용하여 텍스처를 불러와 material에 적용
• materials 배열을 활용하여 앞면과 뒷면에 텍스처를 입힘