vue 可视化数据大屏 智慧校园综合指挥中心项目开发中,需要使用threejs绘制一个圆环轨道
使用
circle(type.R);
绘制方法
// 圆弧轨迹绘制函数
function circle(r) {
// ArcCurve创建一个圆弧曲线
var arc = new THREE.ArcCurve(0, 0, r, 0, 2 * Math.PI, true);
// 获取点数越多,圆弧越光滑
var points = arc.getPoints(100); //返回一个vector2对象作为元素组成的数组
// console.log('points', points);
var geometry = new THREE.BufferGeometry();
//setFromPoints方法的本质:遍历points把vector2转变化vector3
geometry.setFromPoints(points);
var material = new THREE.LineBasicMaterial({
color: 0x0f4984,
linewidth: 1
});
// THREE.Line
var line = new THREE.LineLoop(geometry, material); //起始点闭合
// 圆弧线默认在XOY平面上,绕x轴旋转到XOZ平面上
line.rotateX(Math.PI / 2);
scene.add(line);
}