我正在尝试在 React 中使用 Threejs。 我的代码中遗漏了什么？

Question

I tried to convert a project from vanilla Three.js to React.

here is the project, https://codepen.io/Mamboleoo/pen/rNmRqeK

and this is my code

codesandbox: https://codesandbox.io/s/peaceful-field-i1ft30?file=/src/surfaceSampling.jsx

const pos = [];
const cols = [];

const Sampler = ({ dotCount, setDotCount }) => {
  /**
   * animations
   */
  useFrame(({ clock }) => {});

  /**
   * options
   */
  const palette = [
    new THREE.Color("#FAAD80"),
    new THREE.Color("#FF6767"),
    new THREE.Color("#FF3D68"),
    new THREE.Color("#A73489"),
  ];

  const tempPosition = new Vector3();

  const colorMap = useLoader(
    TextureLoader,
    "https://assets.codepen.io/127738/dotTexture.png"
  );

  /**
   * whale
   */
  const whaleMaterials = new THREE.MeshBasicMaterial({
    wireframe: true,
    color: 0x000000,
    transparent: true,
    opacity: 0.05,
  });
  const obj = useLoader(OBJLoader, "/textures/whale/Mesh_Whale.obj");
  obj.children[0].material = whaleMaterials;

  const samplerWhale = new MeshSurfaceSampler(obj.children[0]);
  samplerWhale.build();

  //   const cols = [];

  const [positions, colors] = useMemo(() => {
    samplerWhale.sample(tempPosition);
    pos.push(tempPosition.x, tempPosition.y, tempPosition.z);
    const randomColor = palette[Math.floor(Math.random() * palette.length)];
    cols.push(randomColor.r, randomColor.g, randomColor.b, 1);

    return [new Float32Array(pos), new Float32Array(cols)];
  }, [dotCount]);

  useEffect(() => {
    if (obj === "undefined") return;

    const t = setInterval(() => {
      if (dotCount < 100) {
        setDotCount((prev) => prev + 1);
      }
    }, 100);

    return () => clearTimeout(t);
  }, []);

  return (
    <group>
      <primitive
        object={obj}
        wireframe={true}
        color={0x000000}
        transparent={true}
        opacity={0.05}
      />
      <points>
        <bufferGeometry attach="geometry">
          <bufferAttribute
            attach={"attributes-position"}
            args={[positions, 3]}
          />
          <bufferAttribute attach={"attributes-color"} args={[colors, 4]} />
        </bufferGeometry>
        <pointsMaterial
          attach="material"
          size={1}
          alphaTest={0.2}
          map={colorMap}
          vertexColors={true}
        />
      </points>
    </group>
  );
};

I made it like the example code. However, every time a point shows up, the Sampler component re-renders.

how could I make it better?

and also,

const SurfaceSampling = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  const [dotCount, setDotCount] = useState(20);

  useEffect(() => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  }, []);

  return (
    <StyledTHREEContainer windowSize={windowSize}>
      <Canvas
        camera={{
          fov: 75,
          near: 0.1,
          far: 1000,
          aspect: window.innerWidth / window.innerHeight,
          position: [0, 100, 230],
        }}
        gl={{ antialias: false }}
      >
        <OrbitControls />
        <Suspense fallback={<Loader />}>
          <Sampler dotCount={dotCount} setDotCount={setDotCount} />
        </Suspense>
      </Canvas>
    </StyledTHREEContainer>
  );
};

why there is an error in Suspense?

the error is

Cannot update a component (`Loader`) while rendering a different component (`Sampler`). To locate the bad setState() call inside `Sampler`, follow the stack trace as described in

Answer 1

State or props changes trigger re-renders in React. To avoid updating state in your example, you could try using a ref instead of state and calling the function that adds entries to "pos" and "cols" array and use them instead of "positions" and "colors".

In SurfaceSampling:

const dotCount = useRef(20);
const setDotCount = (count) => { dotCount.current = count };

And in Sampler:

 const addDot = () => { samplerWhale.sample(tempPosition); pos.push(tempPosition.x, tempPosition.y, tempPosition.z); const randomColor = palette[Math.floor(Math.random() * palette.length)]; cols.push(randomColor.r, randomColor.g, randomColor.b, 1); } useEffect(() => { if (obj === "undefined") return; const t = setInterval(() => { if (dotCount.current < 100) { setDotCount(dotCount.current + 1); addDot(); } }, 100); return () => clearTimeout(t); }, []);