WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 Three.js免费视频教程

Three.js边界线框EdgesGeometry

网格模型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取代。

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号