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);//幾何體縮放