加载大量 .obj 三纤维和 React 时出现问题

Question

我正在尝试在三纤维和反应（@react-三/纤维）中创建一个由六边形组成的星球。我设法生成了 N 个六边形，每个六边形存储在 React 应用程序内的文件夹（/src 文件夹中）中的一个单独的 .obj 文件（当前名称为 0 到 4001）中。我像这样加载它们：

const obj = useLoader(OBJLoader, require('./planetParts/' + fileID + '.obj'));

    const geometry = useMemo(() => {
        let g;
        obj.traverse((c) => {
            if (c.type === "Mesh")
                g = c.geometry;
        });
        return g;
    }, [obj]);

const edges = useMemo(() => new THREE.EdgesGeometry(geometry, 15), [geometry])

    const color = isOwnedByMe ? myLandColor() : isOwnedByOther ? getOwnedColor() : getNotOwnedColor();

    return (
        <group>

            <mesh
                ref={ref}
                geometry={geometry}
                onClick={() => selectPlot(fileID)}
                onPointerOver={() => setIsHovered(true)}
                onPointerOut={() => setIsHovered(false)}
            >
                <meshBasicMaterial
                    color={!isHovered ? color : getHoverColor()}
                    opacity={!isHovered ? 0.05 : 0.3}
                    // opacity={1}
                    transparent={true}
                    toneMapped={false}
                />
            </mesh>

            <lineSegments geometry={edges} renderOrder={1}>
                <lineBasicMaterial
                    color={isOwnedByMe ? myLandColor() : new THREE.Color('rgb(0,0,0)')}
                    opacity={isOwnedByMe ? getOwnOpacityLinesHexagon() : getOpacityLinesHexagons()}
                    transparent={true}
                />
            </lineSegments>
        </group>
    );

我在 chrome 浏览器上看到了奇怪的行为。当我加载六边形时，有时会收到有关资源不足的错误 (net::ERR_INSUFFICIENT_RESOURCES)，然后出现有关无法加载某些特定 .obj 文件（从 2700+ 到 4000）的错误。

我认为这是我加载的大量文件的原因。因此，我将它们分成 500 个块，如下面的代码，但仍然出现相同的错误。有人可以帮助我提供一种机制或解决方案来加载这么多文件，也许是异步的吗？在 Firefox 和 Safari 上，我没有看到同样的问题。它们按照预期完美加载。

块的代码：

const chunk1 = useRef(<ChunkHexagons startFrom={0} endAt={501} />);
const chunk2 = useRef(<ChunkHexagons startFrom={501} endAt={1001} />);
const chunk3 = useRef(<ChunkHexagons startFrom={1001} endAt={1501} />);
const chunk4 = useRef(<ChunkHexagons startFrom={1501} endAt={2001} />);
const chunk5 = useRef(<ChunkHexagons startFrom={2001} endAt={2501} />);
const chunk6 = useRef(<ChunkHexagons startFrom={2501} endAt={3001} />);
const chunk7 = useRef(<ChunkHexagons startFrom={3001} endAt={3501} />);
const chunk8 = useRef(<ChunkHexagons startFrom={3501} endAt={4001} />);
const chunk9 = useRef(<ChunkHexagons startFrom={4000} endAt={tilesSize()} />);

return (
    <Suspense fallback={null}>
        <group ref={ref}>
            {chunk1.current}
            {chunk2.current}
            {chunk3.current}
            {chunk4.current}
            {chunk5.current}
            {chunk6.current}
            {chunk7.current}
            {chunk8.current}
            {chunk9.current}
        </group>
    </Suspense>
);