[three.js 기초 #3] Material

 

2024.05.12 - [frontend] - [three.js 기초 #2] Scene

[three.js 기초 #2] Scene

[three.js 기초 #3] Material

Material 종류

공식문서: https://threejs.org/docs/index.html#api/en/materials/LineBasicMaterial

three.js docs

• MeshBasicMaterial: 조명의 영향을 받지 않는 단순한 재질
• MeshLambertMaterial: 비반사형 확산 조명 모델을 사용하는 재질
• MeshPhongMaterial: 반사형 조명 모델을 사용하는 재질
• MeshStandardMaterial: 물리 기반 렌더링(PBR) 모델을 사용하는 재질(사실적인 표현 가능)
• MeshPhysicalMaterial: MeshStandardMaterial의 확장 버전

실무에서 많이 사용되는 Map: normalMap

textures 이미지 컨퍼런스 

여기서 이미지를 하나 다운받아 볼 것임

https://3dtextures.me/

3D TEXTURES

• 여러가지 텍스쳐의 이미지를 다운 받을 수 있음
• map의 속성과 이미지 크기 제공

MeshStandardMaterial 속성

• color: 재질의 기본 색상을 설정합니다.
• roughness: 표면의 거칠기를 0(매끄러움)에서 1(거침)까지 설정합니다.
• metalness: 재질의 금속성을 0(비금속)에서 1(금속)까지 설정합니다.
• envMap: 환경 맵을 설정하여 반사 효과를 추가할 수 있습니다.
• normalMap: 노말 맵을 설정하여 표면의 법선 벡터를 변경할 수 있습니다.
• aoMap: 주변 광 맵을 설정하여 그림자 효과를 추가할 수 있습니다.
• emissive: 자체 발광 색상을 설정할 수 있습니다.
• transparent: 재질을 투명하게 만들 수 있습니다.

const material = new THREE.MeshStandardMaterial({
    map: map,

    normalMap: mapNormal, //입체감이 나타남

    displacementMap: mapHeight,
    displacementScale: 0.2, //변형이 안됨? -> 세그먼트화
    // displacementBias: -0.15,

    aoMap: mapAO,
    aoMapIntensity: 1,

    roughnessMap: mapRoughness, //거칠기의 정도
    roughness: 0.5, //낮아질수록 부드러워짐(플라스틱)

    metalnessMap: mapMetallic, //금속느낌
    metalness: 0.3,

    alphaMap: mapOpacity,
    transparent: true,
});

 

VertexNormalsHelper

VertexNormalsHelper는 표면 뱡향을 나타내는 벡터인 정점 법선을 시각화해줌

_setupModel() {
...
	const boxHelper = new VertexNormalsHelper(box, 0.1, 0xffff00);
	this._scene.add(boxHelper);
	const sphereHelper = new VertexNormalsHelper(sphere, 0.1, 0xffff00);
	this._scene.add(sphereHelper);
}

광원을 카메라 관점으로 바꾸기

_setupCamera() {
		const width = this._divcontainer.clientWidth;
		const height = this._divcontainer.clientHeight;
		const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
		camera.position.z = 2;
		this._camera = camera;

		//광원을 카메라 관점으로
		this._scene.add(camera);
	}

	_setupLight() {
		//bient
		const ambientLight = new THREE.AmbientLight(0xffffff, 0.2); //전체 객체에 균일하게 비추는 광원
		this._scene.add(ambientLight);

		const color = 0xffffff;
		const intensity = 1;
		const light = new THREE.DirectionalLight(color, intensity);
		light.position.set(-1, 2, 4);
	
		//광원을 카메라 관점으로
		this._camera.add(light);
	}