[Material] MeshBasicMaterial

MeshStandard일때는 아래와 같은 모양이다

const geometry = new THREE.BoxGeometry(1, 1, 1);
	const material = new THREE.MeshStandardMaterial({
		color: 'seagreen'
	});
	const mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

 

 

MeshBasic을 쓰면? 입체감이 사라진다

 

meshbasicmaterial은 입체감이없는 평평한애

빛의 영향을 안받기때문에 light 조명도 필요가없다.

 

 

---

MeshLambert, MeshPhong 차이점은 뭘까?

// Mesh
    //geometry하나를 만든다음에 material에서 공통으로 가져다 쓰고있다. 
	const geometry = new THREE.SphereGeometry(1, 16, 16);
	const material1 = new THREE.MeshLambertMaterial({
		color: 'orange'
    });
    const material2 = new THREE.MeshPhongMaterial({
		color: 'orange'
	});
    const mesh1 = new THREE.Mesh(geometry, material1);
    const mesh2 = new THREE.Mesh(geometry, material2);

    mesh1.position.x = -1.5;
    mesh2.position.x = 1.5;
    scene.add(mesh1, mesh2);
    
    scene.background = new THREE.Color('white');

MeshLambert => 하이라이트, 반사광이없는 재질

MeshPhong => 하이라이트,반사광 표현 가능한 재질 

 

 

shiness를 넣어주면 겁나 빤짝빤짝

 

---

MeshPhong과 MeshStandard를 비교해보자

속성 추가하지않고 기본일때

 

왼쪽이 phong, 오른쪽이 standard

phong에 위에서 배웟던 속성인 shininess속성을 줘보자

 

 

오 엄청 빤딱빤딱! 해졌다.

 

비슷한 속성으로는 meshstandard ----> roughness를 조정해주면된다!

 

roughness로는 반작거림을 표현할수있고.

metalness즉 금속성으로 금속감?을 줄수있다.

 

금속성이 쎄지면 쎄카매진다.

 

---각지게 표현하려면? (자주쓴다!!)

 

flatShading: true를 넣어준다~!!!!!!

 

    const controls = new OrbitControls(camera, renderer.domElement);

	// Mesh
    //geometry하나를 만든다음에 material에서 공통으로 가져다 쓰고있다. 
	const geometry = new THREE.SphereGeometry(1, 16, 16);
	const material1 = new THREE.MeshPhongMaterial({
        color: 'orangered',
        shininess: 1000,
        flatShading: true
    });
    const material2 = new THREE.MeshStandardMaterial({
        color: 'orangered',
        roughness: 0.3,
        metalness: 0.3,
        flatShading: true
	});
    const mesh1 = new THREE.Mesh(geometry, material1);
    const mesh2 = new THREE.Mesh(geometry, material2);

    mesh1.position.x = -1.5;
    mesh2.position.x = 1.5;
    scene.add(mesh1, mesh2);

 

---

앞뒷면을 보기위해서는 side속성을 주면된다.

 

side: THREE.Frontside -> 기본값

side: THREE.Backside -> 뒷면만보이게

 

두개다? THREE.Doubleside