在 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 看到下面的信息(实作在外部扩展里):
图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值