在反应中呈现100万盒-3/纤维

Question

我正在测试的渲染100万盒在反应-3/纤维。表演很慢。

function App() {
  const boxes = [];

  for (let i = 0; i < 1000; i++) {
    const x = Math.random();
    const y = Math.random();
    const z = Math.random();

    const box = (
      <mesh position={[x, y, z]}>
        <boxGeometry args={[0.01, 0.01, 0.01]} />
        <meshLambertMaterial color={"red"} />
      </mesh>
    );

    boxes.push(box);
  }

  return (
    <MBox style={{ height: "100vh", width: "100vw" }}>
      <Canvas camera={{ position: [10, 10, 10] }}>
        <pointLight position={[15, 15, 15]} />
        {boxes}
        <OrbitControls />
        <Stats />
      </Canvas>
    </MBox>
  );
}

​

​

渲染响应1000盒(60 FPS)。与10000盒，它下降到7 FPS与一点不足。浏览器有100000个盒子。

计算机专用GPU NVIDIA根本没有被使用。

​

有什么改进的办法吗？

Answer 1

得到了@Mugen87的建议。

function Boxes() {
  const meshRef = useRef<InstancedMesh>();
  const tempObject = new Object3D();

  useEffect(() => {
    if (meshRef == null) return;
    if (meshRef.current == null) return;

    let i = 0;
    for (let x = 0; x < 100; x++)
      for (let y = 0; y < 100; y++)
        for (let z = 0; z < 100; z++) {
          const id = i++;
          tempObject.position.set(x, y, z);
          tempObject.scale.set(1, 0.5, 1.5);
          tempObject.updateMatrix();
          meshRef.current.setMatrixAt(id, tempObject.matrix);
        }
    meshRef.current.instanceMatrix.needsUpdate = true;
  }, []);

  return (
    <instancedMesh ref={meshRef} args={[null as any, null as any, 1000000]}>
      <boxGeometry args={[0.1, 0.1, 0.1]}></boxGeometry>
      <meshBasicMaterial />
    </instancedMesh>
  );
}