秋依沙 发表于 2022-4-1 14:08:41

Forge入门整理

原文链接：https://zhuanlan.zhihu.com/p/350140039入门整理，有很多内容是从官方手册搬运的，稍微整理了一下流程，方便一些伸手党，现在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
[*]上传模型到
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如何注册，这里有说明：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）如意门：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准备文件”教程:APIs | Autodesk Forge​forge.autodesk.com/en/docs/model-derivative/v2/tutorials/prep-file4viewer/
。

这个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>
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初始化函数Autodesk.Viewing.Initialize​forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/initialization/#initializer
初始化函数只需运行一次，都是套路，照抄就好。创建Viewer实例创建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实例销毁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注册一个扩展类：扩展类​forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/extensions/
然后再扩展类里面再绑定回调事件：绑定回调事件​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：几何加载完成事件等…https://forge.autodesk.com/en/docs/viewer/v7/reference/Viewing/#escape-event自定义工具栏把官方的过程搬过来翻译一下吧。直接看官方的示例，如何在工具栏后面再加两个按钮本示例在Viewer画布上创建带有两个按钮的自定义工具栏。每个按钮都有其自己的提示，并对单击事件做出反应。单击一个按钮显示环境背景，而单击另一个按钮将其隐藏。

准备工作也是通过扩展类来实现的。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 visiblethis.viewer.setLightPreset(6);this.viewer.setEnvMapBackground(true);   // Ensure the model is centeredthis.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入口在此：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)翻译起来就累了，请大家自己去看吧，真的很重要。进阶攻略超大模型的手动分配内存：https://forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/memory-limit/一定要去逛逛API手册，能看英文最好，不行就用浏览器自带翻译，免强可以看懂就可以了，太多重要的信息，在开发过程中一定会遇到的。以上所有的入门全部掌握之后，从API手册里找资料已经不是难事了。请收藏这个官方网址吧。APIs | Autodesk Forge​forge.autodesk.com/en/docs/viewer/v7/reference/Viewing/

tip:文本优先发布在CSDN上，知乎转发。有兴趣可以查看我的原文。
页: [1]
查看完整版本: Forge入门整理