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