使用Three.js里的各种光源

Posted 2020-09-12 Heavi的博客

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 plane
var 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="../libs/WebGLDeferredRenderer.js"></script>
<script type="text/javascript" src="../libs/ShaderDeferred.js"></script>
<script type="text/javascript" src="../libs/RenderPass.js"></script>
<script type="text/javascript" src="../libs/EffectComposer.js"></script>
<script type="text/javascript" src="../libs/CopyShader.js"></script>
<script type="text/javascript" src="../libs/ShaderPass.js"></script>
<script type="text/javascript" src="../libs/FXAAShader.js"></script>
<script type="text/javascript" src="../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可添加光圈的效果，调用它需要置顶文理、尺寸、距离、融合模式。