Three.js教程：對象克隆、復制

推薦：將NSDT場(chǎng)景編輯器加入你的3D工具鏈

其他系列工具：NSDT簡(jiǎn)石數字孿生

Threejs大多數對象都有克隆.clone()和復制.copy()兩個(gè)方法,點(diǎn)模型Points、線(xiàn)模型Line、網(wǎng)格網(wǎng)格模型Mesh一樣具有這兩個(gè)方法。

A.copy(B)表示B屬性的值賦值給A對應屬性。

var p1 = new THREE.Vector3(1.2,2.6,3.2);
var p2 = new THREE.Vector3(0.0,0.0,0.0);
p2.copy(p1)
// p2向量的xyz變?yōu)閜1的xyz值
console.log(p2);

N = M.clone()表示返回一個(gè)和M相同的對象賦值給N。

var p1 = new THREE.Vector3(1.2,2.6,3.2);
var p2 = p1.clone();
// p2對象和p1對象xyz屬性相同
console.log(p2);

網(wǎng)格模型復制克隆和三維向量基本邏輯是相同，但是注意三維向量Vector3的.x、.y、.z屬性值是數字，也就是說(shuō)是基本類(lèi)型的數據，對于網(wǎng)格模型而言，網(wǎng)格模型對象的幾何體屬性mesh.geometry和材質(zhì)屬性mesh.material的屬性值都是對象的索引值。

var box=new THREE.BoxGeometry(10,10,10);//創(chuàng  )建一個(gè)立方體幾何對象
var material=new THREE.MeshLambertMaterial({color:0x0000ff});//材質(zhì)對象


var mesh=new THREE.Mesh(box,material);//網(wǎng)格模型對象
var mesh2 = mesh.clone();//克隆網(wǎng)格模型
mesh.translateX(20);//網(wǎng)格模型mesh平移

scene.add(mesh,mesh2);//網(wǎng)格模型添加到場(chǎng)景中

縮放幾何體box,你可以發(fā)現上面代碼中的兩個(gè)網(wǎng)格模型的大小都發(fā)生了變化，因為網(wǎng)格模型克隆的時(shí)候，mesh對象的幾何體對象mesh.geometry屬性值是box對象的索引值，返回的新對象mesh2幾何體屬性mesh.geometry的值同樣是box對象的索引值。

box.scale(1.5,1.5,1.5);//幾何體縮放

通過(guò)本節課的學(xué)習，對Threejs不同對象的克隆.clone()和復制.copy()方法有一個(gè)大致印象即可。

實(shí)際開(kāi)發(fā)的時(shí)候，注意不同對象的復制或克隆方法可能稍有區別，使用的時(shí)候最好通過(guò)代碼測試，或者直接查看threejs源碼某個(gè)類(lèi)對.clone()和.copy()封裝，這樣更為直觀(guān)清楚。

幾何體克隆或復制和網(wǎng)格模型在屬性值深拷貝、淺拷貝方面有些不同，比如幾何體的頂點(diǎn)屬性Geometry.vertices，Geometry.vertices的屬性值是一個(gè)數組對象，但是復制或克隆的時(shí)候，不是獲得對象的索引值，而是深拷貝屬性的值，可以在threejs源碼Geometry.js全文檢索copy: function關(guān)鍵詞，找到該類(lèi)對copy方法的封裝細節。

上一篇：Three.js教程：模型對象旋轉平移縮放變換 (mvrlink.com)

下一篇：Three.js教程：常見(jiàn)光源類(lèi)型 (mvrlink.com)