Three.js 在react three fiber中重新渲染自定义缓冲区几何体崩溃

我有一个react三纤应用程序，可以渲染自定义缓冲几何体。 在前端，我得到了一些用户输入，用于设置高度、半径等参数。 然后我通过post请求将这些数据发送到服务器，服务器返回坐标和法线数组。 一经要求，一切正常。 但是，例如，当用户稍微改变高度时，应用程序会崩溃：

[.WebGL-0000704C00336700] GL_INVALID_OPERATION: Vertex buffer is not big enough for the draw call

当I

console.log

这些新的数据数组时，它们与预期的一样。 显然，我的React实现有问题

守则如下：

function App() {
  const [coneData, setConeData] = useState({});
  const [height, setHeight] = useState(5);
  const [radius, setRadius] = useState(3);
  const [segments, setSegments] = useState(3);

  const sendConeParams = useCallback(async () => {
    const config = {
      headers: {
        "Content-Type": "application/json",
      },
    };
    const { data } = await axios.post(
      `/api`,
      { height, radius, segments },
      config
    );
    setConeData(data);
  }, [height, radius, segments]);

  useEffect(() => {
    sendConeParams();
  }, [sendConeParams]);

  return (
    <>
      <div id="canvas-container">
        <Canvas>
          <ambientLight intensity={0.5} />
          <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
          <pointLight position={[-10, -10, -10]} />
          {coneData.conePositions && coneData.coneNormals ? (
            <Cone
              position={[0, 0, 0]}
              triangulation={coneData.conePositions}
              normals={coneData.coneNormals}
            />
          ) : (
            ""
          )}

          <OrbitControls />
        </Canvas>
      </div>
      <Controls
        height={height}
        radius={radius}
        segments={segments}
        setHeight={setHeight}
        setRadius={setRadius}
        setSegments={setSegments}
      />
    </>
  );
}

函数应用程序（）{
const[coneData，setConeData]=useState（{}）；
const[height，setHeight]=使用状态（5）；
const[radius，setRadius]=useState（3）；
常量[段，集合段]=使用状态（3）；
const sendConeParams=useCallback（异步（）=>{
常量配置={
标题：{
“内容类型”：“应用程序/json”，
},
};
const{data}=wait axios.post(
`/api`，
{高度、半径、分段}，
配置
);
setConeData（数据）；
}，[高度、半径、分段]；
useffect（（）=>{
sendConeParams（）；
}，[SendConeparms]）；
返回(
{coneData.conePositions&&coneData.connormals(
) : (
""
)}
);
}

这并不是react three光纤的实际用途。如果您想绘制一个圆锥体，然后让用户对其进行动态更改，请以声明方式进行更改

类似的东西

import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas } from '@react-three/fiber'

function Box(props) {

    <mesh
      {...props}
      ref={mesh}
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

ReactDOM.render(
  <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>,
  document.getElementById('root'),
)

从“react dom”导入ReactDOM
从“React”导入React，{useRef，useState}
从'@react three/fiber'导入{Canvas}
功能盒（道具）{
谢谢你的回答，Joshua。是的，这可能是在react three fiber中实现这一点的正确方法。当我尝试解决这个问题时，我将几何图形作为函数道具传递给了圆锥体。我还实现了useMemo，以提高性能。你可以在这里看到最终的项目：