Three.js 圆弧轨迹线 ArcCurve

Question

下面代码通过圆弧 ArcCurve 类创建一个圆弧对象，本质上就是生成一系列沿着圆周分布的顶点坐标，然后通过曲线的方法 .getPoints() 从圆弧线均匀获得沿着圆周曲线分布的顶点坐标，获得坐标后，赋值给几何体 Geometry 对象的顶点位置属性 .vertices。

.getPoints() 方法的介绍参考圆弧 ArcCurve 的基类 Curve。

var r = 400;// 圆弧线半径
// 圆弧曲线APITHREE.ArcCurve
var arc = new THREE.ArcCurve(0, 0, r, 0, 2 * Math.PI, true); // 圆心  半径  起始角度
// 参数50表示曲线分割成几部分
//返回一个vector2对象作为元素组成的数组,如果是3D样条曲面返回的元素是三维向量vector3
var points = arc.getPoints(50);
console.log('points', points);//控制台查看返回的顶点
var geometry = new THREE.Geometry();
// 设置几何体.vertices属性，插入顶点位置数据
points.forEach(function(v){
  geometry.vertices.push(new THREE.Vector3(v.x,v.y,0));
})
var material = new THREE.LineBasicMaterial({
  color: 0x222222
});
// LineLoop和Line不同，起始点闭合
var line = new THREE.LineLoop(geometry, material);
// var line = new THREE.Line(geometry, material);//起始点不闭合
line.rotateX(Math.PI / 2);//可以旋转圆弧线
scene.add(line);

也可以通过几何体 .setFromPoints() 方法将二维向量 Vector2 转化为三维向量 Vector3 赋值给几何体顶点属性 .vertices

// setFromPoints方法的本质：遍历points把vector2转变化vector3
geometry.setFromPoints(points);