[R3F] Drei, 재질 텍스쳐 매핑

https://github.com/pmndrs/drei

GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

 

 

MeshReflectorMaterial

반사를 표현 적용 시 사용함

 

 

 

MeshReflectorMaterial

3D에서 주변환경에 대한 이미지 데이터로 HDR 이미지를 주로 사용함

 

반짝이는 재질 표현시 사용함

 

 

 

MeshTransmissionMaterial

유리재질 표현 시 사용함

 

 

 

MeshWobbleMaterial

흔들거림 애니메이션 표현 시 사용함

<MeshWobbleMaterial factor={1} speed={10} />

 

 

 

MeshDistortMaterial

왜곡 애니메이션을 표현시 사용함

 

 

 

MeshDiscardMaterial

물체를 화면에 보이지 않게 함

visible과 다르게 물체의 그림자는 표현됨

 

 

 

 

재질 텍스처 매핑

텍스쳐 매핑 : 매시 표면에 이미지 데이터를 사용하여 사실적인 데이터를 표현하는 기능

매핑 속성을 적용하여 재질을 변경할 수 있음

 

https://3dtextures.me/

3D TEXTURES

텍스처 이미지 다운로드 사이트

 

const textures = useTexture({
    map: './public/images/glass/Glass_Window_002_basecolor.jpg',
    roughnessMap: './public/images/glass/Glass_Window_002_roughness.jpg',
});

...

<mesh scale={0.3}>
    <cylinderGeometry args={[2, 2, 3, 1024, 1024, true]} />
    <meshStandardMaterial
        side={THREE.DoubleSide}
        map={textures.map}
        roughnessMap={textures.roughnessMap}
        roughnessMap-colorSpace={THREE.NoColorSpace}
        metalnessMap={textures.metalnessMap}
        metalness={1}
        metalnessMap-colorSpace={THREE.NoColorSpace}
    />
</mesh>

map : 이미지 적용

 

 

roughnessMap : 거칠기 맵 적용

roughnessMap-colorSpace : 거칠기 맵의 색상 공간 적용 (거칠기 정도 적용)

 

 

metalnessMap : 재질 적용

metalness : 재질의 기본값과 재질맵을 곱해서 결과가 나옴, 기본값이 0이므로, 임의의 값 적용해야 함
metalnessMap-colorSpace : 재질 색상 공간 적용

 

 

normalMap : 입체감을 나타냄
normalScale : 입체감을 높일 수 있음

normalMap-colorSpace

 

 

displacementMap : 실제 재질의 높낮이를 변경함 (normal과의 차이점)
displacementMap-colorSpace

displacementScale : 스케일(굴곡 등) 변경 시
displacementBias : 스케일(굴곡 등) 변경 시

 

->normal에 비해서 더 많은 연산과 메모리를 사용함

 

 

 

aoMap : 매시 표면 그림자 적용

<ambientLight intensity={0.1} /> : ambientLight 광원을 필요로 함

mesh.current.geometry.setAttribute() : 지오메트리 UV2 속성 값을 필요로함

 

 

alphaMap : 재질에 투명도 적용
transparent : 재질에 투명도 적용
alphaToCoverage : 재질에 투명 효과 변경

 

 

 

Normal Vector : 면에 대한 수직 방향의 벡터

광원에 대한 음영 효과를 변경할 때 사용함

결국 입체감을 이미지의 눈속임으로 표현하는 것 -> 실제 재질에 입체감이 있지는 않음

 

 

normalMap 적용 시