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

推薦：將NSDT場景編輯器加入你的3D工具鏈

其他系列工具：NSDT簡石數(shù)字孿生

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

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()表示返回一個和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屬性值是數(shù)字，也就是說是基本類型的數(shù)據(jù)，對于網(wǎng)格模型而言，網(wǎng)格模型對象的幾何體屬性mesh.geometry和材質(zhì)屬性mesh.material的屬性值都是對象的索引值。

var box=new THREE.BoxGeometry(10,10,10);//創(chuàng)建一個立方體幾何對象
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)格模型添加到場景中

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

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

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

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

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

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

下一篇：Three.js教程：常見光源類型 (mvrlink.com)