[Three.js] Material #4 -- Texture 맵핑 속성- alpha, ao, displacement, light, metalness, normal, roughnessMap

다음 텍스쳐 이미지들을 다운받아서 맵핑해 볼 것이다.

* 광원이 고정되어 있어서 밝은 부분만 밝고, 어두운 부분은 계속 안 보임 -> 광원이 카메라(시점)에 따라 달라지도록 변경

: _setupLight() 에서 광원을 씬의 자식으로 추가했던 코드 지우고, 카메라의 자식으로 추가하는 코드를 쓴다. 그리고 _setupCamera에카메라를 씬의 자식으로 추가하는 코드를 넣는다.

 

 

<Texture 맵핑 속성 9가지와 속성값(이미지)>

 

 

✅ texture mapping 속성 설명

 

✅ 결과

 

✅ 코드

_setupModel () {
        //texture 객체 생성하기
        const textureLoader = new THREE.TextureLoader(); //1. TextureLoader 클래스 객체 생성
        const map = textureLoader.load("images/glass/Glass_Window_002_basecolor.jpg");
        const mapAO = textureLoader.load("images/glass/Glass_Window_002_ambientOcclusion.jpg");
        const mapHeight = textureLoader.load("images/glass/Glass_Window_002_height.png");
        const mapNormal = textureLoader.load("images/glass/Glass_Window_002_normal.jpg");
        const mapRoughness = textureLoader.load("images/glass/Glass_Window_002_roughness.jpg");
        const mapMetalic = textureLoader.load("images/glass/Glass_Window_002_metallic.jpg");
        const mapAlpha = textureLoader.load("images/glass/Glass_Window_002_opacity.jpg");
        const mapLight = textureLoader.load("images/glass/light.jpeg");

        //material
        const material = new THREE.MeshStandardMaterial({
            map : map,   //map 속성에 texture 객체를 지정
            normalMap: mapNormal,
            displacementMap: mapHeight,
            displacementScale: 0.2,         //변위 규모 조절
            displacementBias: -0.15,        //변위 편차 조정->벌어진 면 붙이기

            aoMap: mapAO,   //음영
            aoMapIntensity: 3,  //음영 강도값 (기본값 1)

            roughnessMap: mapRoughness, //거칠기
            roughness: 0.5,         //거칠기 강도 (기본 1)

            metalnessMap: mapMetalic,  //금속성
            metalness: 0.5,     //금속성 강도(기본 0)

            alphaMap: mapAlpha,  //투명도(opacity)
            transparent: true,  //투명도 활성화 필요 
            side: THREE.DoubleSide, //뒷면도 동시에 렌더링되도록해서 뒷면까지 투명해지는거 방지
            
            lightMap: mapLight,
            lightMapIntensity: 3,

        });

        //Mesh
        const box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1, 256, 256, 256), material);
        box.position.set(-1, 0, 0);
        box.geometry.attributes.uv2 = box.geometry.attributes.uv;
        this._scene.add(box);

        const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.7, 512, 512), material);
        sphere.position.set(1, 0, 0);
        sphere.geometry.attributes.uv2 = sphere.geometry.attributes.uv;
        this._scene.add(sphere);

    }

 

❓이해 못한 것

- aoMap, lightMap을 사용하기 위해 geometry에 uv2 속성을 지정해줘야 하는 이유. uv2 속성이 뭔지