如何更新webgl-wireframes库适配最新版Three.js解决报错

触发报错说明 #

• 未捕获类型错误：THREE.Geometry 不是构造函数（新版Three.js已完全移除旧版Geometry类）
• BufferAttribute.setArray方法已被移除（新版Three.js要求通过BufferGeometry.setAttribute绑定自定义缓冲区属性）

可直接替换的实现代码 #

function createGeometry (edgeRemoval, x_divisions, y_divisions) {
  // 释放旧几何体占用的资源
  if (mesh.geometry) mesh.geometry.dispose();

  // 生成平面几何体并转换为非索引格式，替代旧版THREE.Geometry逻辑
  geometry = new THREE.PlaneBufferGeometry(3, 3, x_divisions, y_divisions)
  geometry = geometry.toNonIndexed();
  
  const pos = geometry.attributes.position
  const count = pos.length / 3

  let bary = []
  const removeEdge = edgeRemoval
  
  // 生成三角形重心坐标数组，用于线框渲染的边判断
  for (let i = 0; i < count; i++){
    const even = i % 2 === 0
    const Q = removeEdge ? 1 : 0 
    if (even) {
      bary.push(0, 0, 1,        
                0, 1, 0, 
                1, 0, Q )
    } else {
      bary.push(0, 1, 0,
                0, 0, 1,
                1, 0, Q 
                )
    }
  }

  bary = new Float32Array(bary)

  // 绑定自定义barycentric属性，替代已移除的setArray方法
  geometry.setAttribute(
    "barycentric",
    new THREE.BufferAttribute(bary, 3)
  )

  // 将处理好的几何体与材质绑定到网格对象
  mesh.geometry = geometry;
  mesh.material = material;
}

关键调整点 #

• 直接使用BufferGeometry体系的PlaneBufferGeometry生成几何体，彻底替代已废弃的THREE.Geometry构造逻辑
• 自定义属性缓冲区统一通过setAttribute方法绑定，符合新版Three.js的API规范

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