Three.js源碼閱讀筆記(光照部分)

更新時間：2012年12月27日 16:26:39 作者：

好久沒看Three.js源碼了。今天天氣不錯，接著看;這次從光照部分看起：光照模型，從光線本身角度來看包括環(huán)境光、平行光、點光源，從物體表面材質(zhì)角度看又包括漫反射和鏡面反射,需要了解的朋友可以參考下

天氣越來越冷了，人也越來越懶怠，越來越像呆在溫暖的寢室里看小說或者打游戲，也好久沒看Three.js源碼了。今天天氣不錯，接著看！

這次從光照部分看起：光照模型，從光線本身角度來看包括環(huán)境光、平行光、點光源，從物體表面材質(zhì)角度看又包括漫反射和鏡面反射。

Lights:Light

復制代碼代碼如下:

 
THREE.Light = function ( hex ) { 
THREE.Object3D.call( this ); 
this.color = new THREE.Color( hex ); 
}; 

該對象是其他光照對象的原型/基類，本身繼承自Object3D對象/類型。它自身只有一個THREE.Color類型的color屬性，就是顏色，這很好理解。

在Three.js中，光照作為一種Object3D對象，是經(jīng)過Scene.add()方法加入到場景中的，渲染器會自動渲染所加入的光照效果。
Light::AmbientLight

復制代碼代碼如下:

 
THREE.AmbientLight = function ( hex ) { 
THREE.Light.call( this, hex ); 
}; 

無方向的環(huán)境光，并沒有比Light類型多一個屬性或方法，而僅僅為了語義上的繼承而繼承自Light，它甚至沒有必要是Object3D對象。

Light::DirectionalLight

復制代碼代碼如下:

 
THREE.DirectionalLight = function ( hex, intensity ) { 
THREE.Light.call( this, hex ); 
this.position = new THREE.Vector3( 0, 1, 0 ); 
this.target = new THREE.Object3D(); 
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
this.castShadow = false; 
this.onlyShadow = false; 
// more settings about shadow ...... 
}; 

平行光（有方向的光），使用new運算符構(gòu)造該函數(shù)時需傳入顏色hex和光線的“密度”intensity。這個類有這樣一些屬性：
position：一個位置，以該位置為起點，原點為終點的方向是光線的方向。
intensity：光線的密度，默認為1。因為RGB的三個值均在0~255之間，不能反映出光照的強度變化，光照越強，物體表面就更明亮。
distance：衰減距離，默認值為0，光照無衰減；如果是非0值，光照會從position位置（實際上是position所處的那個平面）開始衰減，衰減到distance距離之后，光照強度intensity為0。
castShadow：布爾值，控制是否產(chǎn)生陰影，默認為false。如果設為true，對于所有表面都會逐像元地計算其在光照方向上是否被遮擋，這會消耗大量的計算。
onlyShadow：布爾值，控制是否只產(chǎn)生陰影而不“照亮”物體，默認為false。這種模式也許有什么特殊應用吧。
shadowCameraLeft，shadowCameraRight……系列，以position點為中心控制產(chǎn)生陰影的范圍？
shadowBias：陰影偏心，默認為0。
shadowDarkness：陰影對物體亮度的影響，在0~1之間，默認為0.5。
還有不少屬性暫時猜不出含義（真該去補補計算機圖形學啊，硬著頭皮繼續(xù)看吧）。

Light::PointLight

復制代碼代碼如下:

 
THREE.PointLight = function ( hex, intensity, distance ) { 
THREE.Light.call( this, hex ); 
this.position = new THREE.Vector3( 0, 0, 0 ); 
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
this.distance = ( distance !== undefined ) ? distance : 0; 
}; 

點光源，position那肯定就是光源點了。注意點光源的position和平行光的position的區(qū)別，前者默認在原點，而后者默認在點（0，1，1），這使得默認的平行光方向和相機的默認朝向一致。
其他兩個屬性和平行光中一樣。PointLight點光源沒有關(guān)于如何產(chǎn)生陰影的設定。

Light::SpotLight

復制代碼代碼如下:

 
THREE.SpotLight = function ( hex, intensity, distance, angle, exponent ) { 
THREE.Light.call( this, hex ); 
this.position = new THREE.Vector3( 0, 1, 0 ); 
this.target = new THREE.Object3D(); 
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
this.distance = ( distance !== undefined ) ? distance : 0; 
this.angle = ( angle !== undefined ) ? angle : Math.PI / 2; 
this.exponent = ( exponent !== undefined ) ? exponent : 10; // more settings about shadow... 
}; 

一種可以在某個方向上產(chǎn)生陰影的點光源，影響MeshLamberMaterial和MeshPhongMaterial類型材質(zhì)的表面。對陰影如何處理的設定和DirectionLight一致。
總之，光照對象并不承擔渲染光照的任務，而僅僅是定義如何渲染光照。
Object::Partical

復制代碼代碼如下:

  
THREE.Particle = function ( material ) { 
THREE.Object3D.call( this ); 
this.material = material; 
}; 

粒子就是一個由材質(zhì)的Object3D，這很好理解。Object3D對象提供一個坐標（就是粒子的坐標），負責粒子的運動，粒子只需要指定表現(xiàn)它的材質(zhì)即可。

Object::ParticalSystem

復制代碼代碼如下:

 
THREE.ParticleSystem = function ( geometry, material ) { 
THREE.Object3D.call( this ); 
this.geometry = geometry; 
this.material = ( material !== undefined ) ? material : new THREE.ParticleBasicMaterial( { color: Math.random() * 0xffffff } ); 
this.sortParticles = false; 
if ( this.geometry ) { 
if( this.geometry.boundingSphere === null ) { 
this.geometry.computeBoundingSphere(); 
} 
this.boundRadius = geometry.boundingSphere.radius; 
} 
this.frustumCulled = false; 
}; 

粒子系統(tǒng)表現(xiàn)多個粒子的運動，粒子系統(tǒng)本身繼承自是Object3D對象。有這樣幾個屬性：
geometry屬性，每一個節(jié)點都是一個粒子，這些共享一個材質(zhì)。
material屬性，即這些節(jié)點的材質(zhì)。

frustumCulled屬性，布爾值，如果設定為真，那么在相機視界之外的會被踢出，但還沒弄清楚是粒子系統(tǒng)中心坐標在視界外就踢出整個粒子系統(tǒng)還是單個粒子出去了就剔除，猜測多半是后者。

其實這幾篇都是涉及怎么定義場景的，至于怎么渲染場景很難有深入。我準備接下來去看Demo的代碼，結(jié)合者看看WebGLRenderer類的源代碼（幾千行OMG）。

您可能感興趣的文章: