自定义BufferGeometry的重新渲染在react three光纤中崩溃

Question

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

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

当我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}
/>
</>
);
}

Answer 1

这并不是三根纤维的实际用途。如果您想绘制一个圆锥体，然后让用户动态地更改它，请声明性地进行操作。

类似的东西。。。

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'),
)

使用所需的任何几何体，而不是长方体。传递您希望用户能够作为等效属性发出警报的参数。当它们更改时，项目将重新渲染。