조명을 사용하여 객체가 좀 더 입체적으로 보이게 하겠습니다.
조명을 사용하기 전에 객체들이 조명에 반응하도록 Material(머티리얼)을 변경해 줘야 합니다.
이전에 생성한 육면체 객체와 구 객체에는 조명에 반응하지 않는 MeshBasicMaterial(메쉬 베이식 머티리얼)을 사용하였습니다.
const box1Material = new THREE.MeshBasicMaterial({color: 0x00ff00});
:
const sphere1Material = new THREE.MeshBasicMaterial({color: 0x0000ff});
그래서 조명에 반응하는 MeshStandardMaterial(메쉬 표준 머티리얼)을 생성하여 변경하겠습니다.
MeshStandardMaterial(메쉬 표준 머티리얼)은 Metallic-Roughness를 사용한 표준 물리 기반 재질로 렌더링 합니다.
그러나 조명이 없으면 객체의 색이 표시되지 않습니다.
MeshStandardMaterial(parameters : Object)간단하게 color 속성만 설명하겠습니다.
- color 속성은 객체에 적용할 색상입니다. 기본값 0xffffff (흰색) (입력하지 않으면 기본값으로 설정됩니다.)
1. 육면체 객체와 구 객체에 사용된 MeshBasicMaterial(메쉬 베이식 머티리얼)은 주석 처리하고 MeshStandardMaterial(메쉬 표준 머티리얼)을 생성합니다.
//const box1Material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const box1Material = new THREE.MeshStandardMaterial({color: 0x00ff00});
//const sphere1Material = new THREE.MeshBasicMaterial({color: 0x0000ff});
const sphere1Material = new THREE.MeshStandardMaterial({color: 0x0000ff});
아직 조명이 없기 때문에 객체의 색이 표시되지 않습니다.
Scence(씬, 장면)에 있는 모든 객체에 빛을 비추기 위해 주변 조명(AmbientLight)을 생성하겠습니다.
AmbientLight(엠비언트 라이트)은 Scence(씬, 장면)에 있는 모든 객체에 빛을 비춥니다.
AmbientLight(color : Integer, intensity : Float)- color(색상) : 조명 색상입니다. 기본값 0xffffff (흰색) (입력하지 않으면 기본값으로 설정됩니다.)
- intensity(밝기) : 조명의 강도입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)
2. Scence(씬, 장면)에 있는 모든 객체에 빛을 비추기 위해 흰색의 주변 조명(AmbientLight)을 생성합니다.
// 주변 조명
const ambientlight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientlight);
조명이 모든 객체에 일관되게 적용되기 때문에 조명의 밝기가 1이면 모든 면이 밝아져 입체로 보이지 않는다.
그래서 밝기를 0.5 이하로 설정하고 다른 조명을 추가하여 빛을 비추면 좀 더 입체적으로 보이게 됩니다.
좀 더 명암 대비가 있게 주변 조명의 밝기를 0.3으로 설정하였습니다.
// 주변 조명
const ambientlight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientlight);
그러면 조명의 밝기가 낮아져 어둡게 보입니다.
만약, 육면체 객체와 구 객체가 색을 가지 않고 있다면 조명의 색상에 따라 객체의 색이 변경됩니다.
육면체 객체와 구 객체의 MeshPhongMaterial(메쉬 퐁 머티리얼)에서 색상을 제거하고 AmbientLight(엠비언트 라이트)의 색상을 붉은색으로 변경하면 객체의 색이 조명색으로 보이게 됩니다.
const box1Material = new THREE.MeshPhongMaterial();
:
const sphere1Material = new THREE.MeshPhongMaterial();
:
const ambientlight = new THREE.AmbientLight(0xff0000, 1);
객체들이 입체적으로 보이기 위해 방향성이 있는 조명을 추가하도록 하겠습니다.
DirectionalLight(디렉셔널 라이트)은 특정 방향으로 객체에 빛을 비춥니다. 마치 태양처럼 먼 거리에서 빛이 오는 것처럼 빛을 비춥니다. 그래서 모든 그림자는 평행하게 나타납니다.
DirectionalLight(color : Integer, intensity : Float)- color(색상) : 조명 색상입니다. 기본값 0xffffff (흰색) (입력하지 않으면 기본값으로 설정됩니다.)
- intensity(밝기) : 조명의 강도입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)
3. 빛을 비추기 위해 흰색의 방향성 조명(DirectionalLight)을 생성합니다.
// 방향성 조명
const light1 = new THREE.DirectionalLight(0xffffff, 1);
scene.add(light1);
그러면 위에서 아래로 빛이 비추어집니다.
DirectionalLight(디렉셔널 라이트)에 위치(position)를 설정하지 않으면 조명이 위에서 아래로 비추도록 설정됩니다.
위치(position)에서 X 축에만 값을 주면 조명이 오른쪽에서 왼쪽으로 비추도록 됩니다.
light1.position.set(1, 0, 0);
위치(position)에서 Y 축에만 값을 주면 조명이 위에서 아래로 비추도록 됩니다.
light1.position.set(0, 1, 0);
위치(position)에서 Z 축에만 값을 주면 조명이 앞에서 뒤로 비추도록 됩니다.
light1.position.set(0, 0, 1);
조명이 왼쪽에서 오른쪽으로, 위에서 아래로, 앞에서 뒤로 비추도록 설정하겠습니다.
light1.position.set(-1, 1, 1);
그러면 객체들이 조명을 받아 입체적으로 보이게 됩니다.
조명의 위치(position)가 멀어질 수 록 객체들의 위치에 따라 빛의 양도 달라집니다. 그리고 조명의 위치(position)에 따라 객체의 그림자가 달라지게 됩니다.