バックフェースカリング

/** 法線ベクトルの矢印の長さ。立方体の外へ十分に伸ばして、面から立つ向きを読みやすくする */
const NORMAL_LENGTH = 1.35

/** 矢印の軸の太さ（ピクセル）と、先端（円錐）の大きさ */
const LINE_WIDTH = 4
const ARROW_RADIUS = 0.09
const ARROW_HEIGHT = 0.28

/** なす角を示す扇の半径と分割数。法線ベクトルの矢印より内側に収める */
const SECTOR_RADIUS = 0.45
const SECTOR_SEGMENTS = 36

/** 面の不透明度。立体の内部を貫く視点方向ベクトルが透けて見える程度に薄くする */
const FACE_OPACITY = 0.5

/** 扇の不透明度。扇と法線ベクトルの矢印は同じ色なので、わずかに透かして見分けられるようにする */
const SECTOR_OPACITY = 0.72

/**
 * 半透明なものの描画順。数が小さいほど先に描かれ、あとから描いたものが上に重なる。
 * 稜線と矢印は不透明なので、半透明なものより先に描かれる。
 * 扇は既定の 0 のままなので面より先に描かれ、立体の内部に入り込んだ部分も面越しに透ける
 */
const FACE_ORDER = 1

/** ConeGeometry が既定で向いている方向 */
const CONE_UP = new Vector3(0, 1, 0)

// 始点から終点へ向かう矢印。表裏で色を変えるので、色をあとから差し替えられるようにする
const createArrow = (color: string) => {
  // 線の太さをピクセルで指定できるようにする。素の Line では太さが常に 1 px になる
  const shaftPositions = new Float32Array(6)
  const shaftGeometry = new LineSegmentsGeometry()
  const shaftMaterial = new LineMaterial({ color, alphaToCoverage: true })
  shaftMaterial.linewidth = LINE_WIDTH
  const shaft = new LineSegments2(shaftGeometry, shaftMaterial)

  const headGeometry = new ConeGeometry(ARROW_RADIUS, ARROW_HEIGHT, 16)
  const headMaterial = new MeshBasicMaterial({ color })
  const head = new Mesh(headGeometry, headMaterial)

  const group = new Group()
  group.add(shaft, head)

  const direction = new Vector3()
  const shaftEnd = new Vector3()

  return {
    object: group,
    setEnds: (from: Vector3, to: Vector3) => {
      direction.copy(to).sub(from).normalize()

      // 円錐の底面が線の先端に来るよう、矢印の高さのぶん手前で線を止める
      shaftEnd.copy(to).addScaledVector(direction, -ARROW_HEIGHT)
      shaftPositions.set([from.x, from.y, from.z, shaftEnd.x, shaftEnd.y, shaftEnd.z])
      shaftGeometry.setPositions(shaftPositions)

      // ConeGeometry の原点は円錐の中心なので、半分ぶん戻した位置に置く
      head.position.copy(to).addScaledVector(direction, -ARROW_HEIGHT / 2)
      head.quaternion.setFromUnitVectors(CONE_UP, direction)
    },
    setColor: (next: string) => {
      shaftMaterial.color.set(next)
      headMaterial.color.set(next)
    }
  }
}

// 2 つの向きがなす角を、塗りつぶした扇で示す。
// 角の大小がそのまま扇の広さになるので、鋭角か鈍角かを面積で読み取れる
const createSector = (color: string) => {
  // 要（かなめ）と弧の両端で 1 枚の三角形。それを分割数だけ並べて扇にする
  const position = new Float32BufferAttribute(new Float32Array(SECTOR_SEGMENTS * 3 * 3), 3)
  const geometry = new BufferGeometry().setAttribute("position", position)
  const material = new MeshBasicMaterial({
    color,
    side: DoubleSide,
    transparent: true,
    opacity: SECTOR_OPACITY,
    // 扇の縁は法線ベクトルの矢印と重なる。扇をわずかに奥へずらして z ファイティングを避ける
    polygonOffset: true,
    polygonOffsetFactor: 1,
    polygonOffsetUnits: 1
  })
  const mesh = new Mesh(geometry, material)

  const axis = new Vector3()
  const current = new Vector3()
  const next = new Vector3()

  return {
    object: mesh,
    // from・to は単位ベクトル。from を to まで回した範囲が扇になる
    setAngle: (center: Vector3, from: Vector3, to: Vector3) => {
      // 2 つの向きが張る平面に垂直な向きが回転軸
      axis.crossVectors(from, to).normalize()
      const angle = Math.acos(MathUtils.clamp(from.dot(to), -1, 1))

      for (let index = 0; index < SECTOR_SEGMENTS; index++) {
        current
          .copy(from)
          .applyAxisAngle(axis, (angle * index) / SECTOR_SEGMENTS)
          .multiplyScalar(SECTOR_RADIUS)
          .add(center)
        next
          .copy(from)
          .applyAxisAngle(axis, (angle * (index + 1)) / SECTOR_SEGMENTS)
          .multiplyScalar(SECTOR_RADIUS)
          .add(center)

        position.setXYZ(index * 3, center.x, center.y, center.z)
        position.setXYZ(index * 3 + 1, current.x, current.y, current.z)
        position.setXYZ(index * 3 + 2, next.x, next.y, next.z)
      }
      position.needsUpdate = true
    },
    setColor: (nextColor: string) => material.color.set(nextColor)
  }
}

// 面を囲む頂点から、面の中心と、外を向く法線ベクトル n を求める
const measureFace = (vertices: Vector3[]) => {
  const center = new Vector3()
  for (const vertex of vertices) center.add(vertex)
  center.divideScalar(vertices.length)

  // 隣り合う 2 辺の外積は面に垂直になる。頂点を外から見て反時計回りに並べてあるので、
  // 得られる向きは物体の外側、つまり面の表側を指す
  const normal = new Vector3()
    .subVectors(vertices[1], vertices[0])
    .cross(new Vector3().subVectors(vertices[2], vertices[1]))
    .normalize()

  return { center, normal }
}

// 立方体の 6 面を、外から見て反時計回りに並べた頂点として得る。先頭は +z の面
const faceVertices = createCubeFaces()

// 面ごとに 1 つの Mesh を作る。表裏で色を変え、外した面だけを消すため、面ごとに独立させる。
// 深度を書かない半透明にして、立体の内部を通るベクトルが透けて見えるようにする
const faces = faceVertices.map((vertices) => {
  const geometry = new BufferGeometry()
  geometry.setAttribute("position", new Float32BufferAttribute(createFacePositions(vertices), 3))
  const material = new MeshBasicMaterial({
    side: DoubleSide,
    transparent: true,
    opacity: FACE_OPACITY,
    depthWrite: false
  })
  const mesh = new Mesh(geometry, material)
  mesh.renderOrder = FACE_ORDER
  scene.add(mesh)

  return { ...measureFace(vertices), material, mesh }
})

// 面を外しても立方体の形が読めるよう、稜線は常に残す
const boxGeometry = new BoxGeometry(CUBE_HALF * 2, CUBE_HALF * 2, CUBE_HALF * 2)
const edgeGeometry = new EdgesGeometry(boxGeometry)
boxGeometry.dispose()
scene.add(new LineSegments(edgeGeometry, new LineBasicMaterial({ color: EDGE_COLOR })))

// 表裏を判定する視点。観察するカメラとは別の点で、6 面が表 3 枚・裏 3 枚に分かれる位置に固定する
const EYE = new Vector3(
  EYE_DISTANCE * Math.sin(EYE_AZIMUTH),
  EYE_HEIGHT,
  EYE_DISTANCE * Math.cos(EYE_AZIMUTH)
)

// 注目する 1 面にだけ、法線ベクトル n・視点方向ベクトル e・なす角の扇を添える
const normalArrow = createArrow(FRONT_ACCENT)
const eyeArrow = createArrow(EYE_COLOR)
const sector = createSector(FRONT_ACCENT)
scene.add(normalArrow.object, eyeArrow.object, sector.object)

const toEye = new Vector3()
for (const face of faces) {
  // 面から視点へ向かう視点方向ベクトル e
  toEye.subVectors(EYE, face.center)

  // n と e の内積。負なら、なす角が鈍角＝裏を向いた面
  const isBack = face.normal.dot(toEye) < 0

  face.material.color.set(isBack ? BACK_FACE_COLOR : FRONT_FACE_COLOR)
  // 裏面を外すと、裏を向いた面だけが消える
  face.mesh.visible = !(isBack && cullBackFaces)
}

// 注目する面のなす角。裏を向いた面では e が立体の内部を貫く
const target = faces[targetFace]
toEye.subVectors(EYE, target.center)
const accent = target.normal.dot(toEye) < 0 ? BACK_ACCENT : FRONT_ACCENT

const normalEnd = target.center.clone().addScaledVector(target.normal, NORMAL_LENGTH)
normalArrow.setEnds(target.center, normalEnd)
normalArrow.setColor(accent)

const eyeDirection = toEye.clone().normalize()
eyeArrow.setEnds(target.center, EYE)
sector.setAngle(target.center, target.normal, eyeDirection)
sector.setColor(accent)