<div id="readability-page-1" class="page"><div><blockquote>
Three.js에서 Material은 3D 객체의 표면을 렌더링하는 방법을 정의하는 중요한 요소입니다. 각 Material은 빛과 상호 작용하는 방식, 색상, 반사율, 투명도 등의 속성을 결정합니다. Three.js에서는 다양한 Material을 제공하며, 각각의 특징이 다릅니다.
</blockquote>
<h2 id="1-meshbasicmaterial">1. MeshBasicMaterial</h2>
조명(Light)의 영향을 받지 않는 가장 단순한 재질. 
텍스처, 색상, 투명도 등의 속성만 적용됨. 
사용 예: UI 요소, 배경, 항상 동일한 밝기를 유지해야 하는 개체.
🔹 주요 속성:
<ul>
<li>color: 기본 색상</li>
<li>map: 텍스처 맵 적용 가능</li>
<li>wireframe: 와이어프레임 모드 활성화 가능</li>
</ul>
아래의 두 방식은 동일하게 동작한다.
<h2 id="texture">Texture</h2>
<pre><code>const material = new THREE.MeshBasicMaterial({ map: doorColorTexture })</code></pre>
<pre><code>const material = new THREE.MeshBasicMaterial()
material.map = doorColorTexture</code></pre>
<h2 id="colors">Colors</h2>
하지만 색상을 수정하는 경우는 조금 다르다.
<pre><code>const material = new THREE.MeshBasicMaterial({ color: 'green' })</code></pre>
<pre><code>// 이 코드는 정상적으로 동작하지 않는다.
const material = new THREE.MeshBasicMaterial()
material.color = 'green'</code></pre>
색상은 Class로 되어있기 때문이다. 따라서 색상 생성자를 사용해서 입력해줘야 한다.
<pre><code>const material = new THREE.MeshBasicMaterial()
material.color = new THREE.Color('green')
material.color = new THREE.Color('#ff0000')</code></pre>
<h2 id="etc">Etc</h2>
<pre><code>material.wireframe = true // wireframe 적용 여부

// opacity를 적용하기 위해서는 transparent === true 적용이 필요하다.
material.transparent = true
material.opacity = 0.5 

material.alphaMap = doorAlphaTexture

material.side = THREE.DoubleSide // 내부에도 material 적용
material.side = THREE.FrontSide // 앞면에만 material 적용
material.side = THREE.BackSide // 뒷면에만 material 적용</code></pre>
<h2 id="2-meshnormalmaterial">2. MeshNormalMaterial</h2>
표면의 법선(Normal) 방향을 시각적으로 표시하는 재질. 
디버깅 및 법선 맵을 확인할 때 유용함.
🔹 주요 속성:
<ul>
<li>normalMap: 법선 맵 적용 가능</li>
</ul>
<pre><code>// MeshNormalMaterial
const material = new THREE.MeshNormalMaterial()</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/1409932d-a301-4b52-94e9-c69630cb6e66/image.png">
카메라를 기준으로 Material 표면을 x, y, z 축의 방향을 기준으로 색상으로 보여준다.
<pre><code>material.flatShading = true</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/9c3ed173-5287-4ecd-89bd-473e7df566b2/image.png">
<h2 id="3-meshmatcapmaterial">3. MeshMatcapMaterial</h2>
<pre><code>const material = new THREE.MeshMatcapMaterial()
material.matcap = matcapTexture // cannot move the light(downside)</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/f1751db7-381d-41bb-b917-92fff7ff1d9d/image.png">
더 많은 레퍼런스 참고하기 
<a href="https://github.com/nidorx/matcaps">https://github.com/nidorx/matcaps</a> 
<a href="https://www.kchapelier.com/matcap-studio/">https://www.kchapelier.com/matcap-studio/</a>
<h2 id="4-meshdepthmaterial">4. MeshDepthMaterial</h2>
객체의 깊이(Depth)를 기반으로 렌더링하는 재질. 
깊이에 따라 색상이 변화하는 효과를 줄 수 있음. 
일반적으로 쉐도우 맵(Shadow Map)이나 특수 효과에 사용됨.
🔹 주요 속성:
<ul>
<li>depthPacking: 깊이 값을 변환하는 방법 설정.</li>
</ul>
<pre><code>// MeshDepthMaterial
const material = new THREE.MeshDepthMaterial()</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/5d549d8c-987f-4136-80e6-7c9759e4f67e/image.png">
<h2 id="5-meshlambertmaterial">5. MeshLambertMaterial</h2>
간단한 광원 반응을 적용하는 재질 (광량 계산에 Lambertian 반사 사용). 
부드러운 확산 반사(Diffuse Lighting) 효과가 있지만, 반사광(Specular Light) 없음. 
실시간 조명이 많을 경우 성능이 좋음. 
MeshBasicMaterial과 동일한 속성을 제공하지만, 빛과 관련된 프로퍼티들이 있다는 차이가 있다.
🔹 주요 속성:
<ul>
<li>color</li>
<li>map</li>
<li>emissive: 자체 발광 색상</li>
</ul>
<pre><code>// MeshLambertMaterial
const material = new THREE.MeshLambertMaterial()

/**
 * Lights : 요렇게 빛을 활용 가능하다.
 */
const ambientLight = new THREE.AmbientLight(0xfffff, 1)
scene.add(ambientLight)
const pointLight = new THREE.PointLight(0xfffff, 30)
pointLight.position.set(2, 3, 4)
scene.add(pointLight)
</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/7a6cd92d-97c9-4e6e-8710-523d705f9368/image.png">
<h2 id="6-meshphongmaterial">6. MeshPhongMaterial</h2>
MeshLambertMaterial과 유사하지만, 반사광(Specular Highlight)을 표현 가능. 
금속이나 반짝이는 표면을 표현할 때 유용함. 
MeshLambertMaterial보다 퍼포먼스는 떨어지지만 지금 고려할 레벨은 아니다. 빛반사 조절은 shineness 프로퍼티로, 반사광의 색상은 specular 프로퍼티로 조절이 가능하다. 
🔹 주요 속성:
<ul>
<li>specular: 반사광 색상 설정</li>
<li>shininess: 반짝임 정도 (값이 높을수록 광택이 강함)</li>
</ul>
<pre><code>// MeshPhongMaterial
const material = new THREE.MeshPhongMaterial()
material.shininess = 100
material.specular = new THREE.Color(0x1188ff)
material.side = THREE.DoubleSide</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/ef0c05fe-6084-454d-90d8-760a8dbf3c54/image.png">
<h2 id="7-meshtoonmaterial">7. MeshToonMaterial</h2>
카툰(셀 셰이딩, Toon Shading) 스타일의 렌더링을 위한 재질. 
밝기 단계를 계단식으로 나누어 애니메이션 스타일의 명암을 표현.
🔹 주요 속성:
<ul>
<li>gradientMap: 색상 단계를 조절하는 그라디언트 맵 적용 가능.</li>
</ul>
<pre><code>// MeshToonMaterial
const material = new THREE.MeshToonMaterial()
gradientTexture.minFilter = THREE.NearestFilter
gradientTexture.magFilter = THREE.NearestFilter
gradientTexture.generateMipmaps = false
material.gradientMap = gradientTexture // 색상의 단계를 설정할 수 있다.</code></pre>
<h3 id="gradienttexture-파일">gradientTexture 파일</h3>
<pre><code>const gradientTexture = textureLoader.load('./textures/gradients/5.jpg')</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/fed0aa96-6951-423f-87a8-f1e3d41b07bc/image.png">
<h3 id="2단계">2단계</h3>
<img src="https://velog.velcdn.com/images/hyounglee/post/a6bc0aa2-b4f7-423d-976a-427c7a0bc6da/image.png">
<h3 id="3단계">3단계</h3>
<img src="https://velog.velcdn.com/images/hyounglee/post/fb42f8ae-fab2-4a22-8d21-91e1b252d879/image.png">
<h3 id="5단계">5단계</h3>
<img src="https://velog.velcdn.com/images/hyounglee/post/a80bb937-fc34-4c21-bb04-83e7574b49b5/image.png">
<h2 id="8-meshstandardmaterial">8. MeshStandardMaterial</h2>
실제 물리 기반(PBR) 렌더링을 적용하는 기본적인 재질. 
조명의 영향을 받으며, 반사와 거칠기(Roughness) 등의 속성이 적용됨. 
성능과 퀄리티 균형이 적절한 소재.
🔹 주요 속성:
<ul>
<li>metalness: 0(비금속) ~ 1(금속) 값으로 설정</li>
<li>roughness: 표면 거칠기 (0 = 매끈, 1 = 거침)</li>
<li>map, normalMap, metalnessMap, roughnessMap 등의 여러 맵 지원</li>
</ul>
<pre><code>// MeshStandardMaterial
const material = new THREE.MeshStandardMaterial()
material.metalness = 0.45
material.roughness = 0.65</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/2352a146-d9af-4952-8a2f-7269d0ae5845/image.png">
<h2 id="environment-map">Environment Map</h2>
주변 환경을 세팅해서 확인하면 반사가 잘 되고 있는 것을 확인해볼 수 있다.
<pre><code>import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'

/**
 * Environment map
 */
const rgbeLoader = new RGBELoader()
rgbeLoader.load('./textures/environmentMap/2k.hdr', (map) =&gt; {
	map.mapping = THREE.EquirectangularReflectionMapping
	scene.background = map
	scene.environment = map
})</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/81887db6-69c8-4d9e-b046-3ac74781638b/image.png">
<h2 id="9-meshphysicalmaterial">9. MeshPhysicalMaterial</h2>
MeshStandardMaterial의 확장 버전으로 더욱 세밀한 설정 가능. 
반투명(Transparency), 굴절(Refraction), 광택(Clearcoat) 등의 추가 효과 제공.
🔹 주요 속성:
<ul>
<li>clearcoat: 자동차 도색 같은 광택층 추가</li>
<li>clearcoatRoughness: 광택층의 거칠기</li>
<li>transmission: 투명 효과 (유리 재질 표현)</li>
</ul>
<pre><code>// MeshPhysicalMaterial
const material = new THREE.MeshPhysicalMaterial()
material.metalness = 0
material.roughness = 0</code></pre>
투명도 적용한 결과
<img src="https://velog.velcdn.com/images/hyounglee/post/9d056b6f-fbd0-4f7b-b754-80045c0cdae3/image.png">
<h2 id="material-선택-가이드">Material 선택 가이드**</h2>







































































<table><thead><tr><th>재질</th><th>조명 영향</th><th>반사 효과</th><th>주요 용도</th></tr></thead><tbody><tr><td>MeshBasicMaterial</td><td>❌</td><td>❌</td><td>UI 요소, 배경, 단순한 객체</td></tr><tr><td>MeshStandardMaterial</td><td>✅</td><td>✅ (금속, 거칠기)</td><td>일반적인 PBR 재질</td></tr><tr><td>MeshPhysicalMaterial</td><td>✅</td><td>✅ (투명도, 굴절, 광택)</td><td>유리, 물, 자동차 도색</td></tr><tr><td>MeshLambertMaterial</td><td>✅</td><td>❌</td><td>기본 확산 조명</td></tr><tr><td>MeshPhongMaterial</td><td>✅</td><td>✅ (반짝이는 표면)</td><td>금속, 플라스틱, 반짝이는 재질</td></tr><tr><td>MeshToonMaterial</td><td>✅</td><td>❌</td><td>셀 셰이딩(카툰 스타일)</td></tr><tr><td>MeshDepthMaterial</td><td>❌</td><td>❌</td><td>깊이 기반 특수 효과</td></tr><tr><td>MeshNormalMaterial</td><td>❌</td><td>❌</td><td>법선 디버깅</td></tr><tr><td>ShadowMaterial</td><td>✅</td><td>❌</td><td>바닥 그림자 전용</td></tr><tr><td>PointsMaterial</td><td>❌</td><td>❌</td><td>입자 시스템 (Particle)</td></tr></tbody></table>
<hr>
<h2 id="결론">결론</h2>
Three.js에서 Material을 선택할 때는 조명 영향, 반사 효과, 성능 등을 고려해야 합니다. 
<ul>
<li>최적의 성능이 필요한 경우: <code>MeshBasicMaterial</code></li>
<li>일반적인 PBR(물리 기반 렌더링) 재질: <code>MeshStandardMaterial</code></li>
<li>반짝이는 표면이나 투명 효과: <code>MeshPhysicalMaterial</code></li>
<li>단순한 조명 반응: <code>MeshLambertMaterial</code> 또는 <code>MeshPhongMaterial</code></li>
<li>카툰 스타일 셰이딩: <code>MeshToonMaterial</code></li>
<li>그림자 효과: <code>ShadowMaterial</code></li>
<li>입자 시스템: <code>PointsMaterial</code></li>
</ul>
이제 Three.js에서 원하는 효과에 맞게 적절한 Material을 선택할 수 있습니다! 🚀
<h2 id="reference">Reference</h2>
<a href="https://en.wikipedia.org/wiki/List_of_refractive_indices">List of IOR(Wikipedia)</a></div></div>

(งᐖ)ว

Three.js에서 Material은 3D 객체의 표면을 렌더링하는 방법을 정의하는 중요한 요소입니다. 각 Material은 빛과 상호 작용하는 방식, 색상, 반사율, 투명도 등의 속성을 결정합니다. Three.js에서는 다양한 Material을 제공하며, 각각의 특징이 다릅니다.
1. MeshBasicMaterial
조명(Light)의 영향을 받지 않는 가장 단순한 재질.
텍스처, 색상, 투명도 등의 속성만 적용됨.
사용 예: UI 요소, 배경, 항상 동일한 밝기를 유지해야 하는 개체.
🔹 주요 속성:
color: 기본 색상
map: 텍스처 맵 적용 가능
wireframe: 와이어프레임 모드 활성화 가능
아래의 두 방식은 동일하게 동작한다.
Texture
const material = new THREE.MeshBasicMaterial({ map: doorColorTexture })
const material = new THREE.MeshBasicMaterial()
material.map = doorColorTexture
Colors
하지만 색상을 수정하는 경우는 조금 다르다.
const material = new THREE.MeshBasicMaterial({ color: 'green' })
// 이 코드는 정상적으로 동작하지 않는다.
const material = new THREE.MeshBasicMaterial()
material.color = 'green'
색상은 Class로 되어있기 때문이다. 따라서 색상 생성자를 사용해서 입력해줘야 한다.
const material = new THREE.MeshBasicMaterial()
material.color = new THREE.Color('green')
material.color = new THREE.Color('#ff0000')
Etc
material.wireframe = true // wireframe 적용 여부
// opacity를 적용하기 위해서는 transparent === true 적용이 필요하다.
material.transparent = true
material.opacity = 0.5 
material.alphaMap = doorAlphaTexture
material.side = THREE.DoubleSide // 내부에도 material 적용
material.side = THREE.FrontSide // 앞면에만 material 적용
material.side = THREE.BackSide // 뒷면에만 material 적용
2. MeshNormalMaterial
표면의 법선(Normal) 방향을 시각적으로 표시하는 재질.
디버깅 및 법선 맵을 확인할 때 유용함.
🔹 주요 속성:
normalMap: 법선 맵 적용 가능
// MeshNormalMaterial
const material = new THREE.MeshNormalMaterial()
카메라를 기준으로 Material 표면을 x, y, z 축의 방향을 기준으로 색상으로 보여준다.
material.flatShading = true
3. MeshMatcapMaterial
const material = new THREE.MeshMatcapMaterial()
material.matcap = matcapTexture // cannot move the light(downside)
더 많은 레퍼런스 참고하기
https://github.com/nidorx/matcaps
https://www.kchapelier.com/matcap-studio/
4. MeshDepthMaterial
객체의 깊이(Depth)를 기반으로 렌더링하는 재질.
깊이에 따라 색상이 변화하는 효과를 줄 수 있음.
일반적으로 쉐도우 맵(Shadow Map)이나 특수 효과에 사용됨.
🔹 주요 속성:
depthPacking: 깊이 값을 변환하는 방법 설정.
// MeshDepthMaterial
const material = new THREE.MeshDepthMaterial()
5. MeshLambertMaterial
간단한 광원 반응을 적용하는 재질 (광량 계산에 Lambertian 반사 사용).
부드러운 확산 반사(Diffuse Lighting) 효과가 있지만, 반사광(Specular Light) 없음.
실시간 조명이 많을 경우 성능이 좋음.
MeshBasicMaterial과 동일한 속성을 제공하지만, 빛과 관련된 프로퍼티들이 있다는 차이가 있다.
🔹 주요 속성:
color
map
emissive: 자체 발광 색상
// MeshLambertMaterial
const material = new THREE.MeshLambertMaterial()
/**
 * Lights : 요렇게 빛을 활용 가능하다.
 */
const ambientLight = new THREE.AmbientLight(0xfffff, 1)
scene.add(ambientLight)
const pointLight = new THREE.PointLight(0xfffff, 30)
pointLight.position.set(2, 3, 4)
scene.add(pointLight)
6. MeshPhongMaterial
MeshLambertMaterial과 유사하지만, 반사광(Specular Highlight)을 표현 가능.
금속이나 반짝이는 표면을 표현할 때 유용함.
MeshLambertMaterial보다 퍼포먼스는 떨어지지만 지금 고려할 레벨은 아니다. 빛반사 조절은 shineness 프로퍼티로, 반사광의 색상은 specular 프로퍼티로 조절이 가능하다. 
🔹 주요 속성:
specular: 반사광 색상 설정
shininess: 반짝임 정도 (값이 높을수록 광택이 강함)
// MeshPhongMaterial
const material = new THREE.MeshPhongMaterial()
material.shininess = 100
material.specular = new THREE.Color(0x1188ff)
material.side = THREE.DoubleSide
7. MeshToonMaterial
카툰(셀 셰이딩, Toon Shading) 스타일의 렌더링을 위한 재질.
밝기 단계를 계단식으로 나누어 애니메이션 스타일의 명암을 표현.
🔹 주요 속성:
gradientMap: 색상 단계를 조절하는 그라디언트 맵 적용 가능.
// MeshToonMaterial
const material = new THREE.MeshToonMaterial()
gradientTexture.minFilter = THREE.NearestFilter
gradientTexture.magFilter = THREE.NearestFilter
gradientTexture.generateMipmaps = false
material.gradientMap = gradientTexture // 색상의 단계를 설정할 수 있다.
gradientTexture 파일
const gradientTexture = textureLoader.load('./textures/gradients/5.jpg')
2단계
3단계
5단계
8. MeshStandardMaterial
실제 물리 기반(PBR) 렌더링을 적용하는 기본적인 재질.
조명의 영향을 받으며, 반사와 거칠기(Roughness) 등의 속성이 적용됨.
성능과 퀄리티 균형이 적절한 소재.
🔹 주요 속성:
metalness: 0(비금속) ~ 1(금속) 값으로 설정
roughness: 표면 거칠기 (0 = 매끈, 1 = 거침)
map, normalMap, metalnessMap, roughnessMap 등의 여러 맵 지원
// MeshStandardMaterial
const material = new THREE.MeshStandardMaterial()
material.metalness = 0.45
material.roughness = 0.65
Environment Map
주변 환경을 세팅해서 확인하면 반사가 잘 되고 있는 것을 확인해볼 수 있다.
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
/**
 * Environment map
 */
const rgbeLoader = new RGBELoader()
rgbeLoader.load('./textures/environmentMap/2k.hdr', (map) => {
    map.mapping = THREE.EquirectangularReflectionMapping
    scene.background = map
    scene.environment = map
})
9. MeshPhysicalMaterial
MeshStandardMaterial의 확장 버전으로 더욱 세밀한 설정 가능.
반투명(Transparency), 굴절(Refraction), 광택(Clearcoat) 등의 추가 효과 제공.
🔹 주요 속성:
clearcoat: 자동차 도색 같은 광택층 추가
clearcoatRoughness: 광택층의 거칠기
transmission: 투명 효과 (유리 재질 표현)
// MeshPhysicalMaterial
const material = new THREE.MeshPhysicalMaterial()
material.metalness = 0
material.roughness = 0
투명도 적용한 결과
Material 선택 가이드**
재질
조명 영향
반사 효과
주요 용도
MeshBasicMaterial
❌
❌
UI 요소, 배경, 단순한 객체
MeshStandardMaterial
✅
✅ (금속, 거칠기)
일반적인 PBR 재질
MeshPhysicalMaterial
✅
✅ (투명도, 굴절, 광택)
유리, 물, 자동차 도색
MeshLambertMaterial
✅
❌
기본 확산 조명
MeshPhongMaterial
✅
✅ (반짝이는 표면)
금속, 플라스틱, 반짝이는 재질
MeshToonMaterial
✅
❌
셀 셰이딩(카툰 스타일)
MeshDepthMaterial
❌
❌
깊이 기반 특수 효과
MeshNormalMaterial
❌
❌
법선 디버깅
ShadowMaterial
✅
❌
바닥 그림자 전용
PointsMaterial
❌
❌
입자 시스템 (Particle)
결론
Three.js에서 Material을 선택할 때는 조명 영향, 반사 효과, 성능 등을 고려해야 합니다.  
최적의 성능이 필요한 경우: MeshBasicMaterial
일반적인 PBR(물리 기반 렌더링) 재질: MeshStandardMaterial
반짝이는 표면이나 투명 효과: MeshPhysicalMaterial
단순한 조명 반응: MeshLambertMaterial 또는 MeshPhongMaterial
카툰 스타일 셰이딩: MeshToonMaterial
그림자 효과: ShadowMaterial
입자 시스템: PointsMaterial
이제 Three.js에서 원하는 효과에 맞게 적절한 Material을 선택할 수 있습니다! 🚀
Reference
List of IOR(Wikipedia)

TIL 117 | Three.js 기초 - Materials

댓글