Three.js 三维模型 复制、克隆 - 文章教程

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

发布于 2021-11-25 字数 3282 浏览 827 评论 0

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

复制一个三维模型有两种方式,一种方式是复制几何体对象,另一种方式是复制网格模型(点、线模型对象)。复制几何体对象本质上复制的是顶点数据,复制网格模型本质上是多次调用 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);//几何体缩放

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

夜无邪

这个人比较懒,什么都没有填写!

9 文章
3 评论
19057 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0