入门整理，有很多内容是从官方手册搬运的，稍微整理了一下流程，方便一些伸手党，现在2020年7月，官方最新版本v7。ztcxxolapcfx 首先，注册autodesk账号我就不说了。nvwazzozftblzzwutnmnplgjdldcumbmthpgwou
目录hmqjdkrgeudejlmeqljjbchxhfs
准备工作lohxbvpvhggrnnxqokmauwhabxsafubglazyfwpiemjmvsr
第一步：怎么注册一个App？qdkeqpkomzysykaszrcsalcnzousszwtaedmcggvcjbiv
第二步：如何获取Access_Token?sffrmlmjdabemscfvnzugweqealrvrmcxvlcqbbvlveicpyfpzkoywzafv
第三步：如何转换模型？qdkeqpkomzysykaszrcsalcnzousszwtaedmcggvcjbiv
将Viewer添加到HTML页面qqyioamurqfycogtesmqbfijvbvd
初始化Forge Viewerziqhjjnkvkjrobf
举例alcfdgsixqsjfylglechhzkbiincdlxhhbizhu
初始化函数Autodesk.Viewing.Initializernnbpdvtswbqitjflnvmpnpucrcnxdcbms
创建Viewer实例hmqjdkrgeudejlmeqljjbchxhfs
销毁Viewer实例
acjgwajodcteuqnturckfclpdkk加载模型xtihwfkfcfvnflrfdtwixyzakns
回调事件绑定CallBackoyffcjqbmxnhlxpltdg
自定义工具栏oyffcjqbmxnhlxpltdg
步骤1：检测工具栏
kjgyalrmuceljggyjoaopkarz第2步：添加按钮mvuxvqjzijbdkcnmtanvramqzjcxutorbshjwwuv
业务集成APIsmbiwjnhuxojryrgdidofmtuyjtlactnxkqycmzowf
yjmbpkvskczcghnrocjhjnjuqvirjxesjzb
准备工作- 注册一个app，注册完获取client_id，一次性的，注册完以后可以永久使用
- 登录，为了获取ACCESS_TOKEN
- 上传模型到sgrvqlcyzjsxjarfxtxuuwzgbjfywskqby
[color=inherit !important]APIs | Autodesk Forgeforge.autodesk.com/en/docs/model-derivative/v2/uerjwxisxfjoasnctzvhvgth
第一步：怎么注册一个App？类似苹果的appid,它这里也有一个client_id。maizcksjmylnbtvlmiwkxfwghqkklwdqr
如何注册，这里有说明：
kjgyalrmuceljggyjoaopkarz[color=inherit !important]APIs | Autodesk Forgeforge.autodesk.com/en/docs/design-automation/v3/tutorials/3dsmax/task1-authenticate/fqlgejszjvdofltuzdsiaahbpgrumosvzafzhhxqspcv
第二步：如何获取Access_Token?您必须使用步骤1中的Forge应用程序的客户端ID和客户端密钥来获取访问令牌。该访问令牌充当您的安全凭证，用于在本教程的其余部分中对您发送给Forge的请求进行身份验证。qhezqvaruzfhojrrglipzlsqyvryrnpqipshopfnujfvb
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'bqvmepmfzsmnmqxmrtb
asguntttpyqktixdurqnuluvnylhoqaadayhqhrtpuofe
响应bqfopthayjbpzymunyonlbfccmyneln
{ "access_token":"YOUR_ACCESS_TOKEN", "token_type":"Bearer", "expires_in":3599}gqeazyuxoqzaqkmkrsyxlrlv
kfktzmpnodmgikfhgsiqanxbdukdcrxqwtuenlembjanvszr
第三步：如何转换模型？Forge提供了一套很简单的API可以把模型转换掉，甚至都打包成了Postman的一套接口在github，傻瓜式的往下点，一条条接口调用过去，就能拿到您要的模型ID（documentId）如意门：ziqhjjnkvkjrobf
[color=inherit !important]https://github.com/Autodesk-Forge/forge-tutorial-postman/tree/master/ModelDerivative_04github.com/Autodesk-Forge/forge-tutorial-postman/tree/master/ModelDerivative_04uerjwxisxfjoasnctzvhvgth
如何调用请参见Model Derivative API文档中的“Viewer准备文件”教程:oeqfixldttmcfgbnpotogcsbimgpnfapc [color=inherit !important]APIs | Autodesk Forgeforge.autodesk.com/en/docs/model-derivative/v2/tutorials/prep-file4viewer/bmhkutlfaa
。ukwsuvobhexobbfycrueje
hithdnvqhxlganztvfbjeluhmnymvtwlswnidol
ysfdrzfsgclbgajoftpqpshdermupaopqxxjhorqdzuonaxfge
这个urn就是我们要的documentIdhmqjdkrgeudejlmeqljjbchxhfs
将Viewer添加到HTML页面类似以下示例，添加引用“style.min.css”和“viewer3D.min.js”。
rytfbubneueyonnlenqhmyiaftguhmhcbfyvmr<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>skvjwhjocuibuotykosjswduyxzyvxmvqdcrwa
例如，如果版本7.0，7.1并7.2可用，则请求浏览器版本7.*检索版本7.2。qwpjpsmpletrgelwmkloxdhqgcqdolkozk
同样，指定的版本也可以包含次要号或补丁号。以下URL均有效：
eqnnrmvyvzxnrqlyazgrcwupydrdaisjjxekkkzknivgzdnqcf<!-- 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> pujavjiuhhqwbtnzjxojzfcxb
[color=inherit !important]APIs | Autodesk Forgeforge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/starting-html/#lmv-viewer-versionjtmadivdtuvkqsidaftzpbvy
初始化Forge Viewer初始化只有两步：sgdufjrbxkfkpmaslqbrjkafiyuwzmefhbqqoncezubmjnmo
- 使用内置初始化函数进行初始化页面Autodesk.Viewing.Initializer()。
- 创建一个Viewer实例并验证WebGL支持是否可用。ygwweeyshayrmjcosmmusll
举例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...'); });ylvfoyrdoamdmdeixsehjterdbqbjezgnsjisvim
初始化函数Autodesk.Viewing.Initializer[color=inherit !important]初始化函数Autodesk.Viewing.Initializeforge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/initialization/#initializerzzsblhzjwnhgjgjgknzpddswuvvc
创建Viewer实例[color=inherit !important]创建Viewer实例forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/initialization/#create-viewer-instanceszunzdmpilqeitvfiparifr
调用Initializer回调后，创建Viewer的新实例。ybtxhlzgvik
var htmlDiv = document.getElementById('forgeViewer');viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv, {});zaujcnlpckwbghawnaevijtjzjlnhsqpbg
duzsvajetnrgmxlkgxakwuexh
viewer.start()只需调用一次该方法。abuemebwtsgglojcgoiwgbvweiuvkwltgbsevuyvrog
销毁Viewer实例[color=inherit !important]销毁Viewer实例forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/initialization/#destroy-viewer-instanceiiuruocchxvmbxmaqfcnfmvxhekotxdqozurlioohvgfjwf
viewer.finish();viewer = null;Autodesk.Viewing.shutdown();iaauebkdyfbbnvvvihlbgeyoxwlflyflsbsqjphkvrdgfp
加载模型加载模型是有两个步骤。
ahonnptero- 从Model Derivative获取您要的模型（前面已介绍如何 上传源文件，检查转换，和获得转换结果） 。
- 让Viewer加载模型。nfkjqnbeoqitleuntjmprnjaxclbaxf
通过前面的准备工作，拿到了documentId,抄代码就是了,您可以放在window.onload,也可以写个button.onclick来加载。ofdmorsqljmqdjyxskdutntxjkneayx
这个load方法，是可以直接把documentId替换成svf的下载路径的。
sthgkpynjilqajafoawuxocrvar 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');}bqvmepmfzsmnmqxmrtb
回调事件绑定CallBack这个事情我不打算照搬官方的说明。但是还是放一个官方的链接简单说一下jfncrfwepqje
官方提倡先对viewer注册一个扩展类：qeezzuflkqdwhinraurrjrfdymshqaxisthyrumyg
[color=inherit !important]扩展类forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/extensions/duzsvajetnrgmxlkgxakwuexh
然后再扩展类里面再绑定回调事件：neexqdfhiumytshuwkqatpewtojmyiccydkyeainhene
[color=inherit !important]绑定回调事件forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/events/zzsblhzjwnhgjgjgknzpddswuvvc
这事情搞得就有点复杂。ziqhjjnkvkjrobf
首先说一下扩展类，它有两个特征：sffrmlmjdabemscfvnzugweqealrvrmcxvlcqbbvlveicpyfpzkoywzafv
Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension',MyAwesomeExtension);// MyAwesomeExtension为扩展类的类名fabbnmofxqceyyuzferbpclpsulfdyalkznea
2、在load 和unloud方法里面，可以使用this.viewer访问当前的viewer对象。sdivynqlksotmvm
但是其实，Viewer绑定事件也可以放在其他地方 ，比如前面说到的Autodesk.Viewing.Initializer()回调，只需要一句话就能绑定上。比如绑定选中业务：tcvkyiztre
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, function (event) { console.log('回调业务'); });tegargmuibybjmjofcmaerdjvowiece
iyvttuydvwkyzvxrlxahzdaqjuwdepsjha
CAMERA_CHANGE_EVENT：相机改变事件oeqfixldttmcfgbnpotogcsbimgpnfapc
FIT_TO_VIEW_EVENT：适应窗口事件ndebuikdxnqotwvcnciodeabvawhclzjvssffecxcvbriqqa
CUTPLANES_CHANGE_EVENT：剖面改变事件maizcksjmylnbtvlmiwkxfwghqkklwdqr
GEOMETRY_LOADED_EVENT：几何加载完成事件
olqkmppiaepkledvleivdn等…ziqhjjnkvkjrobf
自定义工具栏把官方的过程搬过来翻译一下吧。直接看官方的示例，如何在工具栏后面再加两个按钮nvwazzozftblzzwutnmnplgjdldcumbmthpgwou
本示例在Viewer画布上创建带有两个按钮的自定义工具栏。每个按钮都有其自己的提示，并对单击事件做出反应。单击一个按钮显示环境背景，而单击另一个按钮将其隐藏。mvuxvqjzijbdkcnmtanvramqzjcxutorbshjwwuv
jvmbbnyaetvejeywylklzawghy
rulewubvqmardrm
准备工作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);sgrvqlcyzjsxjarfxtxuuwzgbjfywskqby
步骤1：检测工具栏在自定义扩展中，重写基类方法onToolbarCreated。工具栏可用于扩展类时，查看器将调用此方法。oyffcjqbmxnhlxpltdg
ToolbarExtension.prototype.onToolbarCreated = function(toolbar) { alert('TODO: customize Viewer toolbar');};fwbvqhphpswietsnbswrqxpgclaxh
fabbnmofxqceyyuzferbpclpsulfdyalkznea
第2步：添加按钮要创建一个子工具栏并添加几个按钮：plfukpjgypda
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); };fabbnmofxqceyyuzferbpclpsulfdyalkznea
iyvttuydvwkyzvxrlxahzdaqjuwdepsjha
请注意，上面的代码调用方法addClass()，它添加了一个CSS类来控制自定义按钮的外观。qhezqvaruzfhojrrglipzlsqyvryrnpqipshopfnujfvb
对于此示例，我们将样式定义添加到HTML文件中：maizcksjmylnbtvlmiwkxfwghqkklwdqr
<style> .show-env-bg-button { background: red; } .hide-env-bg-button { background: blue; } </style>iyvttuydvwkyzvxrlxahzdaqjuwdepsjha
fqlgejszjvdofltuzdsiaahbpgrumosvzafzhhxqspcv
刷新HTML页面时，将显示按钮。将鼠标悬停在它们上方会显示工具提示。单击以触发他们的动作。jpiuooshmgxmrbjsbyfdpuftqlhhbymqmbgjj
步骤3：清理释放ToolbarExtension.prototype.unload = function() { if (this.subToolbar) { this.viewer.toolbar.removeControl(this.subToolbar); this.subToolbar = null; } };fwbvqhphpswietsnbswrqxpgclaxh
mowyighhilzpsbhtzcagcfcemjzibicw
和viewer.unload('ToolbarExtension')方法来验证扩展类是否按预期工作。zvqtnmktlnwpjazdercvegpryadefz
业务集成API入口在此：
olqkmppiaepkledvleivdn[color=inherit !important]APIs | Autodesk Forgeforge.autodesk.com/en/docs/viewer/v7/reference/Viewing/GuiViewer3D/zzsblhzjwnhgjgjgknzpddswuvvc
这里是整个文档不敢说最重要，但是肯定是最常用的内容，没有之一。所有的方法都是通过this.viewer来调用就可以了。jpiuooshmgxmrbjsbyfdpuftqlhhbymqmbgjj
比如您想把当面的画面保存为图片：getScreenShot(w, h, cb, overlayRenderer)eilflmiuly 为选中构件设置颜色：setSelectionColor(color, selectionType)vikblevper 设置主题颜色：setTheme(name)lohxbvpvhggrnnxqokmauwhabxsafubglazyfwpiemjmvsr
翻译起来就累了，请大家自己去看吧，真的很重要。klhlwatqztkexsujtpqsxhvatf
进阶攻略超大模型的手动分配内存：kcmsvqsbrwwplzgmcbivhfepy
一定要去逛逛API手册，能看英文最好，不行就用浏览器自带翻译，免强可以看懂就可以了，太多重要的信息，在开发过程中一定会遇到的。以上所有的入门全部掌握之后，从API手册里找资料已经不是难事了。请收藏这个官方网址吧。pqlrmjgukijppfzy
[color=inherit !important]APIs | Autodesk Forgeforge.autodesk.com/en/docs/viewer/v7/reference/Viewing/hfnikgffwuanzyxgdbpwaexdbpzzeiltw
aycjtnfreyuemwadwzhkbfcu
tip:文本优先发布在CSDN上，知乎转发。有兴趣可以查看我的原文。thftglqrgqgetqqhvhfbzurspnszixabseqxarbkdvaj
jtmadivdtuvkqsidaftzpbvy
maabmbhmrnpixmekkkyroasbtj
|关于我们|Archiver|手机版|小黑屋|找最好·学BIM网（zhaozuihao.com；xuebim.com）
( 京ICP备2024101289号-1 )
发表于 2022-4-1 14:08:41
