# hello-light-pro
## Hellow Three.js Pro 理解光源及应用
> [Demo查看](http://codeffe.com/demo/hello-threejs-pro/hell-light-shadow.html)
首选，在 Threejs 中 所有光源都是基于 `THREE.Light` 对象扩展而成的。
基本光源包含：
* `THREE.AmbientLight`
* `THREE.PointLight`
* `THREE.SpotLight`
* `THREE.DirectinalLight`
### THREE.AmbientLight
`THREE.AmbientLight` 创建时，颜色将会应用到全局，该光源并没有特别的来源方向，而且它不会生成阴影， 所以，不能将 `THREE.AmbientLight` 作为场景中唯一的光源，因为它会把场景中的物体渲染为相同的颜色，无论什么形状。
在使用其它光源的时候同时使用它，目的是弱化阴影或给场景添加一些额外的颜色。
`AmbientLight( color, intensity )`
* color -- 光源颜色的RGB数值。
* intensity -- 光源强度的数值。
**使用方法**
```
var ambientLight = new THREE.AmbientLight('#ff00ff');
scene.add(ambientLight);
```
### THREE.PointLight
`THREE.PointLight` 是一种单发光点、照射所有方向的光源，比如：夜空中的照明弹。该光源不会产生阴影（因为朝所有方向发散光线，在这种情况计算阴影对GPU负担太大）。
点光源照到不同物体表面的亮度是线性递减的，因此，离点光源距离越远的物体会显得越暗。
**构造函数**
`PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )`
* color -- 颜色的RBG数值。
* intensity -- 光强的数值。
* distance - 光强为0处到光源的距离，0表示无穷大。
* decay - 沿着光照距离的衰退量。
**使用方法**
```
var pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );
```
### THREE.SpotLight
`THREE.SpotLight` 聚光灯光源，是一种锥形效果光源，属于常见光源，在产生阴影的时候比较有用。实例：手电筒。
**构造函数**
`SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )`
* 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; // 设置生成阴影
scene.add( spotLight );
```
**特有属性**
`target` 将聚光灯的焦点位于 `target.position` 处。
### THREE.DirectinalLight
`THREE.DirectinalLight` 方向光可以看做是距离很远的光源，所发出的光线都是平行的，比如太阳。
方向光和聚光灯光源的区别：
* 方向光不像聚焦光那样离目标越远越暗淡
* 被方向光光源照亮整个区域接收到的光强是一样的
**构造函数**
`DirectionalLight( color : Integer, intensity : Float )`
* color -- 光源颜色的RGB数值。
* intensity -- 光源强度的数值。
## 使用特殊光源生成高级光照效果
特殊光源：
* `THREE.HemisphereLight`
* `THREE.AreaLight`
### THREE.HemisphereLight
`THREE.AreaLight` 半球光光源，这种光源可以为室外场景创建更加自然点光照效果。
**应用场景**
当你在室外的时候，并不是所有光都来自上方，很多空气的散射、地面的反射，以及其它物体的反射，`THREE.AreaLight` 就是为这种情形创建的。
**构造函数**
`HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )`
* skyColor -- 从天空发出光的颜色
* groundColor -- 从地面发出光的颜色
* intensity -- 光线照射的强度。默认值为1。
### THREE.AreaLight
`THREE.AreaLight` 平面光光源，可以从很大的平面发射光线，而不是单个点。
如果要使用 `THREE.AreaLight` 光源，就不能用我们之前一直使用的 `THREE.WebGLRenderer` 对象，因为平面光光源氏一种非常复杂的光源，会对 `THREE.WebGLRenderer` 造成非常严重的性能损失， 可以用 `THREE.WebGLDeferredRenderer` （WebGL的延迟渲染器）对象在渲染场景时，可以处理复杂光照或者是光源很多的情况。
需要引入额外的代码文件：
```
```
## 镜头眩光效果
`THREE.LensFlare` 创建镜头光晕。
`LensflareElement( texture : Texture, size : Float, distance : Float, color : Color, blending : Materials )`
* texture -- THREE.Texture （可选）
* size -- 像素尺寸 (-1 = 使用 texture.width)
* distance -- 介于 (0-1) 的光源距离（0 = 在光源处）
* blending -- 混合模式 - 缺省为 THREE.NormalBlending
* color -- 镜头光晕的颜色。
---
# 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-pro.md?ask=
```
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.