Autodesk Forge 扩展
Posted
技术标签:
【中文标题】Autodesk Forge 扩展【英文标题】：Autodesk Forge Extension 【发布时间】：2019-02-19 11:27:57 【问题描述】：所以我按照本教程来扩展 Autodesk forge 查看器。我已经完成了所有步骤，但没有显示任何按钮，我认为这是由于加载错误。
https://forge.autodesk.com/blog/extension-skeleton-toolbar-docking-panel
我也试过这个教程，同样的问题：
http://learnforge.autodesk.io/#/viewer/extensions/selection?id=conclusion
我的问题是我没有收到错误，扩展程序只是没有显示...有人知道为什么吗？
我假设查看器或索引中存在错误。
以下是我的代码：（索引和伪造查看器）
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Autodesk Forge Tutorial</title>
<meta charset="utf-8" />
<!-- Common packages: jQuery, Bootstrap, jsTree -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src="/js/MyAwesomeExtension.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<!-- Autodesk Forge Viewer files -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v6.0" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.0"></script>
<!-- this project files -->
<link href="css/main.css" rel="stylesheet" />
<script src="js/ForgeTree.js"></script>
<script src="js/ForgeViewer.js"></script>
</head>
<body>
<!-- Fixed navbar by Bootstrap: https://getbootstrap.com/examples/navbar-fixed-top/ -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav left">
<li>
<a href="http://developer.autodesk.com" target="_blank">
<img src="//developer.static.autodesk.com/images/logo_forge-2-line.png" >
</a>
</li>
</ul>
</div>
</nav>
<!-- End of navbar -->
<div class="container-fluid fill">
<div class="row fill">
<div class="col-sm-4 fill">
<div class="panel panel-default fill">
<div class="panel-heading" data-toggle="tooltip">
Buckets & Objects
<span id="refreshBuckets" class="glyphicon glyphicon-refresh" style="cursor: pointer"></span>
<button class="btn btn-xs btn-info" style="float: right" id="showFormCreateBucket" data-toggle="modal" data-target="#createBucketModal">
<span class="glyphicon glyphicon-folder-close"></span> New bucket
</button>
</div>
<div id="appBuckets">
tree here
</div>
</div>
</div>
<div class="col-sm-8 fill">
<div id="forgeViewer"></div>
</div>
</div>
</div>
<form id="uploadFile" method='post' enctype="multipart/form-data">
<input id="hiddenUploadField" type="file" name="theFile" style="visibility:hidden" />
</form>
<!-- Modal Create Bucket -->
<div class="modal fade" id="createBucketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Cancel">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Create new bucket</h4>
</div>
<div class="modal-body">
<input type="text" id="newBucketKey" class="form-control"> For demonstration purposes, objects (files) are
NOT automatically translated. After you upload, right click on
the object and select "Translate".
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="createNewBucket">Go ahead, create the bucket</button>
</div>
</div>
</div>
</div>
</body>
</html>
ForgeViewer.js：
var viewerApp;
function launchViewer(urn)
var options =
env: 'AutodeskProduction',
getAccessToken: getForgeToken
;
var documentId = 'urn:' + urn;
Autodesk.Viewing.Initializer(options, function onInitialized()
viewerApp = new Autodesk.Viewing.ViewingApplication('forgeViewer');
viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, extensions: ['MyAwesomeExtension'] );
viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
);
function onDocumentLoadSuccess(doc)
// We could still make use of Document.getSubItemsWithProperties()
// However, when using a ViewingApplication, we have access to the **bubble** attribute,
// which references the root node of a graph that wraps each object from the Manifest JSON.
var viewables = viewerApp.bubble.search( 'type': 'geometry' );
if (viewables.length === 0)
console.error('Document contains no viewables.');
return;
// Choose any of the available viewables
viewerApp.selectItem(viewables[0].data, onItemLoadSuccess, onItemLoadFail);
function onDocumentLoadFailure(viewerErrorCode)
console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
function onItemLoadSuccess(viewer, item)
// item loaded, any custom action?
function onItemLoadFail(errorCode)
console.error('onItemLoadFail() - errorCode:' + errorCode);
function getForgeToken(callback)
jQuery.ajax(
url: '/api/forge/oauth/token',
success: function (res)
callback(res.access_token, res.expires_in)
);
MyAwesomeExtension.js：
// *******************************************
// My Awesome Extension
// *******************************************
function MyAwesomeExtension(viewer, options)
Autodesk.Viewing.Extension.call(this, viewer, options);
this.panel = null;
MyAwesomeExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
MyAwesomeExtension.prototype.constructor = MyAwesomeExtension;
MyAwesomeExtension.prototype.load = function ()
if (this.viewer.toolbar)
// Toolbar is already available, create the UI
this.createUI();
else
// Toolbar hasn't been created yet, wait until we get notification of its creation
this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
this.viewer.addEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
return true;
;
MyAwesomeExtension.prototype.onToolbarCreated = function ()
this.viewer.removeEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
this.onToolbarCreatedBinded = null;
this.createUI();
;
MyAwesomeExtension.prototype.createUI = function ()
var viewer = this.viewer;
var panel = this.panel;
// button to show the docking panel
var toolbarButtonShowDockingPanel = new Autodesk.Viewing.UI.Button('showMyAwesomePanel');
toolbarButtonShowDockingPanel.onClick = function (e)
// if null, create it
if (panel == null)
panel = new MyAwesomePanel(viewer, viewer.container,
'awesomeExtensionPanel', 'My Awesome Extension');
// show/hide docking panel
panel.setVisible(!panel.isVisible());
;
// myAwesomeToolbarButton CSS class should be defined on your .css file
// you may include icons, below is a sample class:
/*
.myAwesomeToolbarButton
background-image: url(/img/myAwesomeIcon.png);
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
*/
toolbarButtonShowDockingPanel.addClass('myAwesomeToolbarButton');
toolbarButtonShowDockingPanel.setToolTip('My Awesome extension');
// SubToolbar
this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('MyAwesomeAppToolbar');
this.subToolbar.addControl(toolbarButtonShowDockingPanel);
viewer.toolbar.addControl(this.subToolbar);
;
MyAwesomeExtension.prototype.unload = function ()
this.viewer.toolbar.removeControl(this.subToolbar);
return true;
;
Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);
MyAwesomePanel：
// *******************************************
// My Awesome (Docking) Panel
// *******************************************
function MyAwesomePanel(viewer, container, id, title, options)
this.viewer = viewer;
Autodesk.Viewing.UI.DockingPanel.call(this, container, id, title, options);
// the style of the docking panel
// use this built-in style to support Themes on Viewer 4+
this.container.classList.add('docking-panel-container-solid-color-a');
this.container.style.top = "10px";
this.container.style.left = "10px";
this.container.style.width = "auto";
this.container.style.height = "auto";
this.container.style.resize = "auto";
// this is where we should place the content of our panel
var div = document.createElement('div');
div.style.margin = '20px';
div.innerText = "My content here";
this.container.appendChild(div);
// and may also append child elements...
MyAwesomePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
MyAwesomePanel.prototype.constructor = MyAwesomePanel;
【问题讨论】：
【参考方案1】：是的，您缺少按钮的 CSS 以及与 HTML 文件中的扩展相关的 JS 文件的引用。
<script src="your_folder/MyExtensionFileName.js"></script>
http://learnforge.autodesk.io/#/viewer/extensions/selection?id=toolbar-css 检查扩展按钮的 CSS。
【讨论】：
脚本代码请参见 index.html 的第 10 行，我已将该 css 包含在 main.css 中，但仍然遇到同样的问题。 我会把它移到 ForgeViewer.js 之前阅读，并且去掉第一个“/”，让它只有 js/MyAwesomeExtension.js，你可能会定位错误的位置。跨度> 这行得通，然后我遇到了我没有将 index.html 设置为启动文件的问题（我自己都不敢相信）但现在可以了，非常感谢为你的帮助詹姆！以上是关于Autodesk Forge 扩展的主要内容，如果未能解决你的问题，请参考以下文章
Forge 查看器：Autodesk.BoxSelection 扩展错误