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);// 几何体缩放