javascript - 添加实例化网格反应纤维threejs

Question

我正在制作一个需要生成非常大地图的项目。我需要用树木或岩石生成很多地面块，有点类似于我的世界（每个块都必须是可点击的）。但是我在优化方面遇到了问题。我尝试减少渲染距离，添加雾，并使用三个实例（我正在使用threejs Fiber库进行反应）。谁能帮我解释实例如何工作并告诉我如何将它们应用到我的项目中？这是以正常方式生成它的代码，无需实例化。

import React, { Suspense } from "react";
import { useEffect, useState } from "react";
import Box from "./Box";
export default function Ground({
  layout,
  selectBox,
  selectedBox,
  position,
}) {
  const [boxArray, setBoxArray] = useState([]);
  const size = 20;
  let id = 0;
  useEffect(() => {
    const boxArrayCopy = [];
    for (let i = -(size / 2); i < size / 2; i++) {
      let hasTree = Math.random() > 0.99;
      for (let j = -(size / 2); j < size / 2; j++) {
        const layoutObject = layout.filter(
          (layoutObject) => layoutObject.x === i && layoutObject.y === j
        );
        const box = (
          <Box
            key={id}
            coords={{ x: j * 5, y: 0, z: i * 5 }}
            color={layoutObject.length > 0 ? layoutObject[0].color : 0x61892f}
            selectBox={selectBox}
            selectedBox={selectedBox}
            hasTree={hasTree}
            hasStone={Math.random() < 0.2}
            // just a random condition to add tree to box
          />
        );
        boxArrayCopy.push(box);
        id++;
        if (hasTree) hasTree = Math.random() > 0.5;
      }
      setBoxArray([...boxArrayCopy]);
    }
    console.log("GROUND DONE");
  }, []);
  return (
    <group position={position ?? [0, 0, 0]}>
      <Suspense fallback={null}>{boxArray}</Suspense>
    </group>
  );
}

标签： javascripthtmlreactjsthree.jsreact-three-fiber