Three.js原始碼閱讀筆記(光照部分)_基礎知識

天氣越來越冷了，人也越來越懶怠，越來越像待在溫暖的寢室裡看小說或打遊戲，也好久沒看Three.js原始碼了。今天天氣不錯，接著看！

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

Lights:Light

複製程式碼 程式碼

THREE.Light = function ( hex ) {

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

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

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

Light::AmbientLight

複製程式碼 程式碼>THREE.AmbientLight = function ( hex ) { THREE.Light.call( this, hex );

};

無方向的環境光，且沒有比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 this.onlyShadow = false
// more settings about shadow ......
};


平行光（有方向的光），使用new運算子建構此函數時需傳入顏色hex和光線的“密度”intensity。這個類別有這樣一些屬性：
position：一個位置，以此位置為起點，原點為終點的方向是光線的方向。
intensity：光線的密度，預設為1。因為RGB的三個值都在0~255之間，無法反映出光照的強度變化，光照越強，物體表面就更明亮。

distance：衰減距離，預設值為0，光照無衰減；如果是非0值，光照會從position位置（實際上是position所處的那個平面）開始衰減，衰減到distance距離之後，光照強度intensity為0。
castShadow：布林值，控制是否產生陰影，預設為false。如果設為true，則對於所有表面都會逐像元地計算其在光照方向上是否被遮擋，這會消耗大量的計算。
onlyShadow：布林值，控制是否只產生陰影而不「照亮」物體，預設為false。這種模式也許有什麼特殊應用吧。
shadowCameraLeft，shadowCameraRight…系列，以position點為中心控制產生陰影的範圍？
shadowBias：陰影偏心，預設為0。
shadowDarkness：陰影對物體亮度的影響，在0~1之間，預設為0.5。
還有不少屬性暫時猜不出意義（真該去補補電腦圖形學啊，硬著頭皮繼續看吧）。


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的區別，前者預設在原點，而後者預設在點（0，1，1），這使得預設的平行光方向和相機的預設朝向一致。

其他兩個屬性和平行光中一樣。 PointLight點光源沒有關於如何產生陰影的設定。 Light::SpotLight 複製程式碼 代碼如下

THREE.SpotLight = function ( hex, intensity, distance, angle, exponent ) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 000 , 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 : exponent = ( exponent !== undefined ) ? exponent : 100; // more settings about shadow...
};

一種可以在某個方向上產生陰影的點光源，影響MeshLamberMaterial和MeshPhongMaterial類型材質的表面。對陰影如何處理的設定和DirectionLight一致。
總之，光照物件並不承擔渲染光照的任務，而只是定義如何渲染光照。
Object::Partical

複製程式碼 程式碼如下:THREE.Particle = function ( material ) {

THREE.Object3D.call( this );

this.material = material;
};


粒子就是一個由材質的Object3D，這很好理解。 Object3D物件提供一個座標（就是粒子的座標），負責粒子的運動，粒子只需要指定表現它的材質。

Object::ParticalSystem

複製程式碼複製程式碼

複製程式碼


程式碼如下
THREE.ParticleSystem = function ( geometry, material ) {
THREE.Object3D.call( this );
this.geometry = geometry;
this.material = ( material !== undefine) ? material : new THREE.ParticleBasicMaterial( { color: Math.random() * 0xffffff } );
this.sortParticles = false;
if ( this.geometry ) {
if(this .Somepheretry. === null ) {
this.geometry.computeBoundingSphere();
}
this.boundRadius = geometry.boundingSphere.radius;
}

this.JustumCulled = frseum; };


粒子系統表現多個粒子的運動，粒子系統本身繼承自是Object3D物件。有這樣幾個屬性：
geometry屬性，每一個節點都是一個粒子，這些共享一個材質。
material屬性，即這些節點的材質。

frustumCulled屬性，布林值，如果設定為真，那麼在相機視界之外的會被踢出，但還沒弄清楚是粒子系統中心座標在視界外就踢出整個粒子系統還是單一粒子出去了就剔除，猜測多半是後者。 其實這幾篇都是涉及怎麼定義場景的，至於怎麼渲染場景很難有深入。我準備接下來去看Demo的程式碼，結合者看看WebGLRenderer類別的原始碼（幾千行OMG）。