在 React-Three-Fiber 中渲染索引缓冲区几何图形

Question

我目前正在尝试从https://thirdjs.org/examples/?q=buffer#webgl_buffergeometry_indexed获取在 React-Three-Fiber 环境中工作的示例。

我目前在代码中发现了几个问题。

首先，特别是在 Chrome 中，我反复收到以下警告：

[.WebGL-0x26d30384f700] GL_INVALID_ENUM: Enum is not currently supported.

此外，我目前看不到任何颜色应用于网格。

这是我迄今为止正在工作的代码：

[.WebGL-0x26d30384f700] GL_INVALID_ENUM: Enum is not currently supported.

Three.js 的示例代码：https://github.com/mrdoob/ Three.js/blob/master/examples/webgl_buffergeometry_indexed.html

Answer 1

终于解决了这个问题。主要问题是我需要将位置、颜色和法线数组转换为 Float32Array()，并将索引转换为 Uint32Array()。

例如，对于索引数组，以下内容对我有用：

const indices = useMemo(() => {
    const indicesArr = [];

    // generate indices (data for element array buffer)

    for (let i = 0; i < segments; i++) {
      for (let j = 0; j < segments; j++) {
        const a = i * (segments + 1) + (j + 1);
        const b = i * (segments + 1) + j;
        const c = (i + 1) * (segments + 1) + j;
        const d = (i + 1) * (segments + 1) + (j + 1);

        // generate two faces (triangles) per iteration

        indicesArr.push(a, b, d); // face one
        indicesArr.push(b, c, d); // face two
      }
    }

    return new Uint32Array(indicesArr);
  }, []);