研发动态

[Forge] Forge入门整理 [课程编码2585]

[复制链接] []
发表于 2022-4-1 14:08:41| 字数 9,746 | 显示全部楼层 |阅读模式
入门整理,有很多内容是从官方手册搬运的,稍微整理了一下流程,方便一些伸手党,现在2020年7月,官方最新版本v7。
先上菜,摆一道原汁原味的forge模型给大伙鉴赏:http://www.qmodel.cn/demo/forge/
首先,注册autodesk账号我就不说了。
目录
准备工作
第一步:怎么注册一个App?
第二步:如何获取Access_Token?
第三步:如何转换模型?
将Viewer添加到HTML页面
初始化Forge Viewer
举例
初始化函数Autodesk.Viewing.Initializer
创建Viewer实例
销毁Viewer实例
加载模型
回调事件绑定CallBack
自定义工具栏
准备工作
步骤1:检测工具栏
第2步:添加按钮
步骤3:清理释放
业务集成API
进阶攻略


准备工作
准备工作有三个步骤:
  • 注册一个app,注册完获取client_id,一次性的,注册完以后可以永久使用
  • 登录,为了获取ACCESS_TOKEN
  • 上传模型到
[color=inherit !important]APIs | Autodesk Forge​forge.autodesk.com/en/docs/model-derivative/v2/
进行转换,为了得到documentId
第一步:怎么注册一个App?
类似苹果的appid,它这里也有一个client_id。
注册一个App的入口在这里:https://forge.autodesk.com/developer/start-now/signup
如何注册,这里有说明:
[color=inherit !important]APIs | Autodesk Forge​forge.autodesk.com/en/docs/design-automation/v3/tutorials/3dsmax/task1-authenticate/
第二步:如何获取Access_Token?
您必须使用步骤1中的Forge应用程序的客户端ID和客户端密钥来获取访问令牌。该访问令牌充当您的安全凭证,用于在本教程的其余部分中对您发送给Forge的请求进行身份验证。
在下面的例子,使用替换CLIENT_ID和CLIENT_SECRET,在上一步骤获得的,并且发送请求。
请求
curl -i -X POST \    'https://developer.api.autodesk.com/authentication/v1/authenticate' \    -H 'Content-Type: application/x-www-form-urlencoded' \    -d 'client_id=CLIENT_ID' \    -d 'client_secret=CLIENT_SECRET' \    -d 'grant_type=client_credentials' \    -d 'scope=code:all data:write data:read bucket:create bucket:delete'

响应
{  "access_token":"YOUR_ACCESS_TOKEN",  "token_type":"Bearer",  "expires_in":3599}

记下您的YOUR_ACCESS_TOKEN,后面会用。
第三步:如何转换模型?
Forge提供了一套很简单的API可以把模型转换掉,甚至都打包成了Postman的一套接口在github,傻瓜式的往下点,一条条接口调用过去,就能拿到您要的模型ID(documentId)如意门:
[color=inherit !important]https://github.com/Autodesk-Forge/forge-tutorial-postman/tree/master/ModelDerivative_04​github.com/Autodesk-Forge/forge-tutorial-postman/tree/master/ModelDerivative_04
如何调用请参见Model Derivative API文档中的“Viewer准备文件”教程:
[color=inherit !important]APIs | Autodesk Forge​forge.autodesk.com/en/docs/model-derivative/v2/tutorials/prep-file4viewer/

v2-df217dc86a71372d730cd21074727de0_720w.jpg
这个urn就是我们要的documentId
转换完也可以下载下来,当然国内也有些牛人,可以走捷径,这里不好点名说啦。
将Viewer添加到HTML页面
类似以下示例,添加引用“style.min.css”和“viewer3D.min.js”。
<head>     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />    <meta charset="utf-8">    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">     <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>    <style>        body {            margin: 0;        }        #forgeViewer {            width: 100%;            height: 100%;            margin: 0;            background-color: #F0F8FF;        }     </style> </head> <body>     <div id="forgeViewer"></div> </body>
div标识符forgeViewer将初始化一个Viewer实例。要了解如何初始化查看器实例,请参见第2部分:初始化Viewer。
<script>标记指定浏览器的JavaScript代码的位置,以及该版本的库来下载。在上面的示例HTML中,指定的版本为7.*,它拉出了主要版本7可用的最新次要版本。
例如,如果版本7.0,7.1并7.2可用,则请求浏览器版本7.*检索版本7.2。
同样,指定的版本也可以包含次要号或补丁号。以下URL均有效:
<!-- Fetch exactly version 7.0.0 --> <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.0.0/viewer3D.min.js"></script> <!-- Fetch latest patch version for 7.0 --> <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.0.*/viewer3D.min.js"></script> <!-- Also fetch latest patch version for 7.0 --> <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.0/viewer3D.min.js"></script> <!-- Fetch latest minor version for 7.0 --> <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
[color=inherit !important]APIs | Autodesk Forge​forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/starting-html/#lmv-viewer-version
您可以借助全局变量LMV_VIEWER_VERSION验证获取的forge viewer的版本。
初始化Forge Viewer
初始化只有两步:
  • 使用内置初始化函数进行初始化页面Autodesk.Viewing.Initializer()。
  • 创建一个Viewer实例并验证WebGL支持是否可用。
举例var viewer;var options = {    env: 'AutodeskProduction',    api: 'derivativeV2',  // for models uploaded to EMEA change this option to 'derivativeV2_EU'    getAccessToken: function(onTokenReady) {        var token = 'YOUR_ACCESS_TOKEN';        var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API        onTokenReady(token, timeInSeconds);    }}; Autodesk.Viewing.Initializer(options, function() {     var htmlDiv = document.getElementById('forgeViewer');    viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);    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...'); });
初始化函数Autodesk.Viewing.Initializer[color=inherit !important]初始化函数Autodesk.Viewing.Initialize​forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/initialization/#initializer
初始化函数只需运行一次,都是套路,照抄就好。
创建Viewer实例[color=inherit !important]创建Viewer实例​forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/initialization/#create-viewer-instance
调用Initializer回调后,创建Viewer的新实例。
var htmlDiv = document.getElementById('forgeViewer');viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv, {});

  • var htmlDiv = document.getElementById('forgeViewer');

  • viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv, {});

viewer.start()只需调用一次该方法。
销毁Viewer实例[color=inherit !important]销毁Viewer实例​forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/initialization/#destroy-viewer-instance
当页面上不再需要Viewer时,请使用以下方法释放掉:
viewer.finish();viewer = null;Autodesk.Viewing.shutdown();
加载模型
加载模型是有两个步骤。
  • Model Derivative获取您要的模型(前面已介绍如何 上传源文件,检查转换,和获得转换结果) 。
  • 让Viewer加载模型。
通过前面的准备工作,拿到了documentId,抄代码就是了,您可以放在window.onload,也可以写个button.onclick来加载。
这个load方法,是可以直接把documentId替换成svf的下载路径的。
var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXktYnVja2V0L215LWF3ZXNvbWUtZm9yZ2UtZmlsZS5ydnQ';Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure); function onDocumentLoadSuccess(viewerDocument) {    var defaultModel = viewerDocument.getRoot().getDefaultGeometry();    viewer.loadDocumentNode(viewerDocument, defaultModel);} function onDocumentLoadFailure() {    console.error('Failed fetching Forge manifest');}
回调事件绑定CallBack
这个事情我不打算照搬官方的说明。但是还是放一个官方的链接简单说一下
官方提倡先对viewer注册一个扩展类:
[color=inherit !important]扩展类​forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/extensions/
然后再扩展类里面再绑定回调事件:
[color=inherit !important]绑定回调事件​forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/events/
这事情搞得就有点复杂。
首先说一下扩展类,它有两个特征:
Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension',MyAwesomeExtension);// MyAwesomeExtension为扩展类的类名
1、在扩展类是包含存在load和unload方法
2、在load 和unloud方法里面,可以使用this.viewer访问当前的viewer对象。
但是其实,Viewer绑定事件也可以放在其他地方 ,比如前面说到的Autodesk.Viewing.Initializer()回调,只需要一句话就能绑定上。比如绑定选中业务:
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, function (event) { console.log('回调业务');    });

可以在下面这个网址查到所有的回调事件名称,比如:
CAMERA_CHANGE_EVENT:相机改变事件
FIT_TO_VIEW_EVENT:适应窗口事件
CUTPLANES_CHANGE_EVENT:剖面改变事件
GEOMETRY_LOADED_EVENT:几何加载完成事件
等…
自定义工具栏
把官方的过程搬过来翻译一下吧。直接看官方的示例,如何在工具栏后面再加两个按钮
本示例在Viewer画布上创建带有两个按钮的自定义工具栏。每个按钮都有其自己的提示,并对单击事件做出反应。单击一个按钮显示环境背景,而单击另一个按钮将其隐藏。

v2-34a29be0540476fc69657558e83d7154_720w.png
准备工作
也是通过扩展类来实现的。
function ToolbarExtension(viewer, options) {  Autodesk.Viewing.Extension.call(this, viewer, options);} ToolbarExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);ToolbarExtension.prototype.constructor = ToolbarExtension; ToolbarExtension.prototype.load = function() {  // Set background environment to "Infinity Pool"  // and make sure the environment background texture is visible  this.viewer.setLightPreset(6);  this.viewer.setEnvMapBackground(true);   // Ensure the model is centered  this.viewer.fitToView();   return true;}; ToolbarExtension.prototype.unload = function() {  // nothing yet}; Autodesk.Viewing.theExtensionManager.registerExtension('ToolbarExtension', ToolbarExtension);
步骤1:检测工具栏
在自定义扩展中,重写基类方法onToolbarCreated。工具栏可用于扩展类时,查看器将调用此方法。
ToolbarExtension.prototype.onToolbarCreated = function(toolbar) {   alert('TODO: customize Viewer toolbar');};

第2步:添加按钮
要创建一个子工具栏并添加几个按钮:
ToolbarExtension.prototype.onToolbarCreated = function(toolbar) {   // alert('TODO: customize Viewer toolbar');     var viewer = this.viewer;     // Button 1   var button1 = new Autodesk.Viewing.UI.Button('show-env-bg-button');   button1.onClick = function(e) {       viewer.setEnvMapBackground(true);   };   button1.addClass('show-env-bg-button');   button1.setToolTip('Show Environment');     // Button 2   var button2 = new Autodesk.Viewing.UI.Button('hide-env-bg-button');   button2.onClick = function(e) {       viewer.setEnvMapBackground(false);   };   button2.addClass('hide-env-bg-button');   button2.setToolTip('Hide Environment');     // SubToolbar   this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('my-custom-toolbar');   this.subToolbar.addControl(button1);   this.subToolbar.addControl(button2);     toolbar.addControl(this.subToolbar); };

请注意,上面的代码调用方法addClass(),它添加了一个CSS类来控制自定义按钮的外观。
对于此示例,我们将样式定义添加到HTML文件中:
<style>   .show-env-bg-button {     background: red;   }   .hide-env-bg-button {     background: blue;   } </style>

刷新HTML页面时,将显示按钮。将鼠标悬停在它们上方会显示工具提示。单击以触发他们的动作。
步骤3:清理释放
在扩展类删除添加的所有DOM元素和事件。
ToolbarExtension.prototype.unload = function() {   if (this.subToolbar) {       this.viewer.toolbar.removeControl(this.subToolbar);       this.subToolbar = null;   } };

您可以通过手动调用viewer.loadExtension('ToolbarExtension')
和viewer.unload('ToolbarExtension')方法来验证扩展类是否按预期工作。
业务集成API
入口在此:
[color=inherit !important]APIs | Autodesk Forge​forge.autodesk.com/en/docs/viewer/v7/reference/Viewing/GuiViewer3D/
这里是整个文档不敢说最重要,但是肯定是最常用的内容,没有之一。所有的方法都是通过this.viewer来调用就可以了。
比如您想把当面的画面保存为图片:getScreenShot(w, h, cb, overlayRenderer)
为选中构件设置颜色:setSelectionColor(color, selectionType)
设置主题颜色:setTheme(name)
翻译起来就累了,请大家自己去看吧,真的很重要。
进阶攻略
超大模型的手动分配内存:
一定要去逛逛API手册,能看英文最好,不行就用浏览器自带翻译,免强可以看懂就可以了,太多重要的信息,在开发过程中一定会遇到的。以上所有的入门全部掌握之后,从API手册里找资料已经不是难事了。请收藏这个官方网址吧。
[color=inherit !important]APIs | Autodesk Forge​forge.autodesk.com/en/docs/viewer/v7/reference/Viewing/

tip:文本优先发布在CSDN上,知乎转发。有兴趣可以查看我的原文。

回复 申请删帖

使用道具 举报

  • 联系我们
  • 邮箱:837005074#qq.com(请把#改成@)
  • 电话:18810188033
  • QQ客服 837005074
  • 人工客服:周一至周日(晚6点至11点)
  • 扫描加客服QQ

  • 扫描加客服微信

QQ|关于我们|Archiver|手机版|小黑屋|畅建科技 ( 京ICP备2022013818号-3 )

GMT+8, 2024-3-29 02:01 , Processed in 0.545848 second(s), 57 queries .

Powered by 找最好 X3.4

© 2015至今 zhaozuihao.com