Three.js 边界线框 EdgesGeometry - 文章教程

Three.js 边界线框 EdgesGeometry

发布于 2021-07-20 字数 2495 浏览 819 评论 0

网格模型 Mesh 材质的.wireframe属性设置为 true,网格模型会显示为线框模式,网格模型的每一个三角形会通过 Threejs 线模型 Line 绘制出来。有时候并不希望通过 .wireframe=true 显示网格三角形的每一个边线,比如一个立方体每个面有两个三角形的话,设置 .wireframe=true 的时候,中线会有一条直线,在这种情况下可以通过几何体 EdgesGeometry 类来实现不显示立方体一个面的中间斜线。

EdgesGeometry 几何体本质上就是按照一定的算法重新组织已有几何体的顶点数据,,然后通过线模型 LineSegments 绘制出来 EdgesGeometry 构造的几何体。

长方体外部线框

下面的代码创建了一个立方体网格模型,同时通过 THREE.EdgesGeometryLineSegments 绘制出来该立方体的外轮廓线框。

var box = new THREE.BoxGeometry(30, 30, 30);
var boxMaterial = new THREE.MeshPhongMaterial({
  color: 0xffff00,
});
// 立方体网格模型
var boxMesh = new THREE.Mesh(box, boxMaterial);
// 立方体几何体box作为EdgesGeometry参数创建一个新的几何体
var edges = new THREE.EdgesGeometry(box);
// 立方体线框,不显示中间的斜线
var edgesMaterial = new THREE.LineBasicMaterial({
  color: 0xffffff
})
var line = new THREE.LineSegments(edges,edgesMaterial);
// 网格模型和网格模型对应的轮廓线框插入到场景中
scene.add(boxMesh,line);

圆柱外部线框代码

和上面立方体的代码一样,可以复制到.html文件体验测试下EdgesGeometry的功能。你可以通过.wireframe属性开启,来比较.wireframe属性显示效果和EdgesGeometry的显示效果有什么不同。
可以看到效果,圆柱两个底面是平面,只显示外部圆形轮廓,内部的三角形边线是不显示的,对于曲面圆柱面,两个相邻三角形中间边线是不显示的。

var cylinder = new THREE.CylinderGeometry(15, 15, 100, 40);
var cylinderMaterial = new THREE.MeshPhongMaterial({
  color: 0x00ffff,
  // wireframe:true,
}); //材质对象
var cylinderMesh = new THREE.Mesh(cylinder, cylinderMaterial);
// cylinder作为EdgesGeometry的参数创建一个新的几何体
var edges3 = new THREE.EdgesGeometry(cylinder);
var edgesMaterial = new THREE.LineBasicMaterial({
  color: 0xffffff
})
var line3 = new THREE.LineSegments(edges3,edgesMaterial);
scene.add(cylinderMesh,line3);

EdgesHelper

EdgesHelper 是 Three.js 旧版本的一个类,现在已经被一个几何体类 EdgesGeometry 取代。

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

发布评论

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

支持 Markdown 语法,需要帮助?

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

关于作者

瑾兮

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

3 文章
2 评论
15471 人气
更多

推荐作者

1638627670

文章 0 评论 0

jojo

文章 0 评论 1

qq_4prTag

文章 0 评论 0

18582485742

文章 0 评论 0

子英

文章 0 评论 0