Three.js源碼閱讀筆記(基礎的核心Core對象)
2024-05-06 14:20:14
供稿：網友
Three.js是一個比較偉大的webgl開源庫，它簡化了瀏覽器3D編程，使得使用JavaScript在瀏覽器中創建復雜的場景變得容易很多。Github上眾多webgl demo令我興奮不已，躍躍欲試。由于這個庫還處在開發階段，因此資料非常匱乏，愛好者大部分時間不得不通過閱讀該庫的源碼進行學習，我現在也準備這樣做。
這是第一篇筆記，先從最基礎的核心（Core）對象開始。
Core::Vector2
該構造函數用來創建一個表示二維向量的對象
代碼如下:
THREE.Vector2 = function ( x, y ) {
this.x = x || 0;
this.y = y || 0;
};
Vector2對象的功能函數采用定義構造函數的原型對象來實現，形如：
代碼如下:
THREE.Vector2.prototype = {
constructor: THREE.Vector2,
set: function ( x, y ) {
this.x = x;
this.y = y;
return this;
},
copy: function ( v ) {
this.x = v.x;
this.y = v.y;
return this;
},
...... // 更多的函數
};
函數set(x,y)用以指定向量的值，調用者本身的x，y值被影響了，而該方法本身又返回調用者本身，這種情況很常見，以下不再說明。通過文字能夠表述清楚功能的函數不再引用源代碼，這一點以下也不再說明。
函數copy(v)用來將向量v復制進調用者。
函數add(a,b)和函數sub(a,b)分別表示對向量a，b相加和相減。
函數addSelf(v)和subSelf(v)分別表示對調用者本身加上或減去向量v。
函數multiplyScale(s)和divideScale(s)分別表示對調用者本身乘以或除以s。
函數lerpSelf(v,alpha)將調用者向v所指的方向旋轉alpha，當alpha為1時，調用者最終等于v，而當alpha=0時，調用者還等于原來。
代碼如下:
lerpSelf: function ( v, alpha ) {
this.x += ( v.x - this.x ) * alpha;
this.y += ( v.y - this.y ) * alpha;
return this;
},
函數negate()對調用者取反。
函數dot(v)返回float類型的調用者和向量v的點乘。
函數lengthSq()和函數length()返回float類型的調用者長度平方或長度。
函數normalize()將調用者本身歸一化。
函數distanceToSquared(v)和distanceTo(v)將返回調用者和向量v的距離。這里的距離其實是兩向量起點都在原點時，終點之間的距離，也就是向量this-v的長度。
函數setLength(s)將向量的長度縮放至為s，方向不變。
函數equals(v)判斷調用者與向量v的值是否相同。
函數isZero()判斷調用者是否是零向量。
函數clone()返回一個與調用者值一樣的新向量，相當于將其復制出去，注意與copy(v)的區別。
Core::Vector3
該構造函數創建一個表示三維向量的對象
代碼如下:
THREE.Vector3 = function ( x, y, z ) {
this.x = x || 0;
this.y = y || 0;
this.z = z || 0;
};
三維向量和二維向量有許多共通之處，比如set，add，dot，length，clone等，此處盡數略去，只記錄三維向量比二維向量多出的部分函數。
