BufferGeometry: WebGL warning: drawElementsInstanced: type: Invalid enum value INT

I am trying to construct meshes with data exported from VTU/STL files, so importing Points and Normals as Float32Arrays and Segments as Int32Array into threejs, and using these to create meshes using BufferGeometry. If I do so, I get the following error:
WebGL warning: drawElementsInstanced: type: Invalid enum value INT.

I guess that I am just using one of the attributes in a wrong way, but cannot figure out what exactly.

If it helps, I exported the geometry to JSON with the points in them, it’s just a simple box:
mesh.json (2.8 KB)

I am doing this in react (react-three-fiber), and my setup looks like this:

export interface MeshProps {
  points: Float32Array;
  segments: Int32Array;
  normals: Float32Array;
}

export default function Mesh({ points, segments, normals }: MeshProps) {
  const geometry = new THREE.BufferGeometry();

  geometry.setIndex(new THREE.Int32BufferAttribute(segments, 1));
  geometry.setAttribute("position", new THREE.Float32BufferAttribute(points, 3));
  geometry.setAttribute("normal", new THREE.Float32BufferAttribute(normals, 3));

  return (
    <mesh args={[geometry]}>
      <meshPhongMaterial side={THREE.DoubleSide} color="red" />
    </mesh>
  );
}

Hi!

Try
geometry.setIndex(new THREE.Uint32BufferAttribute(segments, 1));
or
geometry.setIndex(segments);
, as .setIndex() does next internally: three.js/src/core/BufferGeometry.js at 860af3c012915be534f8a5c37d745e2dff339e04 · mrdoob/three.js · GitHub

2 Likes