在 Nuxt.JS 中为 Autodesk Forge 查看器创建自定义工具栏扩展的正确方法是什么?
What is the proper way to create a custom toolbar extension in Nuxt.JS for autodesk forge viewer?
我在 nuxt.js 中有一个基本的查看器应用程序。我想自定义工具栏并显示一个额外的 button.I 遵循了几个资源和以前的答案,但仍然不清楚如何处理 nuxt 中的那些。
我遵循了本教程 - https://learnforge.autodesk.io/#/viewer/extensions/skeleton
注意:即使可以创建一个没有扩展名的工具栏按钮,这也会有所帮助me.Because我只需要一个自定义工具栏按钮,我会处理那边有js的活动。
我有两个阶段的问题,最初
工具栏扩展有时工作正常,但有时我得到 Autodesk 未定义 error.How 无法在 nuxt.js 中处理此问题?我试过这样设置,
//eslintrtc
{
"globals": {
"Autodesk": true
}
}
但这并非在所有情况下都有效。
2.After 添加按钮,我希望在 vue 组件(ie.in index.vue 文件)中处理按钮点击事件或访问 index.vue 组件的数据在 extension.js 文件中。
实现此目的的正确方法是什么?我尝试了一些,但那些都不起作用,
- 我尝试从静态文件夹添加 - 但我们无法访问其中的组件
- 尝试导入 class - autodesk 未定义错误
我会在这里留下一个简化的代码,有人可以帮我更正这个问题吗?
//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>
//太棒了extension.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);
}
}
I tried to add from static folder - but we can't access component inside it
Tried to import the class - autodesk is undefined error
这是意料之中的,因为在 build/run 时间内评估导入的模块时,Autodesk 命名空间未初始化(因为 Viewer libraries/scripts 尚未加载)(因此出现未定义错误) ...
使用 dynamic import 来推迟评估...尝试类似的方法:
async initAutodesk(app,ref){
//...
const MyAwesomeExtension = await import('./extensions/myawesomeextension.js').then(mod=>mod.default)
Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);
viewer.loadExtension...
- 将 registerExtension 方法放在 myawesomeextension.js 中作为导出函数:
export default function() {
Autodesk.Viewing.theExtensionManager.registerExtension(
"MyAwesomeExtension",
MyAwesomeExtension
);
}
- 在 index.vue 中导入 myawesomeextension.js:
<script>
import myawesomeextension from './extensions/myawesomeextension';
- 在加载查看器之前注册扩展(以本地 svf 文件为例):
mounted() {
myawesomeextension();
this.loadViewer();
},
methods: {
loadViewer() {
let config3d = {
extensions: ["MyAwesomeExtension"]
};
this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(
this.$refs.forgeViewer,
config3d
);
Autodesk.Viewing.Initializer(this.options, () => {
this.viewer.initialize();
this.viewer.start(this.project.svfUrl, this.options);
});
},
我在 nuxt.js 中有一个基本的查看器应用程序。我想自定义工具栏并显示一个额外的 button.I 遵循了几个资源和以前的答案,但仍然不清楚如何处理 nuxt 中的那些。
我遵循了本教程 - https://learnforge.autodesk.io/#/viewer/extensions/skeleton
注意:即使可以创建一个没有扩展名的工具栏按钮,这也会有所帮助me.Because我只需要一个自定义工具栏按钮,我会处理那边有js的活动。
我有两个阶段的问题,最初
工具栏扩展有时工作正常,但有时我得到 Autodesk 未定义 error.How 无法在 nuxt.js 中处理此问题?我试过这样设置,
//eslintrtc
{
"globals": {
"Autodesk": true
}
}
但这并非在所有情况下都有效。
2.After 添加按钮,我希望在 vue 组件(ie.in index.vue 文件)中处理按钮点击事件或访问 index.vue 组件的数据在 extension.js 文件中。
实现此目的的正确方法是什么?我尝试了一些,但那些都不起作用,
- 我尝试从静态文件夹添加 - 但我们无法访问其中的组件
- 尝试导入 class - autodesk 未定义错误
我会在这里留下一个简化的代码,有人可以帮我更正这个问题吗?
//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>
//太棒了extension.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);
}
}
I tried to add from static folder - but we can't access component inside it Tried to import the class - autodesk is undefined error
这是意料之中的,因为在 build/run 时间内评估导入的模块时,Autodesk 命名空间未初始化(因为 Viewer libraries/scripts 尚未加载)(因此出现未定义错误) ...
使用 dynamic import 来推迟评估...尝试类似的方法:
async initAutodesk(app,ref){
//...
const MyAwesomeExtension = await import('./extensions/myawesomeextension.js').then(mod=>mod.default)
Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);
viewer.loadExtension...
- 将 registerExtension 方法放在 myawesomeextension.js 中作为导出函数:
export default function() {
Autodesk.Viewing.theExtensionManager.registerExtension(
"MyAwesomeExtension",
MyAwesomeExtension
);
}
- 在 index.vue 中导入 myawesomeextension.js:
<script>
import myawesomeextension from './extensions/myawesomeextension';
- 在加载查看器之前注册扩展(以本地 svf 文件为例):
mounted() {
myawesomeextension();
this.loadViewer();
},
methods: {
loadViewer() {
let config3d = {
extensions: ["MyAwesomeExtension"]
};
this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(
this.$refs.forgeViewer,
config3d
);
Autodesk.Viewing.Initializer(this.options, () => {
this.viewer.initialize();
this.viewer.start(this.project.svfUrl, this.options);
});
},