在 Forge Viewer 載入外部擴展

本文章的原做是 Autodesk ADN 的 Philippe Leefsma

在 v2.15 版的 Forge Viewer API 裏引入了一個重大的變革，Viewer開始支持載入外部擴展，細節能夠參考這篇文章重大變動 - Forge Viewer.loadExtension。

Viewer3D.loadExtension()這個函數自此刻起的函數回傳值（Return Value）不在是布林值（Boolean），取而代之的是一個 Promise 實例，這表示 Viewer 開始支持使用非同步的方法在載入擴展。這個變革使得擴展的代碼能夠被放置在外部文檔裏，能夠在被使用者要求或者觸發時在載入便可，那要怎麼作到呢？

開發者只要調用registerExternalExtension 這個函數來註冊外部擴展就能夠讓 Viewer 知道這個擴展是必需額外載入的，它不被包含在如今網頁頁面裏，像 Viewer 自帶的 Markups 和 BimWalker 兩個擴展都是這樣被載入的。但若是我想要將這個套用在自定擴展要怎麼作？

下方示例代碼是咱們的擴展本體，被放置在 external.js 這個文檔裏，並將這個文檔放在咱們網頁服務器的 /resources/extensions/ 路徑底下：

(function(){

  'use strict';

  function MyExternalExtension(viewer, options) {

    Autodesk.Viewing.Extension.call(this, viewer, options)
  }

  MyExternalExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype)
  MyExternalExtension.prototype.constructor = MyExternalExtension

  var proto = MyExternalExtension.prototype

  proto.load = function () {

    console.log('External Extension loaded!')

    return true
  }

  proto.unload = function () {

    console.log('External Extension unloaded!')

    return true
  }

  proto.sayHello = function (name) {

    console.log('Hi ' + name + '!')

    return true
  }

  Autodesk.Viewing.theExtensionManager.registerExtension(
    'MyExternal.Extension.Id',
    MyExternalExtension)
})()

如今假設咱們的網頁服務器的位址是 localhost:3000，在咱們的 Viewer 應用的代碼裏能夠加上下面這行來註冊 external.js 這個外部擴展：

Autodesk.Viewing.theExtensionManager.registerExternalExtension(
  'MyExternal.Extension.Id',
  'http://localhost:3000/resources/extensions/external.js')

在透過這些代碼將咱們的外部擴展載入：

viewer.addEventListener(
  Autodesk.Viewing.GEOMETRY_LOADED_EVENT, () => {

    viewer.loadExtension('MyExternal.Extension.Id').then(
      function(externalExtension) {

        externalExtension.sayHello('Bob')
      })
  });

一但擴展被載入後就能夠透拓瀏覽器的 Console 看到下面的信息（實做在外部擴展裏）：