조명, Light 기본 사용법 (AmbientLight, DirectionalLight, AxesHelper)

✨ AmbientLight : 전체적으로 은은하게 깔아주는 조명 

✨ DirectionalLight : 태양광 같은 조명 

✨ lightHelper: 조명을 시각적으로 확인하는 법 

✨ Dat GUI 만들기 : 객체의 속성을 실시간으로 조정할 수 있는 인터페이스를 이용해 조명 위치 조정

 

 

AmbientLight

전체적으로 은은하게 깔아주는 조명

 

AmbientLight( color : Integer, intensity : Float )

const light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

• 컴퓨터 그래픽과 3D 렌더링에서 전역 조명을 담당하는 광원이다.
• 이 빛은 씬(scene)의 모든 물체에 고르게 퍼져, 그림자가 생기지 않고 부드러운 조명 효과를 제공해 준다.
• 이 빛은 방향이나 강도가 아닌, 전체 씬의 밝기와 색상만을 조절하는 데 사용되며, 3D 그래픽에서 다른 조명과 함께 사용해 현실감을 높여 준다.
• 전체적으로 은은하게 빛을 뿌려주기 때문에 위치 속성은 별도로 없다.
• Three.js 등의 라이브러리에서 주로 사용되며, 기본적으로 씬의 어두운 부분을 밝히고 전반적인 명도 조절에 효과적이다.

 

 

DirectionalLight

태양광 같은 조명

 

 

DirectionalLight( color : Integer, intensity : Float )

// 위에서 비추는 절반 강도의 흰색 방향성 광원.
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );

• 3D 그래픽에서 특정 방향으로 평행하게 빛을 비추는 광원이다.
• 이 빛은 태양처럼 씬(scene) 전체에 동일한 방향과 강도로 빛을 주기 때문에, 물체가 어디에 위치해 있든 같은 각도와 세기로 조명이 적용된다.
• DirectionalLight는 주로 그림자 효과를 나타낼 때 유용하며, 그림자와 빛의 방향을 조절해 특정 위치의 분위기나 조명 효과를 강조할 때 사용된다.
• hree.js 등에서 DirectionalLight는 빛의 방향, 색상, 세기 등을 설정할 수 있도록 제공된다.

 

 

 

 

AxesHelper

3D 공간에서 축을 시각화하는 역할

 

AxesHelper( size : Number )

const axesHelper = new THREE.AxesHelper(3);
scene.add( axesHelper );

• AxesHelper라는 헬퍼 클래스를 사용해 3D 공간에서 축을 시각화하는 역할을 한다.
• AxesHelper(3)는 길이 3 단위의 축을 생성한다.
  • 이 축은 빨간색(x축), 녹색(y축), 파란색(z 축)으로 표시된다.
  • 각 축의 방향과 길이를 시각적으로 나타낸다.
• 좌표계를 쉽게 파악할 수 있어, 오브젝트의 위치나 방향을 설정할 때 편리하다.

 

 

/* Light 만들기 */
// AmbientLight : 전체적으로 은은하게 깔아주는 조명
const ambientLight = new THREE.AmbientLight("white", 0.5);
scene.add(ambientLight);

// DirectionalLight : 태양광 같은 조명
const light = new THREE.DirectionalLight("red", 0.5);
// light.position.x = -3;
light.position.y = 3;
scene.add(light);

// lightHelper: 조명을 시각적으로 확인하는 법
const lightHelper = new THREE.DirectionalLightHelper(light);
scene.add(lightHelper);

/* Controls 만들기 */
new OrbitControls(camera, renderer.domElement);

/* Geometry 만들기 */
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const sphereGeometry = new THREE.SphereGeometry(0.7, 16, 16);

/* Material 만들기 */
const material1 = new THREE.MeshStandardMaterial({ color: "white" });
const material2 = new THREE.MeshStandardMaterial({ color: "red" });
const material3 = new THREE.MeshStandardMaterial({ color: "gold" });

/* Mesh 만들기 : Geometry + Material */
const plane = new THREE.Mesh(planeGeometry, material1); // 평면 바닥에 깔기
const box = new THREE.Mesh(boxGeometry, material2);
const sphere = new THREE.Mesh(sphereGeometry, material3);

// PlaneGeometry
// 기본적으로 평면 매쉬는 수직으로 되어있다.
// 평면으로 사용하려면 위치를 조정해주면 된다.
// Math.PI * 0.5: π의 절반 값으로, 이는 90도를 의미한다. X축을 기준으로 90도 회전
plane.rotation.x = -Math.PI * 0.5;
//box, sphere은 평면에 띄우기 위해 위치 조정
box.position.set(1, 1, 0);
sphere.position.set(-1, 1, 0);

scene.add(plane, box, sphere);

/* AxesHelper 만들기 : 3D 장면의 축을 시각화 */
const axesHelper = new THREE.AxesHelper(3); // 빨간색(x축), 녹색(y축), 파란색(z축)으로 표시
scene.add(axesHelper);

/* Dat GUI 만들기 : 객체의 속성을 실시간으로 조정할 수 있는 인터페이스 */
const gui = new dat.GUI();
gui.add(light.position, "x", -5, 5).name("Light X");
gui.add(light.position, "y", -5, 5).name("Light Y");
gui.add(light.position, "z", -5, 10).name("Light Z");