Three.js 三维模型 复制、克隆

Question

复制一个三维模型有两种方式，一种方式是复制几何体对象，另一种方式是复制网格模型（点、线模型对象）。复制几何体对象本质上复制的是顶点数据，复制网格模型本质上是多次调用 three.js 渲染方法 render，或者说多次调用 WebGL 的绘制函数引用同一组顶点数据，在GPU显存中生成多个几何体的像素值，最终显示在屏幕上,这里可以看出网格模型的复制并不是真正复制了数据，只是利用程序实现了两个三维模型的显示效果。

几何体克隆 .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);//克隆网格模型对象
scene.add(mesh);//网格模型添加到场景中
scene.add(mesh2);//克隆的网格模型添加到场景中

克隆的几何体和源几何体位置是相同，为了错开显示，对源几何体进行了平移，源几何体顶点数据变化为并不会影响拷贝得到的新几何体的顶点数据，这里可以看出这里的拷贝类似编程语言中常说的深拷贝，拷贝得到的新数据和旧数据不会相互影响。

几何体复制 .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);//球体数据复制到bos几何体
var material=new THREE.MeshLambertMaterial({color:0x0000ff});//材质对象—蓝色
var mesh=new THREE.Mesh(box,material);//网格模型对象
scene.add(mesh);//网格模型添加到场景中

克隆的几何体和源几何体位置是相同，为了错开显示，对源几何体进行了平移，源几何体顶点数据变化为并不会影响拷贝得到的新几何体的顶点数据，这里可以看出这里的拷贝类似编程语言中常说的深拷贝，拷贝得到的新数据和旧数据不会相互影响。

网格模型克隆 .clone()

网格模型和几何体一样具有克隆和复制方法，下面代码中网格模型 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);//几何体缩放