three.js笔记——（3）光源

时间  2019-11-16 标签 three.js 笔记 光源

前言

玩摄影的同窗应该知道，光影是呈现物体的很重要的因素。在前面的两节学习中，咱们知道了怎么布置摄影棚（包括场景、照相机和渲染器）和如何塑造模特（包括几何体和材料）。那么这节的主要内容就是学习如何来布置光，让你的模特在不一样的光影下呈现出不一样的效果。html

光

环境光（AmbientLight）

（three.js官方文档--环境光）环境光会同等地照亮环境中的全部物体，而且环境光不能让物体产出投影，由于它没有方向。git

构造器

函数：AmbientLight( color, intensity )；用来建立一个环境光的实例对象；
参数：github

  1. color：设置环境光的颜色；less

  2. intensity：设置环境光的强度。函数

属性

  1. castShadow：这个属性在环境光中是undefined，由于环境光不能让物体产生投影。学习

  2. isAmbientLight：这个属性用来检测给出的光源是不是环境光。spa

方法

  1. .copy(source)：将source光源的颜色和强度复制到当前光对象中；3d

  2. toJSON(meta)：以JSON的形式返回光的参数。code

接下来咱们来看看物体打上环境光的效果：htm

clipboard.png

github项目：环境光

平行光（DirectionalLight）

（three.js官方文档——平行光）平行光是从一个特定方向发出的光线互相平行的光。这种类型的光一般用来模拟白天的光，太阳距离咱们足够远，所以太阳光能够被看做是平行光。平行光能够产生投影。

备注：一般有一个困惑就是对于平行光来说设置旋转并无什么效果，这是由于这里的平行光等同于其余的应用中的“目标平行光”。这意味着它的方向是由光的位置和物体的位置来计算出来的，也是这个缘由容许平行光产生投影，

构造器

函数：DirectionalLight( color, intensity )；
参数：

  1. color：设置平行光的颜色；

  2. intensity：设置平行光的强度；

属性

  1. .castShadow：若是设置为true，将会产生动态的投影，默认值为false；

  2. .isDirectionalLight：默认值为true且不能修改，这个属性用来检测光是否为平行光；

  3. .position：至关于设置 Object3D.DefaultUp 坐标坐标为( 0, 1, 0 )，至关于光线是从正上方平行照射下来；

  4. .shadow：用来为光线计算阴影；

  5. .target：平行光的方向是从光的位置指向目标物体的位置，默认目标物体的位置是( 0, 0, 0 )。
    备注：若是目标物体的位置移动到除了默认位置的其它位置，那么必须从新被添加到场景中经过scene.add(light.target);固然也能够将目标物体换为场景中的其它物体，以下所示：

var targetObject = new THREE.Object3D();
    scene.add(targetObject);

    light.target = targetObject;

方法

  1. .copy(source)：将source光源的颜色和强度复制到当前光对象中；

  2. toJSON(meta)：以JSON的形式返回光的参数。

接下来咱们看看给物体打上平行光的效果：

clipboard.png

github项目：平行光

点光（PointLight）

顾名思义，点光是由一个点光源向四面八方发出光线。一般使用到这种光的状况是模拟从一个单独的灯泡上发出光线的状况。

构造器

函数：PointLight( color, intensity, distance, decay )
参数：

  1. color：设置光的颜色；

  2. intensity：设置光的强度，默认值为1；

  3. distance：设置光距离物体的距离；

  4. decay：设置光的衰减量；

属性

  1. .decay：默认值为1；

  2. .distance：默认为0.0，这个属性描述了光线强度减弱到0时距离光源的位置；

  3. .isPointLight：默认值为true，用来检查光线是否为点光；

  4. .power：用来描述光的能量，默认为4pi；

  5. .shadow：用来计算光所产生的阴影

方法

  1. .copy(source)：将source光源的颜色和强度复制到当前光对象中；

  2. toJSON(meta)：以JSON的形式返回光的参数。

接下来咱们看给物体打上点光的效果，能够明显地看到点光的光圈。

clipboard.png

github项目：点光

矩形区域光（RectAreaLight）

（three.js官方文档——矩形区域光）这种光从一个矩形面均匀地发射，能够用来模拟明亮的窗户或者带状的照明。这类型的光能够产生投影。

构造器

函数：RectAreaLight( color, intensity, distance, angle, penumbra, decay )
参数：

  1. color：设置光的颜色；

  2. intensity：设置光的强度，默认值为1；

  3. distance：设置光距离物体的距离；

  4. angle：设置光的照射角度；

  5. penumbra：这个参数不是很清楚。。。；

  6. decay：设置光的衰减量；

属性

  1. .castShadow：若是设置为true，将会产生动态的投影，默认值为false；

  2. .decay：描述光的衰减，默认值为1；

  3. .distance：默认为0.0，这个属性描述了光线强度减弱到0时距离光源的位置；

  4. .isRectAreaLight：默认为true，用来检查光是不是矩形区域光；

  5. .position：至关于设置 Object3D.DefaultUp 坐标坐标为( 0, 1, 0 )，至关于光线是从正上方平行照射下来；

  6. .shadow：用来计算光所产生的阴影；

  7. .target：平行光的方向是从光的位置指向目标物体的位置，默认目标物体的位置是( 0, 0, 0 )。

方法

  1. .copy(source)：将source光源的颜色和强度复制到当前光对象中；

  2. toJSON(meta)：以JSON的形式返回光的参数。

聚光灯（SpotLight）

聚光灯是由点光源发出，这种类型的光也能够产生投影。

构造器

函数：SpotLight( color, intensity, distance, angle, penumbra, decay )；
参数：

  1. color：设置光的颜色；

  2. intensity：设置光的强度；

  3. distance：设置光源到物体的距离；

  4. angle：聚光灯可以照射的最大范围；

  5. penumbra：因为边缘形成的聚光锥衰减的百分比；

  6. decay：光的衰减速度；

属性

  1. .angle：默认值为Math.PI/3，不超过Math.PI/2；

  2. .castShadow：默认值为true，值为true时会动态投影；

  3. .decay：设置光的衰减程度，值在0和1之间；

  4. .distance：设置光衰减为0时距离光源的距离；

  5. .isSpotLight：用来检查光源是不是聚光灯；

  6. .penumbra：因为光边缘形成的聚光锥衰减的百分比，值能够在0和1之间，默认值为0；

  7. .position：至关于设置 Object3D.DefaultUp 坐标坐标为( 0, 1, 0 )，至关于光线是从正上方平行照射下来；

  8. .power：光强度大小，默认值为4PI；

  9. .shadow:SpotLightShadow用来计算光产生的阴影；

  10. .target：平行光的方向是从光的位置指向目标物体的位置，默认目标物体的位置是( 0, 0, 0 )。

方法

  1. .copy(source)：将source光源的颜色和强度复制到当前光对象中；

  2. toJSON(meta)：以JSON的形式返回光的参数。

联系我们 沪ICP备13005482号-10