在 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 看到下面的信息（实作在外部扩展里）：