摘要：可能有許多原因你想在里加入自訂義的線型，例如顯示線框幾何視覺化包圍箱或者其他你想帶給使用者的視覺回饋。下面是我傳寫的一個(gè)例子，他可以在選重構(gòu)件后在場景里用自定義線型描繪它的包圍箱，在線示例可以參考這里

這篇文章的原著是 Autodesk AND 的 Philippe Leefsma，以下以我簡稱。

可能有許多原因你想在 Viewer 里加入自訂義的線型，例如顯示線框（Wireframe）幾何、視覺化包圍箱（Bounding Box）或者其他你想帶給使用者的視覺回饋。基本上這有三種方式來做到這件事，讓我們來看看到底要怎么做，首先我們要先產(chǎn)生一個(gè)線型幾何，其代碼入下所示：

const geometry = new THREE.Geometry ()

geometry.vertices.push (new THREE.Vector3 ( 0,  0,  0))
geometry.vertices.push (new THREE.Vector3 (10, 10, 10))

var linesMaterial = new THREE.LineBasicMaterial ({
  color: new THREE.Color (0xFF0000),
  transparent: true,
  depthWrite: false,
  depthTest: true,
  linewidth: 10,
  opacity: 1.0
})

var lines = new THREE.Line (geometry,
  linesMaterial,
  THREE.LinePieces)

下一步我們來看看要怎么將這個(gè)線型加入到 Viewer 的場景里（scene）：

一、將線型加到 viewer.impl.scene：

//1 - 第一種方法
viewer.impl.scene.add (lines)
viewer.impl.invalidate (true)

但這個(gè)方法并不是一個(gè)靠譜的方法，因?yàn)樗荒茉?FireFox 里正常運(yùn)作，在我的 Chrome 上是沒有作用的。。。所以讓我們看看下一個(gè)方法。

二、將線型加到 viewer.impl.scene：

//2 - 第二種方法
viewer.impl.sceneAfter.add (lines)
viewer.impl.invalidate (true)

這個(gè)方法比前一個(gè)好多了，他可以在多個(gè)瀏覽器上正常執(zhí)行，但當(dāng)你透過修改了構(gòu)件的可視性后（執(zhí)行了孤立顯示或隱藏等動(dòng)作），所有的線型都會跟著構(gòu)件一起消失，我想這是應(yīng)該是 Viewer 內(nèi)部的著色器（Shader）和渲染（Rendering）設(shè)置造成的。

三、產(chǎn)生 Viewer Overlay 場景，并將線型加入 Overlay 場景：

//3 - 第三種方法
viewer.impl.createOverlayScene (
  "myOverlay", linesMaterial)

viewer.impl.addOverlay (
  "myOverlay", lines)

viewer.impl.invalidate (true)

經(jīng)測試這個(gè)方法非常的靠譜，他可以在多個(gè)瀏覽器上正確執(zhí)行，并且不受構(gòu)件可視性的影響。但你不一定要使用第三個(gè)方法，你可以根據(jù)你的需求選擇適合你應(yīng)用場景的方法。

下面是我傳寫的一個(gè)例子 Viewing.Extension.BoundingBox，他可以在選重構(gòu)件后在 Viewer 場景里用自定義線型描繪它的包圍箱，在線示例可以參考這里：

/////////////////////////////////////////////////////////////////
// BoundingBox Viewer Extension
// By Philippe Leefsma, Autodesk Inc, August 2017
//
/////////////////////////////////////////////////////////////////
import MultiModelExtensionBase from "Viewer.MultiModelExtensionBase"
import Toolkit from "Viewer.Toolkit"

class BoundingBoxExtension extends MultiModelExtensionBase {

  /////////////////////////////////////////////////////////
  // Class constructor
  //
  /////////////////////////////////////////////////////////
  constructor (viewer, options) {

    super (viewer, options)

    this.onContextMenu = this.onContextMenu.bind(this)

    this.linesMaterial = this.createMaterial(0x0000FF)

    this.lineGroups = []
  }

  /////////////////////////////////////////////////////////
  //
  //
  /////////////////////////////////////////////////////////
  createMaterial (color = 0x000000, opacity = 1.0) {

    return new THREE.LineBasicMaterial({
      color: new THREE.Color(color),
      transparent: true,
      depthWrite: false,
      depthTest: true,
      linewidth: 10,
      opacity
    })
  }

  /////////////////////////////////////////////////////////
  // Load callback
  //
  /////////////////////////////////////////////////////////
  load () {

    this.viewer.loadDynamicExtension(
      "Viewing.Extension.ContextMenu").then(
      (ctxMenuExtension) => {
        ctxMenuExtension.addHandler(
          this.onContextMenu)
      })

    console.log("Viewing.Extension.BoundingBox loaded")

    return true
  }

  /////////////////////////////////////////////////////////
  //
  //
  /////////////////////////////////////////////////////////
  get className() {

    return "bounding-box"
  }

  /////////////////////////////////////////////////////////
  // Extension Id
  //
  /////////////////////////////////////////////////////////
  static get ExtensionId () {

    return "Viewing.Extension.BoundingBox"
  }

  /////////////////////////////////////////////////////////
  // Unload callback
  //
  /////////////////////////////////////////////////////////
  unload () {

    console.log("Viewing.Extension.BoundingBox unloaded")

    super.unload ()

    return true
  }

  /////////////////////////////////////////////////////////
  //
  //
  /////////////////////////////////////////////////////////
  onModelRootLoaded () {

    this.options.loader.show (false)

    this.viewer.impl.createOverlayScene (
      "boundingBox",
      this.linesMaterial)
  }

  /////////////////////////////////////////////////////////
  //
  //
  /////////////////////////////////////////////////////////
  async onSelection (event) {

    if (event.selections.length) {

      const selection = event.selections[0]

      const model =
        this.viewer.activeModel ||
        this.viewer.model

      this.selectedDbId = selection.dbIdArray[0]

      const bbox =
        await Toolkit.getWorldBoundingBox(
          model, this.selectedDbId)

      this.drawBox(bbox)
    }
  }

  /////////////////////////////////////////////////////////
  //
  //
  /////////////////////////////////////////////////////////
  drawBox (bbox) {

    const geometry = new THREE.Geometry()

    const { min, max } = bbox

    geometry.vertices.push(new THREE.Vector3(min.x, min.y, min.z))
    geometry.vertices.push(new THREE.Vector3(max.x, min.y, min.z))

    geometry.vertices.push(new THREE.Vector3(max.x, min.y, min.z))
    geometry.vertices.push(new THREE.Vector3(max.x, min.y, max.z))

    geometry.vertices.push(new THREE.Vector3(max.x, min.y, max.z))
    geometry.vertices.push(new THREE.Vector3(min.x, min.y, max.z))

    geometry.vertices.push(new THREE.Vector3(min.x, min.y, max.z))
    geometry.vertices.push(new THREE.Vector3(min.x, min.y, min.z))

    geometry.vertices.push(new THREE.Vector3(min.x, max.y, max.z))
    geometry.vertices.push(new THREE.Vector3(max.x, max.y, max.z))

    geometry.vertices.push(new THREE.Vector3(max.x, max.y, max.z))
    geometry.vertices.push(new THREE.Vector3(max.x, max.y, min.z))

    geometry.vertices.push(new THREE.Vector3(max.x, max.y, min.z))
    geometry.vertices.push(new THREE.Vector3(min.x, max.y, min.z))

    geometry.vertices.push(new THREE.Vector3(min.x, max.y, min.z))
    geometry.vertices.push(new THREE.Vector3(min.x, max.y, max.z))

    geometry.vertices.push(new THREE.Vector3(min.x, min.y, min.z))
    geometry.vertices.push(new THREE.Vector3(min.x, max.y, min.z))

    geometry.vertices.push(new THREE.Vector3(max.x, min.y, min.z))
    geometry.vertices.push(new THREE.Vector3(max.x, max.y, min.z))

    geometry.vertices.push(new THREE.Vector3(max.x, min.y, max.z))
    geometry.vertices.push(new THREE.Vector3(max.x, max.y, max.z))

    geometry.vertices.push(new THREE.Vector3(min.x, min.y, max.z))
    geometry.vertices.push(new THREE.Vector3(min.x, max.y, max.z))

    const lines = new THREE.Line(geometry,
      this.linesMaterial,
      THREE.LinePieces)

    this.lineGroups.push(lines)

    this.viewer.impl.addOverlay("boundingBox", lines)

    this.viewer.impl.invalidate(
      true, true, true)
  }

  /////////////////////////////////////////////////////////
  //
  //
  /////////////////////////////////////////////////////////
  onContextMenu (event) {

    const model =
      this.viewer.activeModel ||
      this.viewer.model

    event.menu.forEach((entry) => {

      const title = entry.title.toLowerCase()

      switch (title) {

        case "isolate":
          entry.target = () => {
            Toolkit.isolateFull(
              this.viewer, this.selectedDbId, model)
          }
          break

        case "hide selected":
          entry.target = () => {
            Toolkit.hide(
              this.viewer, this.selectedDbId, model)
          }
          break

        case "show all objects":
          entry.target = () => {
            Toolkit.isolateFull(
              this.viewer, [], model)
            this.viewer.fitToView()
          }
          break

        default: break
      }
    })

    const instanceTree = model.getData().instanceTree

    const dbId = event.dbId || (instanceTree
        ? instanceTree.getRootId()
        : -1)

    if (dbId > -1) {

      event.menu.push({
        title: "Clear All BoundingBoxes",
        target: () => {
          this.lineGroups.forEach((lines) => {

            this.viewer.impl.removeOverlay("boundingBox", lines)
          })

          this.viewer.impl.invalidate(
            true, true, true)

          this.lineGroups = []
        }
      })
    }
  }
}

Autodesk.Viewing.theExtensionManager.registerExtension (
  BoundingBoxExtension.ExtensionId,
  BoundingBoxExtension)

export default "Viewing.Extension.BoundingBox"