Autodesk Forge 扩展 [英] Autodesk Forge Extension

查看：44
本文介绍了Autodesk Forge 扩展的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我按照本教程来扩展 autodesk forge 查看器.我已完成所有步骤，但没有显示任何按钮，我认为这是由于加载错误所致.

https://forge.autodesk.com/blog/extension-骨架工具栏停靠面板

我也尝试过本教程，但遇到了同样的问题:

http://learnforge.autodesk.io/#/viewer/extensions/selection?id=conclusion

我的问题是我没有收到错误，只是没有显示扩展名...有谁知道为什么?

我假设查看器或索引中存在错误.

以下是我的代码:(索引和伪造查看器)

index.html:

<头><title>Autodesk Forge 教程</title><meta charset="utf-8"/><!-- 常用包: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 查看器文件--><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><!-- 这个项目文件--><link href="css/main.css" rel="样式表"/><script src="js/ForgeTree.js"></script><script src="js/ForgeViewer.js"></script><身体><!-- 通过 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 alt="Autodesk Forge" src="//developer.static.autodesk.com/images/logo_forge-2-line.png" height="20"></a>

</nav><!-- 导航栏结束--><div class="容器流体填充"><div class="行填充"><div class="col-sm-4 填充"><div class="面板面板-默认填充"><div class="panel-heading" data-toggle="tooltip">桶 &amp;对象<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>新桶

<div id="appBuckets">树在这里

<div class="col-sm-8 填充"><div id="forgeViewer"></div>

<form id="uploadFile" method='post' enctype="multipart/form-data"><input id="hiddenUploadField" type="file" name="theFile" style="visibility:hidden"/></表单><!-- 模态创建桶 --><div class="modalfade" 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">&times;</span><h4 class="modal-title" id="myModalLabel">创建新的bucket</h4>

<div class="modal-body"><input type="text" id="newBucketKey" class="form-control">出于演示目的，对象(文件)是不会自动翻译.上传后，右击对象，然后选择翻译".

<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary" id="createNewBucket">继续，创建存储桶</button>

ForgeViewer.js:

var viewerApp;功能启动查看器(骨灰盒){变量选项 = {env: 'AutodeskProduction',getAccessToken:getForgeToken};var documentId = 'urn:' + urn;Autodesk.Viewing.Initializer(选项，函数 onInitialized() {viewerApp = new Autodesk.Viewing.ViewingApplication('forgeViewer');viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, { extensions: ['MyAwesomeExtension'] });viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);});}函数 onDocumentLoadSuccess(doc) {//我们仍然可以使用 Document.getSubItemsWithProperties()//但是，当使用 ViewingApplication 时，我们可以访问 **bubble** 属性，//它引用了一个图的根节点，该图包装了来自 Manifest JSON 的每个对象.var viewables = viewerApp.bubble.search({ 'type': 'geometry' });if (viewables.length === 0) {console.error('文档不包含可视内容.');返回;}//选择任何可用的可视化viewerApp.selectItem(viewables[0].data, onItemLoadSuccess, onItemLoadFail);}函数 onDocumentLoadFailure(viewerErrorCode) {console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);}功能 onItemLoadSuccess(查看器，项目){//项目已加载，任何自定义操作?}函数 onItemLoadFail(errorCode) {console.error('onItemLoadFail() - errorCode:' + errorCode);}函数 getForgeToken(回调){jQuery.ajax({url: '/api/forge/oauth/token',成功:功能(资源){回调(res.access_token，res.expires_in)}});}

MyAwesomeExtension.js:

//***********************************************//我很棒的扩展//************************************************功能 MyAwesomeExtension(查看器，选项){Autodesk.Viewing.Extension.call(这个，查看器，选项)；this.panel = null;}MyAwesomeExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);MyAwesomeExtension.prototype.constructor = MyAwesomeExtension;MyAwesomeExtension.prototype.load = function () {如果(this.viewer.toolbar){//工具栏已经可用，创建 UIthis.createUI();} 别的 {//工具栏还没有被创建，等到我们收到它的创建通知this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);this.viewer.addEventListener(av.TOOLBAR_​​CREATED_EVENT, this.onToolbarCreatedBinded);}返回真；};MyAwesomeExtension.prototype.onToolbarCreated = function () {this.viewer.removeEventListener(av.TOOLBAR_​​CREATED_EVENT, this.onToolbarCreatedBinded);this.onToolbarCreatedBinded = null;this.createUI();};MyAwesomeExtension.prototype.createUI = 函数 () {var 查看器 = this.viewer;var panel = this.panel;//按钮显示停靠面板var toolbarButtonShowDockingPanel = new Autodesk.Viewing.UI.Button('showMyAwesomePanel');toolbarButtonShowDockingPanel.onClick = function (e) {//如果为空，则创建它如果(面板==空){panel = new MyAwesomePanel(viewer, viewer.container,'awesomeExtensionPanel', '我很棒的扩展');}//显示/隐藏停靠面板panel.setVisible(!panel.isVisible());};//myAwesomeToolbarButton CSS 类应该在你的 .css 文件中定义//你可以包含图标，下面是一个示例类:/*.myAwesomeToolbarButton {背景图片:网址(/img/myAwesomeIcon.png)；背景尺寸:24px；背景重复:不重复；背景位置:中心；}*/toolbarButtonShowDockingPanel.addClass('myAwesomeToolbarButton');toolbarButtonShowDockingPanel.setToolTip('My Awesome extension');//子工具栏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);返回真；};Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);

MyAwesomePanel:

//***********************************************//我真棒(停靠)面板//************************************************功能 MyAwesomePanel(查看器，容器，ID，标题，选项){this.viewer = 查看器；Autodesk.Viewing.UI.DockingPanel.call(this, container, id, title, options);//停靠面板的样式//使用这个内置样式来支持 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";//这是我们应该放置面板内容的地方var div = document.createElement('div');div.style.margin = '20px';div.innerText = "我的内容在这里";this.container.appendChild(div);//也可以附加子元素...}MyAwesomePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);MyAwesomePanel.prototype.constructor = MyAwesomePanel;

解决方案

是的，您缺少按钮的 CSS 以及对与 HTML 文件中的扩展名相关的 JS 文件的引用.

<script src="your_folder/MyExtensionFileName.js"></script>

http://learnforge.autodesk.io/#/viewer/extensions/selection?id=toolbar-css检查此扩展按钮的 CSS.

So I am following this tutorial to extend the autodesk forge viewer. I have compelted all of the steps and no button is showing, I assume this is due to an error with the loading.

https://forge.autodesk.com/blog/extension-skeleton-toolbar-docking-panel

I have also tried this tutorial, with the same issue:

http://learnforge.autodesk.io/#/viewer/extensions/selection?id=conclusion

My issue is I am not getting an error, the extension just isn't showing... does anyone know why?

I'm assuming theres an error in either the viewer or the index.

Below is my code: (index & forge viewer)

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 alt="Autodesk Forge" src="//developer.static.autodesk.com/images/logo_forge-2-line.png" height="20">
                    </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 &amp; 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">&times;</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;

解决方案

Yes, you are missing the CSS for the Buttons and also the reference to the JS files pertaining to the extensions in your HTML file. 

<script src="your_folder/MyExtensionFileName.js"></script>

http://learnforge.autodesk.io/#/viewer/extensions/selection?id=toolbar-css Check this for the CSS of your extension buttons.

这篇关于Autodesk Forge 扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆