# Hellow Three.js 之 光影之谜

> [Demo查看](http://codeffe.com/demo/hello-threejs/hello-light.html)

## 基础知识

常识，发光到物体即光源，有光，就有影。要想体现物体的3D真实性，光影就是很重要的效果。 在threejs的世界里，也为光源提供了很多选择。

### Light 光源基类

Light 是 Threejs 里所有光源的基类

`Light( color : Integer, intensity : float )`

* color -- 光源颜色的RGB数值, 接受一个16进制的颜色值 如: `0xffffff` 表示白色
* intensity -- 光源强度的数值

### 各种派生类

基础光源：

* AmbientLight 环境光 - 它的颜色会添加到整个场景和所有对象的当前颜色上
* DirectionalLight 平行光 -- 例如：太阳光
* PointLight 点光源 -- 空间中的一点，朝所有的方向发射光线
* SpotLight 聚光源 - 聚光灯是由点光源发出，这种类型的光也可以产生投影，有聚光的效果

特殊光源：

* HemisphereLight 半球光 - 可以为室内场景创建更加自然的光照效果，模拟反光面和光线微弱的天气
* RectAreaLight 矩形区域光源 - 这种光从一个矩形面均匀地发射，可以用来模拟明亮的窗户或者带状的照明；可以产生投影
*

#### 1、AmbientLight 环境光

环境光故名思意，是光线经过周围环境多次反射而来的光，没有确定的方向。

![AmbientLight](/files/JwRSYGYYwZ9zJqHUfYFB)

`AmbientLight( color, intensity )`

* color -- 光源颜色的RGB数值。
* intensity -- 光源强度的数值。

```
var amblight = new THREE.AmbientLight( 0x404040 );
scene.add( amblight );
```

#### 2、DirectionalLight 平行光

从一个特定的方向，而不是从一个特定的位置。这个光看起来就像光源位于无限远处，因此它产生的光线都是平行的。 比如太阳，因为太阳很遥远，看起来所有的阳光照射到物体上都几乎来自同一个角度。

![AmbientLight](/files/r12OLmoxjq79KzyqRcnT)

`irectionalLight( hex, intensity )`

* hex -- 光源颜色的RGB数值。
* intensity -- 光源强度的数值。

```
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 0, 1, 0 );
scene.add( directionalLight );
```

#### 3、PointLight 点光源

点光源：某个位置特定的发光点，比如灯泡、蜡烛、萤火虫等

![AmbientLight](/files/bAyYO29k4dLuYBi4PYWM)

`PointLight( color, intensity, distance, decay )`

* color -- 颜色的RBG数值。
* intensity -- 光强的数值。
* distance -- 光强为0处到光源的距离，0表示无穷大。
* decay -- 沿着光照距离的衰退量。

```
var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );
```

#### 4、SpotLight 聚光源

一种能投射锥形阴影区域的点光源，比如探照灯。

![AmbientLight](/files/6XhfCQs9RtAy9SPpWCD8)

`SpotLight( color, intensity, distance, angle, penumbra, decay )`

* color -- 颜色的RBG数值。
* intensity -- 光强的数值。
* distance -- 光强为0处到光源的距离，0表示无穷大。
* angle -- 光线散射角度，最大为Math.PI/2。
* penumbra -- 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。
* decay -- 沿着光照距离的衰退量。

```
// 白色聚光灯从侧面发光，投射阴影
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );

spotLight.castShadow = true;

spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;

scene.add( spotLight );
```

## 材质与光源

物体的材质在渲染的时候，和光源有很重要的关系。比如，物体的纹理、色彩、透明度、光滑度、折射率、反光率等。

要想体现材质等真实性，光体现了很主要的效果，如果没有光，都是黑漆漆的，我们眼睛估计无法分辨物体的形态。

走夜路，打手电，通过光我们能分辨路上的石头、树枝、坑洞等。

***

本文部分内容参照及引用：

> [three.js docs](https://threejs.org/docs/index.html#api/lights/AmbientLight)


---

# 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://docs.tenten.co/awesome/webgl/awesome-threejs-playground/docs/hello-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.