How to add an extension

Question

I am fairly new using the Forge Viewer and have started by created my Basic Application.

Now, I would like to try to add this extension. I did some searching and added this to my HTML:

forge.run
(
    // divId
    'ForgeViewerContainer',
    // config
    {
        extensions:[
            './Viewer.Skybox'
            'Viewing.Extension.Showcase'
        ]
    },

Now I want to load the extension. I can't quite get the hang of it. Any help would be appreciated.

Sorry for the basic question!

Answer 1

This extension is written in ES6 so unfortunately you cannot directly reference the script in your html and load it in the viewer, it requires a transpilation step to convert it to ES5. You need to learn a few concepts about modern web development tools such as Babel and Webpack.

Alternatively a quick way to test that code would be to use my React Forge boiler which is already setup with all those tools and require minimal setup steps on your side.

If this is too much new stuff for you at the moment, here is an ES5-compatible extension that you can simply put in a .js file and reference from your html, this will work with the approach you use in your question:

(function(){

  'use strict';

  function BasicExtension(viewer, options) {

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

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

  var proto = BasicExtension.prototype

  proto.load = function () {

    console.log('Basic Extension loaded!')

    return true
  }

  proto.unload = function () {

    console.log('Basic Extension unloaded!')

    return true
  }

  proto.sayHello = function (name) {

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

    return true
  }

  Autodesk.Viewing.theExtensionManager.registerExtension(
    'Basic.Extension.Id',
    BasicExtension)
})()

Then in your viewer bootstraping code:

forge.run
(
  // divId
  'ForgeViewerContainer',
  // config
  {
    extensions:[
      'Basic.Extension.Id'
    ]
  },