Three.js克隆.clone()和復制.copy()

Three.js克隆.clone()和復制.copy()

你查看Threejs的文檔可以發現Threejs的很多類都具有克隆.clone()和復制.copy()方法,比如網格模型Mesh、幾何體Geometry、三維向量Vector3...

個人WebGL/Three.js技術博客

.copy()方法簡單的說就是復制一個對象的屬性值賦值給給另一個對象對應的屬性。克隆方法.clone()是相當于新建一個對象,然后復制原對象的屬性值賦值給新的對象對應屬性,也就是說通過克隆方法.clone()創建一個和原來對象完全一樣的對象。

如果你想了解一個threejs對象的克隆或復制方法,除了查看文檔以外,最好的方式就是查看threejs官方包src目錄下的源碼。

幾何體克隆.clone()

下面的代碼利用已有的立方體幾何體對象執行克隆方法.clone()返回一個新的幾何體對象,返回的的新的幾何體對象包含原來的幾何體頂點數據、頂點索引數居、UV坐標數據, 然后利用兩個幾何體分別創建一個網格模型。

var box=new THREE.BoxGeometry(10,10,10);
var box2 = box.clone();//克隆幾何體
box.translate(20,0,0);//平移原幾何體  新克隆的幾何體不受影響
var material=new THREE.MeshLambertMaterial({color:0x0000ff});//材質對象—藍色
var material2=new THREE.MeshLambertMaterial({color:0xff0000});//材質對象—紅色
var mesh=new THREE.Mesh(box,material);
var mesh2=new THREE.Mesh(box2,material2);

幾何體復制.copy()

執行語句geometry2.copy(geometry1);,幾何體geometry1的頂點相關數據會替換幾何體geometry2的頂點相關數據。

var box=new THREE.BoxGeometry(10,10,10);//創建一個立方體幾何對象
var sphere=new THREE.SphereGeometry(10,40,40);//創建一個球體幾何對象
box.copy(sphere);//球體數據復制到box幾何體,替換box原來的頂點數據
var material=new THREE.MeshLambertMaterial({color:0x0000ff});//材質對象—藍色
var mesh=new THREE.Mesh(box,material);//網格模型對象
scene.add(mesh);//網格模型添加到場景中

三維向量克隆和復制

// 創建一個三維向量v1,xyz分量分別為1,3,6
var v1 = new THREE.Vector3(1,3,6)
// 克隆v1返回一個新的三維向量v2,v2的xyz分量和v1一樣
var v2 = v1.clone()
// 創建一個三維向量v1,xyz分量分別為1,3,6
var v1 = new THREE.Vector3(1,3,6)
// 創建一個三維向量v2,xyz分量分別為5,7,8
var v2 = new THREE.Vector3(5,7,8)
// 通過復制方法可以復制v1的xyz分量的屬性值賦值給v2的xyz三個分量
// 執行完復制后,v2的xyz分量值變為1,3,6
v2.copy(v1);

網格模型克隆.clone()

網格模型執行.clone()方法克隆的時候,會新建一個網格模型對象Mesh,不過兩個網格模型的幾何體和材質對象是共享的。

// 網格模型Mesh的源碼,查看源碼你可以看到克隆網格模型的時候,幾何體和材質是共享的
clone: function () {
  return new this.constructor( this.geometry, this.material ).copy( this );
}

網格模型mesh執行方法.clone()返回一個網格模型mesh2,平移網格模型mesh,網格模型mesh2并不受影響,如果在代碼中插入語句box.scale(1.5,1.5,1.5);, 你會發現兩個網格模型的尺寸都會變化,這很好理解,克隆網格模型的時候,幾何體數據并沒有克隆,兩個網格模型共用一個幾何體對象的頂點相關數據。

var box=new THREE.BoxGeometry(10,10,10);//創建一個立方體幾何對象
var material=new THREE.MeshLambertMaterial({color:0x0000ff});//材質對象
var mesh=new THREE.Mesh(box,material);//網格模型對象
var mesh2 = mesh.clone();//克隆網格模型
mesh.translateX(20);//網格模型mesh平移
box.scale(1.5,1.5,1.5);//幾何體縮放
scene.add(mesh);//網格模型添加到場景中
scene.add(mesh2);//網格模型添加到場景中
box.scale(1.5,1.5,1.5);//幾何體縮放
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,505評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,556評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,463評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,009評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,778評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,218評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,281評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,436評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,969評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,795評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,993評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,537評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,229評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,659評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,917評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,687評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,990評論 2 374

推薦閱讀更多精彩內容