nuxt.js - 在 Nuxt.JS 中为 Autodesk Forge 查看器创建自定义工具栏扩展的正确方法是什么？

问题描述

我在 nuxt.js 中有一个基本的查看器应用程序。我想自定义工具栏并显示一个额外的按钮。我已经关注了几个资源和以前的答案，但仍然不清楚如何处理 nuxt 中的那些。

我遵循了本教程 - https://learnforge.autodesk.io/#/viewer/extensions/skeleton

注意：即使可以创建一个不带扩展名的工具栏按钮，这也会对我有所帮助。因为我所需要的只是一个自定义工具栏按钮，我会在那里用 js 处理事件。

我有两个阶段的问题，最初

工具栏扩展有时工作正常，但有时我得到 Autodesk 未定义错误。如何在 nuxt.js 中处理这个问题？我试过这样设置，

//eslintrtc

{ "globals": { "Autodesk": true } }

但这并非在所有情况下都有效。

2.添加按钮后，我希望在vue组件中处理按钮点击事件（即在index.vue文件中）或访问extension.js文件中index.vue组件的数据。

实现这一目标的正确方法是什么？我尝试了一些，但那些不起作用，

我试图从静态文件夹添加 - 但我们无法访问其中的组件
尝试导入类 - Autodesk 未定义错误

我会在这里留下一个简化的代码，有人可以帮我纠正这个问题，让它像一个 nuxt 应用程序一样工作吗？

//index.vue

<template>
    <div id="forgeViewer"></div>
</template>
<script>
import AlarmTable from "../components/AlarmTable.vue"
import MyAwesomeExtension from './extensions/myawesomeextension.js';

export default {
  components: {
    AlarmTable
  },
  data(){
    return{
      isActive:false,
      viewer:null
    }
  },
  mounted(){
      let ref = this;
      this.initAutodesk(app,ref);
  },
  methods:{
    initAutodesk(app,ref){
    var htmlDiv = document.getElementById('forgeViewer');
    const viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);

//can I register extension something like this outside and use the toolbar button 
    // Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);  

//document.getElementById('MyAwesomeExtensionButton') undefined

    this.viewer = viewer;
    var closable = null;
    var options = {
        env: 'AutodeskProduction',
        api: 'derivativeV2',  // for models uploaded to EMEA change this option to 'derivativeV2_EU'
        getAccessToken: function(onTokenReady) {
          var token = 'my access token';
          var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
          onTokenReady(token, timeInSeconds);
        }
      };

    Autodesk.Viewing.Initializer(options, function() {
      var startedCode = viewer.start();
      if (startedCode > 0) {
        console.error('Failed to create a Viewer: WebGL not supported.');
        return;
      }
      console.log('Initialization complete, loading a model next...');
    });
    var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZmFjaWxpb25ld2NsaWVudGJ1Y2tldC9yYWNfYWR2YW5jZWRfc2FtcGxlX3Byb2plY3QucnZ0';
    Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, this.onDocumentLoadFailure);
    function onDocumentLoadSuccess(viewerDocument) {
        var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
        viewer.loadDocumentNode(viewerDocument, defaultModel);
        viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>{
          console.log(event.dbIdArray.length);

          })
    }
  },

  onDocumentLoadFailure() {
      console.error('Failed fetching Forge manifest');
    }
  }
}
</script>

<style>
body {
    margin: 0;
  }
  #forgeViewer {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #F0F8FF;
  }
.myAwesomeExtensionIcon {
    background-image: url(/img/myAwesomeIcon.png);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

</style>

//myawesomeextension.js

// Content for 'my-awesome-extension.js'
export default class MyAwesomeExtension extends Autodesk.Viewing.Extension {
    constructor(viewer, options) {
        super(viewer, options);
        this._group = null;
        this._button = null;
    }

    load() {
        console.log('MyAwesomeExtensions has been loaded');
        return true;
    }

    unload() {
        // Clean our UI elements if we added any
        if (this._group) {
            this._group.removeControl(this._button);
            if (this._group.getNumberOfControls() === 0) {
                this.viewer.toolbar.removeControl(this._group);
            }
        }
        console.log('MyAwesomeExtensions has been unloaded');
        return true;
    }

    onToolbarCreated() {
        // Create a new toolbar group if it doesn't exist
        this._group = this.viewer.toolbar.getControl('allMyAwesomeExtensionsToolbar');
        if (!this._group) {
            this._group = new Autodesk.Viewing.UI.ControlGroup('allMyAwesomeExtensionsToolbar');
            this.viewer.toolbar.addControl(this._group);
        }

        // Add a new button to the toolbar group
        this._button = new Autodesk.Viewing.UI.Button('myAwesomeExtensionButton');
        this._button.onClick = (ev) => {
            // Execute an action here
        };
        this._button.setToolTip('My Awesome Extension');
        this._button.addClass('myAwesomeExtensionIcon');
        this._group.addControl(this._button);
    }
}

标签： nuxt.jsautodesk-forgeautodesk-viewer

nuxt.js - 在 Nuxt.JS 中为 Autodesk Forge 查看器创建自定义工具栏扩展的正确方法是什么？

问题描述

解决方案

推荐阅读