three.js筆記——(3)光源

前言

玩攝影的同窗應該知道,光影是呈現物體的很重要的因素。在前面的兩節學習中,咱們知道了怎麼佈置攝影棚(包括場景、照相機和渲染器)和如何塑造模特(包括幾何體和材料)。那麼這節的主要內容就是學習如何來佈置光,讓你的模特在不一樣的光影下呈現出不一樣的效果。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的形式返回光的參數。

相關文章
相關標籤/搜索