光源

光源的种类

  • 环境光(AmbientLight)
  • 点光源(PointLight)
  • 平行光(DirectionalLight)
  • 聚光灯(SpotLight)

环境光

介绍：对场景整体光照效果相同的光源。
特点：没有明确的光源位置，各处亮度一致。

1
2
3
4
5
6
7
8
/* 创建环境光
 *      参数说明：
 *      -- hex：16进制RGB颜色信息）
 */
var light = new THREE.AmbientLight(hex);

// 加入场景
scene.add(light);

点光源

介绍：点向周围空间均匀发光的光源。
特点：不计光源的大小；距离越远，光线越散。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 创建点光源
 *      参数说明：
 *          hex：16进制RGB颜色
 *          intensity：亮度（缺省为1）
 *          distance：光源最远照射到的距离（缺省为0）
 */    
var light = new THREE.PointLight(hex, intensity, distance);

// 位置
light.position.set(0, 1.5, 2);

// 加入场景
scene.add(light);

平行光

介绍：一组没有衰减的平行的光线。
特点：对于任意平行的平面，平行光照射的亮度都是相同的。

1
2
3
4
5
6
7
8
9
10
11
12
/* 创建平行光源
 *      参数说明：
 *          hex：16进制RGB颜色
 *          intensity：亮度（缺省1）
 */
var light = new THREE.DirectionalLight( hex, intensity );

// 设置位置
light.position.set(2, 5, 3); // 意味着平行光沿矢量(-2.-5,-3)的方向照射到所有平面

// 加入场景
scene.add(light);

聚光灯

介绍：一种可以投影出类似圆锥形阴影的特殊的“点光源”。
特点：同点光源。不计光源的大小；距离越远，光线越散。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 创建平行光源
 *      参数说明：
 *          hex：16进制RGB颜色
 *          intensity：亮度（缺省值为1）
 *          distance：光源最远照射到的距离（缺省值为0）
 *          angle：聚光灯的张角（缺省值为Math.PI/3，最大值Math.PI/2）
 *          exponent：光强在偏离target的衰减指数（缺省值为10。target需要在之后定义，缺省值为(0,0,0)）
 */
var light = THREE.SpotLight(hex, intensity, distance, angle, exponent)；

// 设置位置
light.position.set(0, 0, 3);

// 设置目标位置
light.target.position.set(0,0,0); // 如果把 target 设置为某物体(例如：light.target=mesh)，聚光灯就会随该物体运动

阴影

注意：

  • 只有“平行光”和“聚光灯”才能形成阴影。
  • 只有“Lambert材质”和“Phong材质”的物体才能形成阴影。

使用方法：

  1. 设置渲染器渲染阴影

    renderer.shadowMapEnabled = true;

  2. 光源渲染阴影

    light.castShandow = true;

  3. 设置显示阴影的物体

    mesh.receiveShaow = true;

  4. 设置产生光源阴影范围

    (1) 对于聚光灯，需要设置shadowCameraNear、shadowCameraFar、shadowCameraFov（这三个参数类似透视投影照相机）。

    只有在 shadowCameraNear 和 shadowCameraFar 之间的物体才会产生阴影;

    shadowCameraFov表示夹角。

    (2) 对于平行光，需要设置shadowCameraNear、shadowCameraFar、shadowCameraLeft、shadowCameraRight、shadowCameraTop、shadowCameraBottom六个值（类似于正交投影照相机的六个面）。

    在这六个面围成的范围内的物体，才会产生阴影

    （ps：为了使结果更直观，可以在调试时开启light.shadowCameraVisible=true，把光的范围用线表示出来）

  5. 其他参数：

    shadowDarkness：阴影的深浅，该值的范围是0到1，越小越浅

    shadowMapSoft：软阴影