使用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 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可添加光圈的效果，調用它需要置頂文理、尺寸、距離、融合模式。