three.js中如何移除WireframeGeometry生成的平面网格对角线

问题解答 #

可以从WireframeGeometry中删除单条指定线段。WireframeGeometry（包括你使用的WireframeGeometry2）本质是将原始几何体的所有边拆分为两两连续的顶点存储在顶点缓冲中，只需要过滤掉对应对角线的顶点对即可实现需求。

方案1：修改现有WireframeGeometry2移除对角线 #

直接对你现有代码生成的几何体做顶点过滤，适配你已经写好的粗线材质逻辑：

let matLine, wireframe
let geo = new THREE.PlaneGeometry( 80, 80, 80, 80 )
const geometry = new WireframeGeometry2( geo )

// 新增对角线过滤逻辑
const posArr = geometry.attributes.position.array
const validPos = []
const gridUnit = 80 / 80 // 单格尺寸=平面总尺寸/分段数
// 每6个数值对应一条线段的两个顶点坐标
for(let i = 0; i < posArr.length; i += 6) {
  const dx = Math.abs(posArr[i+3] - posArr[i])
  const dy = Math.abs(posArr[i+4] - posArr[i+1])
  // 排除x和y偏移都等于单格尺寸的对角线线段
  if(!(dx === gridUnit && dy === gridUnit)) {
    validPos.push(posArr[i], posArr[i+1], posArr[i+2], posArr[i+3], posArr[i+4], posArr[i+5])
  }
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(validPos, 3))
geometry.computeBoundingSphere()

matLine = new LineMaterial( {
  color: 0x4080ff,
  linewidth: 6,
  dashed: false
} )

wireframe = new Wireframe( geometry, matLine )
wireframe.computeLineDistances()
wireframe.scale.set( 1, 1, 1 )
wireframe.rotation.x = Math.PI / 2
scene.add( wireframe )

方案2：直接使用GridHelper生成无对角线网格（更推荐） #

THREE.js自带的GridHelper本身就是仅由正方形组成的网格，没有默认对角线，适配纯展示网格的场景性能更高，代码更简洁：

import { GridHelper } from 'three'
import { WireframeGeometry2, LineMaterial, Wireframe } from 'three/addons/lines/THREE.LineModule.js'

// 生成80单位大小、80分段的网格，默认平放在XZ平面无需额外旋转
const grid = new GridHelper(80, 80, 0x4080ff, 0x4080ff)
const geometry = new WireframeGeometry2(grid.geometry)

const matLine = new LineMaterial( {
  color: 0x4080ff,
  linewidth: 6,
  dashed: false
} )

const wireframe = new Wireframe( geometry, matLine )
wireframe.computeLineDistances()
scene.add(wireframe)

内容的提问来源于stack exchange，提问作者Tarjay