THREE.BufferAttribute: .setArray 已被删除使用 BufferGeometry .setAttribute unindexBufferGeometry

问题描述

非常感谢您帮助将 webgl-wireframes 库代码更新到 Threejs 的最新版本。

此函数导致以下错误

未捕获的类型错误：THREE.Geometry 不是构造函数

THREE.BufferAttribute: .setArray 已被移除。使用缓冲区几何 .setAttribute 替换/调整属性缓冲区的大小

具有实现的库：https://github.com/mattdesl/webgl-wireframes。

感谢 Mugen87，这段代码现在对我有用，代替了原始库的辅助函数。

function createGeometry ( edgeRemoval,x_divisions,y_divisions) {

  if (mesh.geometry) mesh.geometry.dispose();

  geometry = new THREE.PlaneBufferGeometry(3,3,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,1,Q )
    } else {
      bary.push(0,Q 
                )
    }
            
  }

  bary = new Float32Array(bary)

  geometry.setAttribute(
    "barycentric",new THREE.BufferAttribute(bary,3)
    
  )

  mesh.geometry = geometry;
  mesh.material = material;
}

解决方法

webgl-wireframes 需要非索引几何，因此可以为线框效果计算重心坐标。因此，该项目开发了辅助函数 unindexBufferGeometry()。

使用最新版本的 three.js (r128)，库可以使用不会引发上述错误的 BufferGeometry.toNonIndexed()。所以这个 line 应该是：

geometry = geometry.toNonIndexed();

请注意，setArray() 已被删除，因为可以使用此方法调整缓冲区属性的大小。由于缓冲区属性被认为具有固定大小（出于性能原因），因此不再支持此工作流。因此，如果您想调整缓冲区数据的大小，请使用新的缓冲区属性创建一个新几何体。