前言

現(xiàn)實世界中，之所以我們能用眼睛看到物體，是因為有太陽、白熾燈等各種燈光的照射，等該功能照射到物體上，物體將燈光反射到我們的眼睛里，我們的大腦里才能呈現(xiàn)物體的影響。如果沒有光，我們看到的將是漆黑一片。同時光的亮度、光的顏色、光的來源、光的位置等等一系列因素，都會影響到我們對物體的觀察。
虛擬的世界也一樣，可以通過對光的設(shè)置，來修改物體呈現(xiàn)的效果。

如果不設(shè)置光，則物體呈現(xiàn)的是黑色一片。

效果

光有幾種不同的分類，主要包括環(huán)境光、平行光、點光以及聚光燈幾種。

一、環(huán)境光

環(huán)境光，整個環(huán)境的光；即在某一個空間內(nèi)，所有的位置都在發(fā)光，且光的強度都一樣。
在ThreeJS中，我們通過AmbientLight來設(shè)置環(huán)境光。

  // 第一個參數(shù)是光線的顏色，第二個參數(shù)是光線的強度
  const ambientLight = new THREE.AmbientLight(0xFF_FF_FF, 1000);
  scene.add(ambientLight);

效果

開發(fā)中，我們一般將環(huán)境光設(shè)為白色，并設(shè)置一定的強度。
請注意，MeshBasicMaterial的材質(zhì)，不受光線的影響。

二、平行光

平行光，從某一個方向平行射進來的光；光照射到哪個方向，哪個方向的面就呈現(xiàn)亮色；反正照射不到的方向，呈現(xiàn)暗色。

現(xiàn)實世界中，太陽光可以近似的看成平行光，太陽光照射到哪里，哪里就是白天；反之則是黑夜。這才有了白天黑夜之分。

在ThreeJS中，通過DirectionalLight設(shè)置方向光；

// 創(chuàng)建方向光，第一個參數(shù)是光的顏色，第二個參數(shù)是光的強度
const directionalLight = new THREE.DirectionalLight(0xff_ff_ff, 10);
// 設(shè)置光源的方向：通過光源position屬性和目標指向?qū)ο蟮膒osition屬性計算
directionalLight.position.set(100, 40, 0);
// 方向光指向?qū)ο缶W(wǎng)格模型mesh，可以不設(shè)置，默認的位置是0,0,0
directionalLight.target = mesh;
// 光源添加到場景中
scene.add(directionalLight);

// 可通過輔助觀察對象，觀察光源的位置
const dirLightHelper = new THREE.DirectionalLightHelper(
    directionalLight,
    5,
    0xFF_00_00,
  );
scene.add(dirLightHelper);

效果

三、點光

點光，從某一個點向四周發(fā)散光芒，物體離這個點越近光越強，反之越遠光越弱。

就像現(xiàn)實生活中的圓形燈泡，燈泡的光芒向房間內(nèi)四散，離燈泡越近燈光越亮，離燈泡越遠燈泡越暗。

在ThreeJS中，使用PointLight來設(shè)置點光；

// 創(chuàng)建點光
const pointLight = new THREE.PointLight(0xff_ff_ff, 2000);
// 設(shè)置點光的位置
pointLight.position.set(120, 120, 120);
// 設(shè)置光源不隨距離衰減，0.0表示不隨距離衰減（點光照射到的位置，光的強度相同）
pointLight.decay = 1.2;
// 設(shè)置光線可達到的距離，超過這個距離，不會有光線
pointLight.distance = 200;
// 將點光添加到場景中
scene.add(pointLight);

// 可通過輔助觀察對象，觀察光源的位置
const pointLightHelper = new THREE.PointLightHelper(
    pointLight,
    10,
    0xff_00_00,
  );
scene.add(pointLightHelper);

效果

四、聚光燈

聚光燈，從某一個點，從一定的角度發(fā)出光芒，光線只局限于這個角度所在的區(qū)域內(nèi)。離發(fā)光點越近越亮，離發(fā)光點越遠越暗。

現(xiàn)實生活中，舞臺所用的聚光燈、家里常備的手電筒。

聚光燈

// 創(chuàng)建聚光燈
const spotLight = new THREE.SpotLight(0xFF_FF_FF, 2000);
// 設(shè)置聚光燈的位置
spotLight.position.set(100, 100, 0);
//  設(shè)置光源不隨距離衰減，0.0表示不隨距離衰減（點光照射到的位置，光的強度相同）
spotLight.decay = 1.2;
// 設(shè)置聚光燈發(fā)散的角度，超出這個角度的范圍，沒有光線
spotLight.angle = Math.PI / 3;
// 設(shè)置聚光燈可達到的距離，超過這個距離，不會有光線
spotLight.distance = 120;

// 可通過輔助觀察對象，觀察光源的位置
const spotLightHelper = new THREE.SpotLightHelper(spotLight, 10);
scene.add(spotLightHelper);

效果

五、源代碼

demo