DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> Three.js源碼閱讀筆記(光照部分)
Three.js源碼閱讀筆記(光照部分)
編輯:JavaScript基礎知識     
天氣越來越冷了,人也越來越懶怠,越來越像呆在溫暖的寢室裡看小說或者打游戲,也好久沒看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;
// 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( 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...
};

一種可以在某個方向上產生陰影的點光源,影響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 !== 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;
};

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

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

其實這幾篇都是涉及怎麼定義場景的,至於怎麼渲染場景很難有深入。我准備接下來去看Demo的代碼,結合者看看WebGLRenderer類的源代碼(幾千行OMG)。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved