react-three-fiber中给shapeGeometry圆角网格绑定事件触发报错如何解决？

问题根源 #

你代码的错误出在shapeGeometry组件的args传值不符合规范：

• react-three-fiber 中所有对应Three.js原生类的组件，args属性必须传入数组，数组元素会按顺序作为对应类构造函数的入参
• Three.js的ShapeGeometry构造函数第一个参数接收Shape实例或Shape实例数组，第二个参数为可选配置项。你直接把RoundedRect返回的Shape对象赋值给args，没有用数组包裹，导致框架实例化几何时参数解析错误，触发运行时报错。

修复方法 #

将Temp组件中的shapeGeometry声明修改为如下写法即可：

<shapeGeometry args={[RoundedRect(1,1,0.2)]}/>

如果需要调整圆角的平滑度，可以传入第二个配置参数指定曲线分段数，示例：

<shapeGeometry args={[RoundedRect(1,1,0.2), { curveSegments: 16 }]}/>

修改后交互事件可正常触发，不再抛出错误。

内容的提问来源于stack exchange，提问作者jc555