如何在A-FRAME中创建正弦曲线？附控制点球体报错解决

我目前只会通过连接多个线段的方式绘制线条，示例代码如下：

<a-entity line="start: 0 1 0; end: 2 0 -5; color: green"
      line__2="start: 2 0 -5; end: 0 4 -3; color: green"
      line__3="start: 0 4 -3; end: 4 2 2; color: green"
      ...
      line__N="start: Xn-1 Yn-1 Zn-1; end: Xn Yn Zn; color: green"
></a-entity>

想请教：是否可以像SVG那样，通过特定规则直接创建曲线？

编辑补充 #

我已经实现了曲线绘制，但添加控制点球体时场景加载报错。

报错代码如下：

controlPoints.forEach((point, index) => {
    const sphere = document.createElement("a-sphere");
    sphere.setAttribute("position", `${point.x} ${point.y} ${point.z}`);
    sphere.setAttribute("radius", "0.2");
    sphere.setAttribute("color", "red");
    sphere.setAttribute("id", `sphere${index}`);
    controlPointsEntity.appendChild(sphere);
});
console.log("everything is ok");

报错信息：

"%ccore:a-node:error %cFailure loading node: %c " "color: red" "color: inherit" "color: red" 

经排查，问题源于Three.js与A-Frame版本不兼容，现已解决。

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