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

Question

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

这个函数会导致以下错误

Uncaught TypeError: THREE.Geometry is not a constructor

THREE.BufferAttribute: .setArray has been removed. Use BufferGeometry .setAttribute to replace/resize attribute buffers

带有实现的库: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, 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)

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

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

Answer 1

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

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

geometry = geometry.toNonIndexed();

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