Issues rendering mesh with indexed buffer geometry

[bryyytl]

Hi, I am currently trying to get the example from https://threejs.org/examples/?q=buffer#webgl_buffergeometry_indexed (Three.js code found https://github.com/mrdoob/three.js/blob/master/examples/webgl_buffergeometry_indexed.html) working within a React-Three-Fiber environment. There are several issues that I'm currently seeing within my code.

First, specifically in Chrome, I am repeatedly getting the following warning:

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

In addition, I cannot currently see the mesh being displayed in the scene.

Here is the code that I have working so far. I have also created a Sandbox here: https://codesandbox.io/s/modest-mendeleev-5k1bw. Any suggestions / feedback welcome.

import React, { useMemo, useRef } from "react";
import { Canvas } from "@react-three/fiber";
import { DoubleSide } from "three";

const Mesh = () => {
  const mesh = useRef();

  const size = 20;
  const segments = 10;

  const [colors, normals, positions] = useMemo(() => {
    const colorsArr = [];
    const normalsArr = [];
    const positionsArr = [];

    const halfSize = size / 2;
    const segmentSize = size / segments;

    // generate vertices, normals and color data for a simple grid geometry

    for (let i = 0; i <= segments; i++) {
      const y = i * segmentSize - halfSize;

      for (let j = 0; j <= segments; j++) {
        const x = j * segmentSize - halfSize;

        positionsArr.push(x, -y, 0);
        normalsArr.push(0, 0, 1);

        const r = x / size + 0.5;
        const g = y / size + 0.5;

        colorsArr.push(r, g, 1);
      }
    }

    return [colorsArr, normalsArr, positionsArr];
  }, []);

  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 indicesArr;
  }, []);

  return (
    <mesh ref={mesh} renderOrder={1}>
      <bufferGeometry attach="geometry">
        <bufferAttribute
          attach="index"
          array={indices}
          count={indices.length}
          itemSize={1}
        />
        <bufferAttribute
          attachObject={["attributes", "position"]}
          count={positions.length / 3}
          array={positions}
          itemSize={3}
        />
        <bufferAttribute
          attachObject={["attributes", "color"]}
          count={colors.length / 3}
          array={colors}
          itemSize={3}
        />
        <bufferAttribute
          attachObject={["attributes", "normal"]}
          count={normals.length / 3}
          array={normals}
          itemSize={3}
        />
      </bufferGeometry>
      <meshPhongMaterial attach="material" side={DoubleSide} vertexColors />
    </mesh>
  );
};

const App = () => {
  return (
    <Canvas
      camera={{
        fov: 27,
        near: 1,
        far: 3500
      }}
      position-z={64}
      style={{ height: "750px" }}
    >
      <color attach="background" args={["#050505"]} />
      <Mesh />
      <hemisphereLight />
    </Canvas>
  );
};

export default App;

[bryyytl]

Got this issue fixed finally. The main issue was that I needed to convert the position, color, and normals array to a Float32Array() and the index to a Uint32Array(). After putting a ref on the bufferGeometry, I put the following in a useEffect().

geometry.current.attributes.color.array = colors;
geometry.current.attributes.color.count = colors.length / 3;

geometry.current.index.array = new Uint32Array(indices);
geometry.current.index.count = indices.length;

geometry.current.attributes.position.array = new Float32Array(vertices);
geometry.current.attributes.position.count = vertices.length / 3;

geometry.current.attributes.normal.array = new Float32Array(normals);
geometry.current.attributes.normal.count = normals.length / 3;

[drcmda]

you could also just return floatarrays in the usememo