three.js 绘制小于180度的扇形会出现图形:
56.png
但是, 我们想要的图形可能是这样的:
57.png
所以我们需要, 封装一个绘制任意角度的扇形方法

1. 代码

/**
 * 绘制扇形shape
 */
function addFanShape (options, segments) {
  segments = segments || 120
  let shape = new THREE.Shape()
  shape.arc(0, 0, options.radius, options.startAngle, options.endAngle)
  let points = shape.getPoints(segments)
  points.push(new THREE.Vector2(0, 0))
  let shape2 = new THREE.Shape(points)
  let geometry = new THREE.ShapeGeometry(shape2, 64)
  let material = new THREE.MeshLambertMaterial({
    color: options.color,
    transparent: options.transparent,
    opacity: options.opacity,
    side: options.side
  })
  let mesh = new THREE.Mesh(geometry, material)
  return mesh
}

2. 核心代码说明

58.png

  • 这样就能绘制出任意角度的扇形了