首页 > 代码库 > 使用Three.js里的各种光源
使用Three.js里的各种光源
1.three.js库提供的光源
three.js库提供了一些列光源，而且没种光源都有特定的行为和用途。这些光源包括：
光源名称/描述
AmbientLight(环境光）/这是一种基础光源，它的颜色会添加到整个场景和所有对象的当前颜色上
PointLight(点光源)/空间中的一点，朝所有的方向发射光线
SpotLight(聚光灯光源)/这种光源有聚光的效果，类似台灯、天花板上的吊灯，或者手电筒
DirectionLight(方向光)/也称为无限光。从这种光源发出的光线可以看着平行的。例如，太阳光
HemishpereLight(半球光)/这是一种特殊光源，可以用来创建更加自然的室外光线，模拟放光面和光线微弱的天空
AreaLight(面光源)/使用这种光源可以指定散发光线的平面，而不是空间中的一个点
LensFlare(镜头眩光)/这不是一种光源，但是通过LensFlare可以为场景中的光源添加眩光效果
2.使用THREE.Color对象
当构建THREE.Color(color)对象时，color可以用十六进制字符串（#cccccc）或者十六进制数值。然而，在构想构造好后如果需要改变颜色，就不得不创建一个新的THREE.Color对象或者修改当前THREE.Color对象的内部属性。THREE.Color提供的函数包括:
函数名/描述
set(value)/将当前颜色改成指定的十六进制值。可以是字符串，也可以是数字
setHex(value)/将当前颜色指定为十六进制数值
setRGB(r, g, b)/根据提供的RBG设置颜色。参数范围0到1
setHSV(h, s, v)/根据提供的HSV值设置颜色。参数的范围从0到1
setStyle(color)/根据CSS值设置颜色
copy(color)/从提供的颜色对象复制颜色值到当前对象
convertGamaToLinear(color)/将当前颜色从伽马色彩空间转换到线性色彩空间
convertLinearToGamma(color)/将当前颜色从线性色彩空间转换到伽马色彩空间
getHex()/以十六进制形式从颜色对象中获取颜色值
getHexString()/以十六进制字符串形式从颜色对象中获取颜色值
getStyle()/以CSS值得形式从颜色对象获取颜色值
getHSV()/以HSV形式从颜色对象中获取颜色值
addColor(color)/将提供的颜色添加到当前颜色上
clone()/复制当前颜色
3.PointLight属性
属性/描述
color(颜色)/光源颜色
intensity(强度)/光照强度。默认值是1
distance(距离)/光源照射的距离
position(位置)/光源所在的位置
visible(是否可见)/如果设为true，该光源就会打开；如果设置为false，改光源就会关闭
4.SpotLight属性
属性/描述
castShadow(投影)/如果设置为true,光源生成阴影
target/决定光源的方向
angle(角度)/光源射出的光柱有多宽。单位为弧度，默认值是Math.PI/3
shadowCameraVisible(投影方式显示）/用于调试，如果设置true，你就可以看到光源在哪里以及如何生成阴影
shadowMapWidth(阴影映射宽度)/决定多少像素用来生成阴影。如果阴影的边缘参差不齐或看上去不平滑，可增加这个值。场景渲染之后就不能修改
shadowMapHeight(阴影映射高度)/决定杜少像素用来生成阴影。如果阴影的边缘参差不齐或看上去不平滑，可增加这个值。场景渲染之后就不能修改
创建光源非常简单。只要指定颜色、设置需要的属性、添加到场景集客。例如：
var target = new THREE.Object3D();target.position = new THREE.Vector3(5, 0, 0);var pointColor = "#ffffff";var spotLight = new THREE.SpotLight(pointColor);spotLight.position.set(-40, 60, -10);spotLight.castShadow = true;spotLight.shadowCameraNear = 2;spotLight.shadowCameraFar = 200;spotLight.target = target;spotLight.distance = 0;spotLight.angle = 0.4;scene.add(spotLight);
如果阴影看上去有点模糊，可以增加shadowMapWidth、shadowMaptHeight属性的值，或者保证用于生成阴影的区域紧密包围着对象。可以使用shadowCameraNear、shadowCameraFar和shadowCameraFov属性配置这个区域。
5.DirectionLight属性
方向光源和聚光灯光源很多属性都是相同的。跟聚光灯一样，包围对象空间定义的月紧密，投影的效果越好。可以使用下面几个属性定义这个方块。
var pointColor = "#ff5808";var directionLight = new THREE.DirectionalLight(pointColor);directionLight.position.set(-40, 60, -10);directionLight.castShadow = true;directionLight.shadowCameraNear = 2;directionLight.shadowCameraFar = 100;directionLight.shadowCameraLeft = -50;directionLight.shadowCameraRight = 50;directionLight.shadowCameraTop = 50;directionLight.shadowCameraBottom = -50;directionLight.distance = 0;directionLight.intensity = 0.5;directionLight.shadowMapWidth = 1024;directionLight.shadowMapHeight = 1024;scene.add(directionLight);
6.HemisphereLight半球光光源
使用半球光光源，可以创建出更加贴近自然的光照效果。构造函数为new THREE.HeimsphereLight(groundColor, color, intensity)。属性说明：
属性/描述
groundColor/从地面发出的光线颜色
Color/从天空发出的光线颜色
intensity/光线照射的强度
7.如何加载文理
我们可以给材质表面添加文理，文理可以来至一张图片。加载文理可使用THREE.ImageUtils的loadTexture函数。例如：
var textureGrass = THREE.ImageUtils.loadTexture("../assets/textures/ground/grasslight-big.jpg");textureGrass.wrapS = THREE.RepeatWrapping;textureGrass.wrapT = THREE.RepeatWrapping;textureGrass.repeat.set(4, 4);// create the ground planevar planeGeometry = new THREE.PlaneGeometry(1000, 200, 20, 20);var planeMaterial = new THREE.MeshLambertMaterial({map: textureGrass});var plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.receiveShadow = true;
textureGrass就是一个文理对象，通过wrapS、wrapT设置文理坐标s、t方向的平铺方式。 textureGrass.repeat.set(4, 4)设置屏幕在s、t方向重复数为2*2。
8.平面光光源
平面光光源AleaLight可以顶一个一个放光的矩形。AreaLight并不在标注你的Three.js库中，而是在他的扩展库中，所有在使用之前要完成几个额外的步骤。
如果要使用平面光光源，那么就不能直接使用THREE.WebGLRenderer对象了。而使用使用THREE.WebGLDeferredRenderer(WebGL的延迟渲染器)。要使用THREE.WebGLDeferredRenderer对象，必须引入Three.js提供的额外极端javascript代码。在html头部引入：
<script type="text/javascript" src="http://www.mamicode.com/libs/WebGLDeferredRenderer.js"></script><script type="text/javascript" src="http://www.mamicode.com/libs/ShaderDeferred.js"></script><script type="text/javascript" src="http://www.mamicode.com/libs/RenderPass.js"></script><script type="text/javascript" src="http://www.mamicode.com/libs/EffectComposer.js"></script><script type="text/javascript" src="http://www.mamicode.com/libs/CopyShader.js"></script><script type="text/javascript" src="http://www.mamicode.com/libs/ShaderPass.js"></script><script type="text/javascript" src="http://www.mamicode.com/libs/FXAAShader.js"></script><script type="text/javascript" src="http://www.mamicode.com/libs/MaskPass.js"></script>
包含这些库之后就可以使用THREE.WebGLDeferredRenderer对象了。使用代码如下：
var renderer = new THREE.WebGLDeferredRenderer({width: window.innerWidth,height: window.innerHeight,scale: 1, antialias: true,tonemapping: THREE.FilmicOperator, brightness: 2.5});
9.镜头眩光
可以通过实例化THREE.LensFlare对象来创建镜头眩光。首先创建这个对象。THREE.LensFlare对象接收参数：
THREE.LensFlare = function(texture, size, distance, blending, color),参数列表：
参数/描述
texture/用着眩光效果的材质。决定眩光的样子
size/指定眩光应该多大，单位为像素。
distance/光源0到相机1的距离
blending/我们可以为眩光提供多种材质。融合模式决定他们讲如何融合在一起。默认融合模式是THREE.AddtiveBlending。它提供一种办透明的眩光。
color/眩光颜色
创建代码如下所示：
var flareColor = new THREE.Color(0xffaacc);var lensFlare = new THREE.LensFlare(textureFlare0, 350, 0.0, THREE.AdditiveBlending, flareColor);lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending);lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending);lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending);lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);lensFlare.position.copy(spotLight.position);scene.add(lensFlare);
创建的眩光位置可以放在光源处，就像太阳光一样。其中lensFlare.add可添加光圈的效果，调用它需要置顶文理、尺寸、距离、融合模式。
使用Three.js里的各种光源