Convert ThreeJS to React-three-fiber

[natsathorn]

Hi everyone,

I'm trying to convert the following code to react-three-fiber, however, it doesn't work.

Here is the code I have in ThreeJS, this is working fine.

const normals = [];

  const verticesWithFlippedY = data.vertices.map((v, i) => {
    // flip y coordinate
    if (i % 3 == 1) {
      normals.push(data.normal);
      return -v;
    }

    return v;
  });

  const geometry = new THREE.BufferGeometry();
  const vertices = new Float32Array(verticesWithFlippedY);
  const typedNormals = new Float32Array(normals);
  geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
  geometry.setAttribute("normal", new THREE.BufferAttribute(typedNormals, 3));
  geometry.setIndex(data.indexes);
  const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

Then I try to use this in React and decided to use react-three-fiber.
After the conversion, I cannot make it to work.
The data source is exactly the same. I'm so confused right now.
I was suspected that my attach="index" is not correct but I can't find much document about it.

const normals = [];

  const verticesWithFlippedY = data.vertices.map((v, i) => {
    // flip y coordinate
    if (i % 3 == 1) {
      normals.push(data.normal);
      return -v;
    }

    return v;
  });

  return (
    <mesh key={i}>
      <bufferGeometry attach="geometry">
        <bufferAttribute
          array={verticesWithFlippedY}
          attachObject={['attributes', 'position']}
          count={verticesWithFlippedY.length / 3}
          itemSize={3}
        />
        <bufferAttribute
          array={normals}
          attachObject={['attributes', 'normal']}
          count={normals.length / 3}
          itemSize={3}
        />
        <bufferAttribute
          array={data.indexes}
          attach="index"
          count={data.indexes.length}
          itemSize={1}
        />
      </bufferGeometry>
      <meshBasicMaterial attach="material" color={0xffffff} />
    </mesh>
  );

This is the error that appear on my console.
[.WebGL-0x7fdb8a8ada00]GL ERROR :GL_INVALID_ENUM : glDrawElements: type was GL_FLOAT

[drcmda]

i would recommend not going to crazy with things that are inherently imperative. it probably can be done but i wouldnt want to loose sleep over it, there are things in threejs that need to be driven by function calls and that's fine because react has hooks for that:

function Foo() {
  const ref = useRef()
  useLayoutEffect(() => {
    ...
    ref.current.setIndex(whatever)
  }, [])
  return <foo ref={ref} />

useLayoutEffect fires after the jsx has rendered, so the objects exist, but before it is committed and rendered out by threejs, so there's no flash of unstyled content or anything like that.

attach is geoing to be much easier btw #1912 v8 will be released in a few days (when react 18 comes out). but again, there may be cases where you call functions, and that's always a side effect (-> layout effect).