threejs 绘制圆环效果

threejs yekong

vue 可视化数据大屏 智慧校园综合指挥中心项目开发中,需要使用threejs绘制一个圆环轨道
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);
}
喜欢