深入理解three.js中光源

前言:

Three.js 是一個封裝了 WebGL 接口的非常好的庫,簡化了 WebGL 很多細節,降低了學習成本,是當前前端開發者完成3D繪圖的得力工具,那麼今天我就給大家詳細講解下 Three.js 中各種光源的區別和引用場景。

爲了更加直觀的展示不同光源的特性,我特意做了一個 demo 通過動畫來區別不同類型光源的特性,demo 中會展示點光源,環境光源,平行光源,半球光源,聚光燈光源五中光源的特性,爲了能夠直觀體驗光源移動過程中物體受光源的影響和光源位置,所以在光源的相同位置增加了一個白色的球體來指示光源的位置,demo中物體材質統一使用 MeshLambertMaterial 材質,demo 效果圖如下:
在這裏插入圖片描述
預覽地址深入理解Three.js中光源

1、點光源 PointLight
點光源從一個點向各個方向發射,實際情況中可以理解爲燈泡發出的光,可以將物體的陰影投射出,光源開啓陰影通過設置 castShadow = true。一個簡單的創建點光源的代碼如下:

var light = new THREE.PointLight( '#ff0000', 1, 100, 2 );
light.position.set( 50, 50, 50 );
light.castShadow = true;
scene.add( light );

上述代碼中 new THREE.PointLight() 用於創建點光源,該方法中有四個變量,依次是 colorintensitydistancedecay
color :(可選參數)) 十六進制光照顏色。 缺省值 0xffffff (白色),不支持 rgba 格式顏色。
intensity :(可選參數) 光照強度。 缺省值 1,值越大光照越強,實測最小值爲0,最大值不限。
distance :這個距離表示從光源到光照強度爲0的位置。 當設置爲0時,光永遠不會消失(距離無窮大)。缺省值 0,可以設置任意非負數。
decay :沿着光照距離的衰退量。缺省值 1。 模擬現實世界光衰減只需要設置 decay 值爲2便可。
在這裏插入圖片描述
2、環境光源 AmbientLight
環境光會均勻的照亮場景中的所有物體,該光源無法投影物體的陰影,因爲環境光源是沒有方向的,一個簡單的創建環境光源的代碼如下:

var light = new THREE.AmbientLight( '#404040', 1 ); 
scene.add( light );

上述代碼中 new THREE.AmbientLight() 用於創建環境光源,環境光源比較簡單,創建方法中只需要兩個變量,依次是 colorintensity
color :(可選參數)) 十六進制光照顏色。 缺省值 0xffffff (白色),不支持 rgba 格式顏色。
intensity :(可選參數) 光照強度。 缺省值 1,值越大光照越強,實測最小值爲0,最大值不限。
在這裏插入圖片描述
3、平行光源 DirectionalLight
平行光是沿着特定方向發射的光,這種光的表現像是無限遠,從它發出的光線都是平行的,常常用平行光來模擬太陽光的效果, 太陽足夠遠,因此我們可以認爲太陽的位置是無限遠,所以我們認爲從太陽發出的光線也都是平行的,平行光源可以映射物體的陰影,通過設置castShadow = true 來實現,一個創建平行光源的代碼如下:

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );

上述代碼中 new THREE.DirectionalLight() 用於創建平行光源,創建方法中只需要兩個變量,依次是 colorintensity
color :(可選參數)) 十六進制光照顏色。 缺省值 0xffffff (白色),不支持 rgba 格式顏色。
intensity :(可選參數) 光照強度。 缺省值 1,值越大光照越強,實測最小值爲0,最大值不限。
在這裏插入圖片描述
4、半球光源 HemisphereLight
半球光源直接放置於場景之上,光照顏色從天空光線顏色顏色漸變到地面光線顏色,半球光不能投射陰影,一個創建半球光源的簡單代碼如下:

var light = new THREE.HemisphereLight( '#ffffbb', '#080820', 1 );
scene.add( light );

上述代碼中 new THREE.HemisphereLight() 用於創建點光源,該方法中有四個變量,依次是 colorgroundColorintensity
color :(可選參數)) 十六進制光照顏色。 缺省值 0xffffff (白色),不支持 rgba 格式顏色。
groundColor: (可選參數) 地面發出光線的顏色。 缺省值 0xffffff(白色),不支持 rgba 格式顏色。
intensity:(可選參數) 光照強度。 缺省值 1,值越大光照越強,實測最小值爲0,最大值不限。
在這裏插入圖片描述
5、聚光燈光源 SpotLight
聚光燈是從一個方向上的一個點發出,沿着一個圓錐體,它離光越遠,它的尺寸就越大,聚光燈光源可以映射物體的陰影,通過設置 castShadow = true 來實現,一個創建聚光燈光源的代碼如下:

var spotLight = new THREE.SpotLight( '#ffffff', 1, 100, Math.PI / 4, 0.1, 0.1 );
spotLight.position.set( 100, 1000, 100 );

spotLight.castShadow = true;

spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;

scene.add( spotLight );

上述代碼中 new THREE.SpotLight() 用於創建點光源,該方法中有四個變量,依次是 colorintensitydistanceanglepenumbradecay
color :(可選參數)) 十六進制光照顏色。 缺省值 0xffffff (白色),不支持 rgba 格式顏色。
intensity :(可選參數) 光照強度。 缺省值 1,值越大光照越強,實測最小值爲0,最大值不限。
distance :這個距離表示從光源到光照強度爲0的位置。 當設置爲0時,光永遠不會消失(距離無窮大)。缺省值 0,可以設置任意非負數。
angle:光線散射角度,最大爲Math.PI/2
penumbra:聚光錐的半影衰減百分比。在0和1之間的值。默認爲0。
decay :沿着光照距離的衰退量。缺省值 1。 模擬現實世界光衰減只需要設置 decay 值爲2便可。
在這裏插入圖片描述
6、平面光光源 RectAreaLight
平面光光源比較特殊,後續會單獨進行說明。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章