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