前面我們用Threejs創(chuàng)建了一個(gè)3D立方體到瀏覽器，并使其跟隨鼠標(biāo)旋轉(zhuǎn)和縮放，但是，上帝說要有光，于是就有了光~~~額，好吧，這一節(jié)我們來認(rèn)識(shí)下Threejs中的燈光，Threejs提供了很多燈光的API，這里我們主要了解下環(huán)境光(AmbientLight)、點(diǎn)光(PointLight)、平行光(DirectionalLight)、和聚光燈(SpotLight)。
1.AmbientLight：環(huán)境光會(huì)均勻的照亮場(chǎng)景中的所有物體，環(huán)境光沒有方向，所以環(huán)境光不能用來投射陰影。AmbientLight對(duì)象接收兩個(gè)參數(shù)，第一個(gè)參數(shù)為光的顏色(顏色的rgb數(shù)值。缺省值為 0xffffff)，第二個(gè)參數(shù)為光的強(qiáng)度(取值范圍0-1，默認(rèn)為1)
在index.js中添加如下代碼，即可創(chuàng)建環(huán)境光并添加到場(chǎng)景中
// 創(chuàng)建環(huán)境光
const light = new THREE.AmbientLight(0x404040,,0.6)
scene.add(light)
添加完成后運(yùn)行瀏覽器，發(fā)現(xiàn)瀏覽器并沒有任何變化
這是因?yàn)槲覀冊(cè)谥斑x擇材質(zhì)的時(shí)間選擇的是基礎(chǔ)網(wǎng)格材質(zhì)(MeshBasicMaterial)，這種材質(zhì)是不受光照影響的，所以，我們要把之前的材質(zhì)進(jìn)行修改，修改為L(zhǎng)ambert網(wǎng)格材質(zhì)(MeshLambertMaterial)，這是一種非光澤表面的材質(zhì)，沒有鏡面高光。它可以很好地模擬一些表面（例如未經(jīng)處理的木材或石材），但不能模擬具有鏡面高光的光澤表面（例如涂漆木材）
找到之前創(chuàng)建的材質(zhì)，修改代碼如下
const material = new THREE.MeshLambertMaterial({
color:0xff0000,//設(shè)置顏色
})
此時(shí)發(fā)現(xiàn)場(chǎng)景中的物體明顯變暗了
2.PointLight：點(diǎn)光源，從一個(gè)點(diǎn)向各個(gè)方向發(fā)射的光源。比如燈泡發(fā)出的光。
PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )接收四個(gè)參數(shù)，
color - (可選參數(shù))) 十六進(jìn)制光照顏色。 缺省值 0xffffff (白色)
intensity - (可選參數(shù)) 光照強(qiáng)度。 缺省值 1。
distance - 這個(gè)距離表示從光源到光照強(qiáng)度為0的位置。 當(dāng)設(shè)置為0時(shí)，光永遠(yuǎn)不會(huì)消失(距離無窮大)。缺省值 0.
decay - 沿著光照距離的衰退量。缺省值 1
創(chuàng)建一個(gè)點(diǎn)光源并添加到場(chǎng)景中
// 創(chuàng)建點(diǎn)光 參數(shù)1 光的顏色，參數(shù)2 光的強(qiáng)度
const pointLight = new THREE.PointLight(0xffffff,1)
就想生活中的燈泡是在屋頂中央的位置安裝一樣，我們?cè)赥hreejs中也要給點(diǎn)光源一個(gè)位置，然后將其添加到場(chǎng)景中
// 點(diǎn)光源的位置
pointLight.position.set(400,300,200)
scene.add(pointLight)
此時(shí)運(yùn)行瀏覽器，可以看到物體表明已經(jīng)有了明暗變化，光能照到的地方是亮的，找不到的地方是暗的。
3.DirectionalLight：平行光是沿著特定方向發(fā)射的光?？梢岳斫鉃檫@種光是無限遠(yuǎn)的,從它發(fā)出的光線都是平行的。常常用平行光來模擬太陽光 的效果; 太陽足夠遠(yuǎn)，因此我們可以認(rèn)為太陽的位置是無限遠(yuǎn)，所以我們認(rèn)為從太陽發(fā)出的光線也都是平行的。
平行光可以投射陰影
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff,1)
// 設(shè)置光源的方向：通過光源position屬性和目標(biāo)指向?qū)ο蟮膒osition屬性計(jì)算光線的方向
directionalLight.position.set(80,100,50)
// 光的方向指向?qū)ο缶W(wǎng)格模型mesh，不設(shè)置默認(rèn)為0,0,0
directionalLight.target = mesh
scene.add(directionalLight)
4.SpotLight：聚光燈：光線從一個(gè)點(diǎn)沿一個(gè)方向射出，隨著光線照射的變遠(yuǎn)，光線圓錐體的尺寸也逐漸增大。
該光源可以投射陰影文章來源：http://www.zghlxwxcb.cn/news/detail-651426.html
// 聚光燈
const spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 0, 200, 100 );
scene.add(spotLight)
瀏覽器顯示效果如下
總結(jié)：Threejs提供了各種光源，各個(gè)光源的應(yīng)用場(chǎng)景不盡相同，具體用法可以查閱官方文檔。文章來源地址http://www.zghlxwxcb.cn/news/detail-651426.html
到了這里，關(guān)于Threejs入門之四:Threejs中的光的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
