# Light

## Light

* **AmbientLight** -> 주변광, intensity를 낮추어 오브젝트의 형태만 보이게 표현할 때 자주 사용된다.
* **HemisphereLight** -> 주변광, 반원을 중심으로 상하에서 비추는 빛의 두 가지 색상을 설정할 수 있다.
* **DirectionalLight** -> 방향성을 가진 빛 (ex: 햇빛) 
* **PointLight** -> 방향없이 사방으로 퍼지는 빛 (ex: 백열등)
* **SpotLight** ->  한곳으로 집중된 빛 (ex: 무대 조명)

### Properties

* **color**: 빛의 색상
* **intensity**: 빛의 강도
* **target**: 오브젝트 대상의 포지션값으로, light의 position을 기준으로  target의 position값을 계산하여 Light의 각도(rotate)를 재계산한다. (default: 0,0,0)
* **distance**: 빛의 거리
* **penumbra**: \[spotlight] 빛의 감쇠율 조절

### Shadow

* **castShadow**: Mesh에 자신의 그림자 생성 여부
* **recieveShadow**: 자신 또는 다른 Mesh에 의해 생성된 그림자에 영향을 받는지 여부
* **shadowMapSize**: shadowMap의 크기를 조절하여 그림자 해상도 조절, shadow도 texture처럼 렌더링됨

### SpotLgith

> 특정 방향으로 집중된 빛을 방출하는 조명, 빛이 멀어질수록 크기가 커지는 원뿔을 따라 방출된다.

![](/files/BKqKRHXjYaclt6m9SDRv)

```javascript
const spotLight = new THREE.SpotLight(
  0xffffff, // color(색상)
  2.5, // intensity(감도)
  30, // distance(빛이 닿는 거리)
  Math.PI * 0.15, // angle(빛이 퍼지는 각도)
  0.2, // penumbra(빛이 감쇠하는 정도)
  0.5 // decay(거리에 따라 어두워지는 양)
);
spotLight.position.set(0, 0, 3);
scene.add(spotLight);
```

#### Target

* spotLight는 빛을 어떤 타겟을 향해 방출 할지에 대한 정보를 가지고 있는데 기본적으로 원점을 향해 방출된다. 

```javascript
spotLight.position.set(0, 0, 3);
spotLight.target.position.set(0, 0, 3);

scene.add(spotLight, spotLight.target);
```

#### Texture

* 빛의 색상을 조절하기 위한 용도로 **`texture`**를 입힐 수 있다.
* 광원에 입히는 텍스쳐는 색안경 같은 효과를 갖는다.
* 빛이 텍스쳐를 투과하면서  텍스쳐의 색상이 입혀지는 것으로 이해하자.

```javascript
const textureLoader = new THREE.TextureLoader().setPath('./assets/textures/');
const lightTexture = textureLoader.load('gradient.jpg');
spotLight.map = lightTexture;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://taewoongs-organization.gitbook.io/jtwjs-dev-wiki/dev_note/3d-graphic/light.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.