ThreeJS入门（045）：THREE.EdgesGeometry 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 045篇入门文章

THREE.EdgesGeometry 是 Three.js 中的一个类，用于从现有的几何体（如 THREE.Geometry 或 THREE.BufferGeometry）中提取边缘信息，以便能够渲染几何体的边缘线条。这对于创建带有轮廓线的效果特别有用，例如在卡通渲染、技术图纸或增强现实应用中。

构造函数

构造函数 new THREE.EdgesGeometry(geometry, thresholdAngle) 接受两个参数来定义边缘提取的行为。

参数说明

• geometry：源几何体，可以是任何 THREE.Geometry 或 THREE.BufferGeometry。
• thresholdAngle：阈值角度（单位为度），用于决定哪些边被视为边缘。如果相邻的两个面之间的夹角大于或等于这个阈值，则这条边将被视为边缘。默认值为 45 度。

示例

假设我们有一个立方体的几何体，我们可以使用 THREE.EdgesGeometry 来提取它的边缘线条。

const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const edges = new THREE.EdgesGeometry(boxGeometry);

// 创建线条材质
const lineMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff });

// 使用边缘几何体创建线条
const line = new THREE.LineSegments(edges, lineMaterial);

// 将线条添加到场景中
scene.add(line);

使用 THREE.EdgesGeometry

创建边缘几何体后，通常需要为它添加一个线条材质，并创建一个 THREE.Line 或 THREE.LineSegments 对象来将其添加到场景中。

示例

创建一个带有边缘线条的立方体：

// 创建立方体几何体
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);

// 创建漫反射材质
const meshMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });

// 创建立方体网格
const mesh = new THREE.Mesh(boxGeometry, meshMaterial);

// 创建边缘几何体
const edges = new THREE.EdgesGeometry(boxGeometry);

// 创建线条材质
const lineMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff });

// 使用边缘几何体创建线条
const line = new THREE.LineSegments(edges, lineMaterial);

// 将网格和线条添加到场景中
scene.add(mesh);
scene.add(line);

调整阈值角度

通过调整 thresholdAngle 参数，可以改变边缘识别的标准。较大的角度阈值会导致较少的边缘线条被识别出来，而较小的角度阈值则会产生更多的边缘线条。

const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const edges = new THREE.EdgesGeometry(boxGeometry, 30); // 阈值角度设为 30 度
const lineMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff });
const line = new THREE.LineSegments(edges, lineMaterial);
scene.add(line);

使用 THREE.EdgeUtils

在 Three.js 中，还有一个辅助工具 THREE.EdgeUtils，它提供了一些静态方法来帮助处理边缘几何体。例如，你可以使用 THREE.EdgeUtils.computeTangents() 来计算几何体的切线。

总结

THREE.EdgesGeometry 是一个非常有用的类，用于从现有的几何体中提取边缘线条。通过结合不同的材质和几何体，可以创建出带有轮廓线的效果，这对于某些类型的视觉风格非常有用。通过调整阈值角度，可以控制哪些边被视为边缘，从而影响最终渲染结果的外观。在实际应用中，可以根据需要调整参数来达到理想的效果。