Three.js克隆.clone()
和復制.copy()
你查看Threejs的文檔可以發現Threejs的很多類都具有克隆.clone()
和復制.copy()
方法,比如網格模型Mesh
、幾何體Geometry
、三維向量Vector3
...
.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);//幾何體縮放