使用Forge完成渲染
Forge是什么 為什么能夠渲染出來rvt模型
- Forge是由Autodesk開發(fā)的一套云端開發(fā)平臺和工具集。
- 在Forge平臺中，有一個名為"Model Derivative"的服務(wù)，它可以將包括RVT（Revit）在內(nèi)的多種BIM（Building Information Modeling）文件格式轉(zhuǎn)換為可在Web上瀏覽和渲染的格式。
- 具體來說，"Model Derivative"服務(wù)可以將RVT（Revit）文件轉(zhuǎn)換為SVF（Scalable Vector Graphics）格式。
- SVF是一種基于Web的輕量級3D模型表示格式，可以實現(xiàn)高性能的3D模型渲染和交互。通過將RVT文件轉(zhuǎn)換為SVF格式，可以在Web端使用Forge提供的Viewer組件加載和展示RVT模型
Forge與Autodesk的關(guān)系
- Autodesk是一家設(shè)計軟件公司，F(xiàn)orge可以視為Autodesk的云端擴(kuò)展
渲染步驟：
首先要注冊autodesk平臺，并創(chuàng)建項目 獲取自己的client_id與client_secret
官網(wǎng)地址：Autodesk Platform Services (formerly Forge)
如下圖：
配置postman環(huán)境?
下面我們演示通過postman上傳模型到Forge云端，然后配置Forge的js渲染出來
post環(huán)境文件：
BIM.postman collection.json
{
"info": {
"_postman_id": "aedeb5db-ab5a-4b0e-ba31-d329f6ef66ba",
"name": "Beijing-Workshop",
"schema": "https://schema.getpostman.com/json/collection/v2.0.0/collection.json",
"_exporter_id": "24665034"
},
"item": [
{
"name": "1獲取access token",
"event": [
{
"listen": "test",
"script": {
"exec": [
"var data = JSON.parse(responseBody);",
"postman.setEnvironmentVariable(\"access_token\", data.access_token);",
"postman.setEnvironmentVariable(\"expires_in\", data.expires_in);",
"postman.setEnvironmentVariable(\"token_type\", data.token_type);"
],
"type": "text/javascript"
}
}
],
"request": {
"method": "POST",
"header": [
{
"key": "Content-Type",
"value": "application/x-www-form-urlencoded"
}
],
"body": {
"mode": "urlencoded",
"urlencoded": [
{
"key": "client_id",
"value": "{{client_id}}",
"type": "text"
},
{
"key": "client_secret",
"value": "{{client_secret}}",
"type": "text"
},
{
"key": "grant_type",
"value": "client_credentials",
"type": "text"
},
{
"key": "scope",
"value": "data:read data:write bucket:create bucket:read",
"type": "text"
},
{
"key": "expires_in",
"value": "360000",
"type": "text"
}
]
},
"url": "{{base_domain}}/authentication/v1/authenticate"
},
"response": []
},
{
"name": "2創(chuàng)建的存儲桶（bucket）",
"event": [
{
"listen": "prerequest",
"script": {
"exec": [
"if (request.data) {",
" var requestData = JSON.parse(request.data);",
" postman.setEnvironmentVariable(\"bucketKey\", requestData.bucketKey);",
" postman.setEnvironmentVariable(\"bucketPolicy\", requestData.policyKey);",
"}"
],
"type": "text/javascript"
}
}
],
"request": {
"method": "POST",
"header": [
{
"key": "Authorization",
"value": "Bearer {{access_token}}"
},
{
"key": "Content-Type",
"value": "application/json"
}
],
"body": {
"mode": "raw",
"raw": "{\n \"bucketKey\":\"ac-persistent-bucket-test8\",\n \"policyKey\":\"persistent\"\n}"
},
"url": "{{base_domain}}/oss/v2/buckets"
},
"response": []
},
{
"name": "3 查看bucket是否創(chuàng)建成功",
"request": {
"method": "GET",
"header": [
{
"key": "Authorization",
"value": "Bearer {{access_token}}"
}
],
"url": {
"raw": "{{base_domain}}/oss/v2/buckets?limit=10",
"host": [
"{{base_domain}}"
],
"path": [
"oss",
"v2",
"buckets"
],
"query": [
{
"key": "limit",
"value": "10"
}
]
}
},
"response": []
},
{
"name": "4往bucket里放置object模型",
"event": [
{
"listen": "test",
"script": {
"exec": [
"if (responseCode.code === 200) {",
" var data = JSON.parse(responseBody);",
" postman.setEnvironmentVariable(\"urn\", data.objectId);",
" postman.setEnvironmentVariable(\"urnBase64\", window.btoa(data.objectId));",
" postman.setEnvironmentVariable(\"file_location\", data.location);",
"}",
""
],
"type": "text/javascript"
}
}
],
"request": {
"method": "PUT",
"header": [
{
"key": "Authorization",
"value": "Bearer {{access_token}}"
}
],
"body": {
"mode": "file",
"file": {
"src": "/C:/Users/ac135/Desktop/rvtText/data/textOne.rvt"
}
},
"url": "{{base_domain}}/oss/v2/buckets/{{bucketKey}}/objects/aggregate-1.rvt"
},
"response": []
},
{
"name": "5檢查對象模型是否成功上傳",
"request": {
"method": "GET",
"header": [
{
"key": "Authorization",
"value": "Bearer {{access_token}}"
}
],
"url": "{{base_domain}}/oss/v2/buckets/{{bucketKey}}/objects"
},
"response": []
},
{
"name": "6將模型在云端轉(zhuǎn)換成SVF格式",
"event": [
{
"listen": "test",
"script": {
"exec": [
"var data = JSON.parse(responseBody);",
"",
"var setEnvVar = function (tar, src) {",
" if (!src) {",
" return;",
" }",
" postman.setEnvironmentVariable(tar, src);",
"}",
"",
"if (data) {",
" if (data.urn) {",
" setEnvVar(\"urnBase64\", data.urn);",
" }",
"}"
],
"type": "text/javascript"
}
}
],
"request": {
"method": "POST",
"header": [
{
"key": "Authorization",
"value": "Bearer {{access_token}}"
},
{
"key": "Content-Type",
"value": "application/json"
},
{
"key": "x-ads-force",
"value": "true"
}
],
"body": {
"mode": "raw",
"raw": "{\n \"input\": {\n \"urn\": \"{{urnBase64}}\" \n },\n \"output\": {\n \"destination\": {\n \"region\": \"us\"\n },\n \"formats\": [\n {\n \"type\": \"svf\",\n \"views\":[\"2d\", \"3d\"]\n }]\n }\n}"
},
"url": "{{base_domain}}/modelderivative/v2/designdata/job"
},
"response": []
},
{
"name": "7檢查模型是否轉(zhuǎn)化完成",
"request": {
"method": "GET",
"header": [
{
"key": "Authorization",
"value": "Bearer {{access_token}}"
},
{
"key": "Accept",
"value": "application/vnd.api+json,application/json"
}
],
"url": "{{base_domain}}/modelderivative/v2/designdata/{{urnBase64}}/manifest"
},
"response": []
},
{
"name": "04-POST job",
"event": [
{
"listen": "test",
"script": {
"type": "text/javascript",
"exec": [
"var data = JSON.parse(responseBody);",
"",
"",
"if (data) {",
" if (data.urn) {",
" postman.setEnvironmentVariable(\"urnBase64\", data.urn);",
" }",
"}"
]
}
}
],
"request": {
"method": "POST",
"header": [
{
"key": "Authorization",
"value": "Bearer {{access_token}}"
},
{
"key": "Content-Type",
"value": "application/json"
},
{
"key": "x-ads-force",
"value": "true"
}
],
"body": {
"mode": "raw",
"raw": "{\n \"input\": {\n \"urn\": \"{{urnBase64}}\" \n },\n \"output\": {\n \"destination\": {\n \"region\": \"us\"\n },\n \"formats\": [\n {\n \"type\": \"svf\",\n \"views\":[\"2d\", \"3d\"]\n }]\n }\n}"
},
"url": "{{base_domain}}/modelderivative/v2/designdata/job"
},
"response": []
},
{
"name": "06-GET metadata",
"request": {
"method": "GET",
"header": [
{
"key": "Authorization",
"value": "Bearer {{access_token}}"
}
],
"url": "{{base_domain}}/modelderivative/v2/designdata/{{urnBase64}}/metadata"
},
"response": []
},
{
"name": "07-GET metadata/?:guid",
"request": {
"method": "GET",
"header": [
{
"key": "Authorization",
"value": "Bearer {{access_token}}"
},
{
"key": "Accept-Encoding",
"value": "gzip"
}
],
"url": "{{base_domain}}/modelderivative/v2/designdata/{{urnBase64}}/metadata/{{metadata_guid}}"
},
"response": []
},
{
"name": "08-GET :urn/metadata/:guid/properties",
"request": {
"method": "GET",
"header": [
{
"key": "Authorization",
"value": "Bearer {{access_token}}"
}
],
"url": "{{base_domain}}/modelderivative/v2/designdata/{{urnBase64}}/metadata/{{metadata_guid}}/properties"
},
"response": []
},
{
"name": "09-bucket details",
"event": [
{
"listen": "test",
"script": {
"type": "text/javascript",
"exec": [
"if (responseCode.code === 200 && responseBody) {",
" var data = JSON.parse(responseBody);",
" postman.setEnvironmentVariable(\"bucketKey\", data.bucketKey);",
"}"
]
}
}
],
"request": {
"method": "GET",
"header": [
{
"key": "Authorization",
"value": "Bearer {{access_token}}"
}
],
"url": "{{base_domain}}/oss/v2/buckets/{{bucketKey}}/details"
},
"response": []
},
{
"name": "12-GET formats",
"request": {
"method": "GET",
"header": [
{
"key": "Authorization",
"value": "Bearer {{access_token}}"
}
],
"url": "{{base_domain}}/modelderivative/v2/designdata/formats"
},
"response": []
}
]
}BIM.postman environment,.json
{
"id": "63cf71cf-bae6-411f-8e53-7319cf62fd9a",
"name": "Beijing-Workshop",
"values": [
{
"key": "base_domain",
"value": "https://developer.api.autodesk.com",
"type": "text",
"enabled": true
},
{
"key": "client_id",
"value": "xxxxxxxxx",
"type": "text",
"enabled": true
},
{
"key": "client_secret",
"value": "xxxxxxxxxxx",
"type": "text",
"enabled": true
},
{
"key": "urnBase64",
"value": "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6YWMtcGVyc2lzdGVudC1idWNrZXQtdGVzdDMvYWdncmVnYXRlLTEucnZ0",
"type": "text",
"enabled": true
},
{
"key": "access_token",
"value": "eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJjbGllbnRfaWQiOiJNbDhXdWJFdW52WVRaRk1za2xpQ200YnZCM0dkREVibyIsImV4cCI6MTUyNjExNDc3OCwic2NvcGUiOlsiZGF0YTpyZWFkIiwiZGF0YTp3cml0ZSIsImJ1Y2tldDpjcmVhdGUiLCJidWNrZXQ6cmVhZCJdLCJhdWQiOiJodHRwczovL2F1dG9kZXNrLmNvbS9hdWQvand0ZXhwNjAiLCJqdGkiOiIxMEV2aEVpcGhQMGszTm9FNkFOa2NnR1pKOVJUaUhDazA3dXhWMDFFc1R1M2twS2tVNnB4a2d5d3A5QXBFakpDIn0.prPXmCc9e1oxZcPFSEgPOlonHG8po16RdzDciborQlg",
"type": "text",
"enabled": true
},
{
"key": "guid",
"value": "57873878-6d98-b389-aa22-fead1053823f",
"type": "text",
"enabled": true
},
{
"key": "bucketKey",
"value": "xiaodong-persistent-bucket-test8",
"type": "text",
"enabled": true
},
{
"key": "guid",
"value": "e22cc916-cabd-4b97-9ccd-1ab1e613f707",
"type": "text",
"enabled": true
},
{
"key": "objectKey",
"value": "RevitNative.rvt",
"type": "text",
"enabled": true
},
{
"key": "expires_in",
"value": "3599",
"type": "text",
"enabled": true
},
{
"key": "token_type",
"value": "Bearer",
"type": "text",
"enabled": true
},
{
"key": "bucketPolicy",
"value": "persistent",
"type": "text",
"enabled": true
},
{
"key": "urn",
"value": "urn:adsk.objects:os.object:xiaodong-persistent-bucket-test8/workshop-2.rvt",
"type": "text",
"enabled": true
},
{
"key": "file_location",
"value": "https://developer.api.autodesk.com/oss/v2/buckets/xiaodong-persistent-bucket-test8/objects/workshop-2.rvt",
"type": "text",
"enabled": true
}
],
"_postman_variable_scope": "environment",
"_postman_exported_at": "2023-07-15T15:06:21.850Z",
"_postman_exported_using": "Postman/10.16.0"
}?client_secret與client_id記住改成自己的，然后就開始用postman請求上傳了
獲取access token
https://developer.api.autodesk.com/authentication/v1/authenticate
是用于獲取 Autodesk API 的訪問令牌（access token）的認(rèn)證
請求中包含必要的認(rèn)證信息
- 客戶端 ID（client_id）
- 客戶端密鑰（client_secret）?
-
grant_type：授權(quán)類型，通常為 "client_credentials"（客戶端憑據(jù)模式） -
scope：請求的權(quán)限范圍，用空格分隔多個權(quán)限（如 "data:read data:write"） - expires_in：設(shè)置合適的過期時間，單位毫秒
響應(yīng)結(jié)果：
創(chuàng)建 Autodesk Forge 中的存儲桶（bucket）?
https://developer.api.autodesk.com/oss/v2/buckets
請求中包含必要的認(rèn)證信息:
- Authorization：Authorization: Bearer {{access_token}}
-
bucketKey：存儲桶的唯一標(biāo)識符，它必須是全局唯一的?？梢允褂眯懽帜?、數(shù)字、連字符?-?和下劃線?_?來命名。長度應(yīng)在3到128個字符之間。 -
policyKey：存儲桶的訪問策略。默認(rèn)為?transient，表示存儲桶中的對象在30天后過期；?persistent，表示永久保存
?響應(yīng)結(jié)果：
?查看bucket是否創(chuàng)建成功
https://developer.api.autodesk.com/oss/v2/buckets
請求中包含必要的認(rèn)證信息:
- Authorization：Authorization: Bearer {{access_token}}
請求可選的參數(shù)信息:
-
limit：指定要返回的存儲桶數(shù)量的限制。例如，返回最多 10 個存儲桶，默認(rèn)為 10
?響應(yīng)結(jié)果：
?往bucket里放置object模型
https://developer.api.autodesk.com/oss/v2/buckets/{bucketKey}/objects/{objectName}
?請求中包含必要的認(rèn)證信息:
- Authorization：Authorization: Bearer {{access_token}}
- 選擇需要放置的rvt模型
- objectName：每個文件在存儲桶中都有一個唯一的標(biāo)識符
?響應(yīng)結(jié)果：
?檢查對象模型是否成功上傳到 Autodesk Forge 存儲桶（bucket）中
https://developer.api.autodesk.com/oss/v2/buckets/{{bucketKey}}/objects
請求中包含必要的認(rèn)證信息:
- Authorization：Authorization: Bearer {{access_token}}
- bucketKey：查詢的存儲桶的實際標(biāo)識符
?響應(yīng)結(jié)果：
將模型在云端轉(zhuǎn)換成SVF格式?
https://developer.api.autodesk.com/modelderivative/v2/designdata/job
請求中包含必要的認(rèn)證信息:
- Authorization：Authorization: Bearer {{access_token}}
-
input：指定要轉(zhuǎn)換的對象的 URN（Uniform Resource Name）。將 object_id 的 URN 作為輸入。 -
output：指定要生成的輸出格式和文件類型。在這里，你可以指定 SVF 格式作為輸出。例如，{"formats": [{"type": "svf", "views": ["2d", "3d"]}]}
備注：input中的urn是 objectId轉(zhuǎn)化為Base64格式
響應(yīng)結(jié)果：
檢查模型是否轉(zhuǎn)化完成
https://developer.api.autodesk.com/modelderivative/v2/designdata/{base64_urn}/manifest
請求中包含必要的認(rèn)證信息:
- Authorization：Authorization: Bearer {{access_token}}
- base64_urn：經(jīng)過 Base64 編碼的 URN
響應(yīng)結(jié)果：
?圖一表示進(jìn)度，圖二代表成功
瀏覽器渲染：
html渲染模板? ?將accessToken與documentId替換掉就行
<!DOCTYPE html>
<html>
<head>
<title>Autodesk Forge: 3D Viewer App Sample</title>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<!-- Third Party package -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Autodesk Forge Viewer files (IMPORTANT) -->
<link rel="stylesheet"
type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.51/viewer3D.min.js"></script>
<style>
/** Just simple CSS styling to make this page a little nicer **/
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- The Viewer will be instantiated here -->
<div id="MyViewerDiv"></div>
<!-- Custom script -->
<script>
var viewer;
var options = {
env: 'AutodeskProduction',
api: 'derivativeV2', // TODO: for models uploaded to EMEA change this option to 'derivativeV2_EU'
// getAccessToken: getForgeToken
accessToken: 'eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIiwicGkuYXRtIjoiN3ozaCJ9.eyJzY29wZSI6WyJkYXRhOnJlYWQiLCJkYXRhOndyaXRlIiwiYnVja2V0OmNyZWF0ZSIsImJ1Y2tldDpyZWFkIl0sImNsaWVudF9pZCI6IkpCcldjc3p3RVZCQ0dNMm5sY1J6N0tIZXZTbXpYUXM0IiwiYXVkIjoiaHR0cHM6Ly9hdXRvZGVzay5jb20vYXVkL2Fqd3RleHA2MCIsImp0aSI6ImJjWXBRalcwekh5aTZyUEd3QU1kNjdjamlWS1Q2dDZIYXNqcjFmOXR4OUExeGhZY05JWkhINVlibkdDeHVaTWoiLCJleHAiOjE2ODk5MTI0ODB9.JdpIFQAmWmsGc-t2g3tpU677G1Y11RwF4ndTxbwSa4hE5tOjYtLsMK7pR-jGGWIHAEHUkScvDixQWFIUG_o5UWpwhAdH7r06126QhGFNk_Wf1d8OvoDknqdKt9aXns_1xvxucOdPs3VkJ8BWH6j65B3fxZ7GB5jub3zeF7sGuYd1zBL9FdAcQ5_uQUBpEXh8uP4yZ_Y3yDe_mnTx2OxTMyRXsHw7quWjtxXDQXweGq0xDn3ENayOTkYnsru3_GJmGXUE4b-Zl1csHENJyyegkDqrfbaLbMeKagCWxY-RnCikmg80iWDqOd6KvIejRbQdqpjdQWz4i3Qx6Wnj6Lzf4w'
};
// var documentId = 'urn:' + getUrlParameter('urn');
var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6YWMtcGVyc2lzdGVudC1idWNrZXQtdGVzdDMvYWdncmVnYXRlLTEucnZ0'
// 初始化和加載文檔的部分
Autodesk.Viewing.Initializer(options, function onInitialized() {
// Find the element where the 3d viewer will live.
var htmlElement = document.getElementById('MyViewerDiv');
if (htmlElement) {
// Create and start the viewer in that element
viewer = new Autodesk.Viewing.GuiViewer3D(htmlElement);
viewer.start();
// Load the document into the viewer.
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
$('.adsk-viewing-viewer').css('height', '80%')
$('.adsk-viewing-viewer').css('width', '42%')
}
});
/**
* 加載模型的回調(diào)函數(shù)
*/
function onDocumentLoadSuccess(doc) {
// Load the default viewable geometry into the viewer.
// Using the doc, we have access to the root BubbleNode,
// which references the root node of a graph that wraps each object from the Manifest JSON.
var viewable = doc.getRoot().getDefaultGeometry();
if (viewable) {
viewer.loadDocumentNode(doc, viewable).then(function (result) {
console.log('Viewable Loaded!');
}).catch(function (err) {
console.log('Viewable failed to load.');
console.log(err);
}
)
}
}
/**
* 文檔加載失敗時的回調(diào)函數(shù)
*/
function onDocumentLoadFailure(viewerErrorCode) {
console.error('onDocumentLoadFailure() - errorCode: ' + viewerErrorCode);
jQuery('#MyViewerDiv').html('<p>Translation in progress... Please try refreshing the page.</p>');
}
</script>
</body>
</html>效果圖如下：
其他資源分享：
視頻教程：通過Forge十分鐘實現(xiàn)Web端3D模型瀏覽_嗶哩嗶哩_bilibili文章來源：http://www.zghlxwxcb.cn/news/detail-698267.html
有其他問題可以留言 或者私信?文章來源地址http://www.zghlxwxcb.cn/news/detail-698267.html
到了這里，關(guān)于【autodesk】瀏覽器中渲染rvt模型的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
