텍스처 소개를 시작하기 전에 거칠기 속성과 금속성 속성을 소개하겠습니다.
Roughness 속성 .roughness은 재질의 거칠기를 나타내며, 0은 부드러운 정반사, 1은 완전한 난반사, metalness 속성 .metalness은 재질과 금속의 유사성을 나타내며, 나무, 석재 등 비금속 재질의 경우 0, 금속은 1을 사용합니다. 통과를 위한 중간 값은 없습니다. 0.0에서 1.0 사이의 값을 녹슨 금속 모양에 사용할 수 있습니다.
앞의 예에서는 주변광만 추가했고 기본 광원이며 방향이 없으며 이 광원의 색상은 장면의 기존 개체 색상에 중첩됩니다. 이 섹션에서 이야기할 내용은 어느 정도 주변 조명만 사용하는 것은 좋은 렌더링 효과를 제공하지 않습니다. 그래서 시작하기 전에 기본적으로 평행광을 추가하는데, 평행광은 태양광에 비유할 수 있고, 평행광이 비추는 전체 영역이 받는 빛의 세기는 동일합니다.
// 灯光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
// 直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);
그런 다음 부드러운 정반사 효과를 살펴보겠습니다.
const material = new THREE.MeshStandardMaterial({map: doorColorTexture,transparent: true,alphaMap: doorAlphaTexture,aoMap: doorAOTexture,side: THREE.DoubleSide,displacementMap: doorHeightTexture,displacementScale: 0.05,roughness: 0
});
물체의 표면이 평행광을 직접 발산하는 것을 볼 수 있다. 를 1 로 roughness설정 어떻게 조정해도 위의 거울 효과를 볼 수 없습니다. 1로 설정 roughness하면 확산 반사가 수행되므로 관심 있는 학생들이 시도해 볼 수 있습니다.
프로젝트에서 전체 개체가 부드럽거나 거칠면 질감이 필요하지 않지만 실제 프로젝트에서는 종종 개체의 일부가 매끄럽고 다른 부분은 거칠고 거친 정도는 동일하지 않습니다. 따라서 거친 오브젝트에 반짝이는 부분을 지정하고 싶다면 metalnessMap속성 (또는 반대로 매끄러운 오브젝트에 거친 부분을 지정하려면 roughnessMap속성 )
const textureLoader = new THREE.TextureLoader();
const roughnessTexture = textureLoader.load(roughness);
const material = new THREE.MeshStandardMaterial({map: doorColorTexture,transparent: true,alphaMap: doorAlphaTexture,aoMap: doorAOTexture,side: THREE.DoubleSide,displacementMap: doorHeightTexture,displacementScale: 0.05,roughness: 1,roughnessMap: roughnessTexture
});
모델의 특정 위치에서 두metalness 속성의 실제 값은 속성 값 자체와 해당 맵의 값의 곱과 같습니다. roughness위의 코드는 다음 그림과 같은 효과를 생성합니다.
도어의 주요 부분이 거울로 되어 있는 것을 볼 수 있으며 도어의 제목 페이지는 녹으로 인해 완전히 반영되지 않을 수 있습니다~
metalness사용법은 roughness와 정확히 여기에서는 설명하지 않습니다.
마침내
프런트 엔드 정보 패키지는 모두를 위해 준비되어 있습니다. 54권, 2.57G 프론트엔드 관련 전자책, "프론트엔드 인터뷰 모음(답변 및 분석 포함)", 어렵고 핵심적인 지식 비디오 자습서(풀 세트)가 포함되어 있습니다.
도움이 필요한 친구는 아래 카드를 클릭하여 무료로 받고 공유할 수 있습니다.