如何在ThreeJS（优先react-three-fiber）中实现弯曲矩形展示两组列表关联

贝塞尔曲线是否可以支撑该需求 #

完全可以。你需要的左右列表关联平滑连线效果，用三阶贝塞尔曲线就能完美实现：

• 以左侧列表关联项的坐标作为曲线起点，右侧对应关联项的坐标作为曲线终点
• 两个控制点分别设置在起点右侧的水平偏移位置、终点左侧的水平偏移位置，就能得到参考图里自然的弯曲弧度
• 在react-three-fiber中可以直接调用THREE.CubicBezierCurve3生成曲线实例，再配合THREE.Line或者第三方MeshLine组件完成线条渲染，你已经实现的效果也验证了这个方案是可行的。

这类数据可视化的专业名称 #

这类专门用于展示两个独立集合之间元素关联关系的可视化形式，专业名称为二部图（Bipartite Graph，也叫二分图）可视化；如果后续需要给连线增加权重、展示流量分配逻辑，对应的就是简化版的桑基图（Sankey Diagram）。

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