将按钮添加到 Forge Viewer
Adding buttons to the Forge Viewer
我是一名开发人员,目前正在尝试向 Autodesk Forge Viewer 添加另一个按钮。我只能在 Autodesk 网站上找到一个解释这一点的示例,我觉得通过讨论或示例我会了解更多。
我目前有一个非常基本的查看器,它要求输入存储桶名称和模型,然后在上传模型后在查看器中显示带有所有通用按钮的模型,我该如何插入自己的按钮?
下面是我的基本查看器中使用的viewer.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/three.min.css"></script>
<link rel="stylesheet" href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.min.css" />
<script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"></script>
</head>
<body onload="initialize()">
<div id="viewer" style="position:absolute; width:90%; height:90%;"></div>
<script>
function authMe () { return ('eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJjbGllbnRfaWQiOiJJTzY5cVJGYk5kNGlVcWlnS3FnR2xzREdzSk1zQVNBYyIsImV4cCI6MTUzNjMzMDYwMiwic2NvcGUiOlsiZGF0YTpyZWFkIiwiZGF0YTp3cml0ZSIsImJ1Y2tldDpjcmVhdGUiLCJidWNrZXQ6cmVhZCJdLCJhdWQiOiJodHRwczovL2F1dG9kZXNrLmNvbS9hdWQvand0ZXhwNjAiLCJqdGkiOiJ6Q0U5R0FMOGFHNWhOdlFFSjhqeExFZDVqTjc1MXV1UjA0UENIME9mYzRRT0k5b2pkRXhyeUE1MmJwdHdsdU5XIn0.FM1P50Ldu1H1LygYXwtP77Kr3128xFZKMgoaBmtXqF0') ; }
function initialize () {
var options ={
'document' : "urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6Zm9yZ2UtY3NoYXJwLXNhbXBsZS1hcHAtaW82OXFyZmJuZDRpdXFpZ2txZ2dsc2Rnc2ptc2FzYWMvbXktZWxlcGhhbnQub2Jq",
'env': 'AutodeskProduction',
'getAccessToken': authMe
} ;
var viewerElement =document.getElementById ('viewer') ;
//var viewer =new Autodesk.Viewing.Viewer3D (viewerElement, {}) ; / No toolbar
var viewer =new Autodesk.Viewing.Private.GuiViewer3D (viewerElement, {}) ; // With toolbar
Autodesk.Viewing.Initializer (options, function () {
viewer.initialize () ;
loadDocument (viewer, options.document) ;
}) ;
}
function loadDocument (viewer, documentId) {
// Find the first 3d geometry and load that.
Autodesk.Viewing.Document.load (
documentId,
function (doc) { // onLoadCallback
var geometryItems =[] ;
geometryItems =Autodesk.Viewing.Document.getSubItemsWithProperties (
doc.getRootItem (),
{ 'type' : 'geometry', 'role' : '3d' },
true
) ;
if ( geometryItems.length <= 0 ) {
geometryItems =Autodesk.Viewing.Document.getSubItemsWithProperties (
doc.getRootItem (),
{ 'type': 'geometry', 'role': '2d' },
true
) ;
}
if ( geometryItems.length > 0 )
viewer.load (
doc.getViewablePath (geometryItems [0])//,
//null, null, null,
//doc.acmSessionId /*session for DM*/
) ;
},
function (errorMsg) { // onErrorCallback
alert("Load Error: " + errorMsg) ;
}//,
//{
// 'oauth2AccessToken': authMe (),
// 'x-ads-acm-namespace': 'WIPDM',
// 'x-ads-acm-check-groups': 'true',
//}
) ;
}
</script>
</body>
</html>
在这里您可以找到创建基本骨架的示例,我们在大多数示例中使用这些骨架来将按钮添加到查看器的 UI 工具栏。
我是一名开发人员,目前正在尝试向 Autodesk Forge Viewer 添加另一个按钮。我只能在 Autodesk 网站上找到一个解释这一点的示例,我觉得通过讨论或示例我会了解更多。
我目前有一个非常基本的查看器,它要求输入存储桶名称和模型,然后在上传模型后在查看器中显示带有所有通用按钮的模型,我该如何插入自己的按钮?
下面是我的基本查看器中使用的viewer.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/three.min.css"></script>
<link rel="stylesheet" href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.min.css" />
<script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"></script>
</head>
<body onload="initialize()">
<div id="viewer" style="position:absolute; width:90%; height:90%;"></div>
<script>
function authMe () { return ('eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJjbGllbnRfaWQiOiJJTzY5cVJGYk5kNGlVcWlnS3FnR2xzREdzSk1zQVNBYyIsImV4cCI6MTUzNjMzMDYwMiwic2NvcGUiOlsiZGF0YTpyZWFkIiwiZGF0YTp3cml0ZSIsImJ1Y2tldDpjcmVhdGUiLCJidWNrZXQ6cmVhZCJdLCJhdWQiOiJodHRwczovL2F1dG9kZXNrLmNvbS9hdWQvand0ZXhwNjAiLCJqdGkiOiJ6Q0U5R0FMOGFHNWhOdlFFSjhqeExFZDVqTjc1MXV1UjA0UENIME9mYzRRT0k5b2pkRXhyeUE1MmJwdHdsdU5XIn0.FM1P50Ldu1H1LygYXwtP77Kr3128xFZKMgoaBmtXqF0') ; }
function initialize () {
var options ={
'document' : "urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6Zm9yZ2UtY3NoYXJwLXNhbXBsZS1hcHAtaW82OXFyZmJuZDRpdXFpZ2txZ2dsc2Rnc2ptc2FzYWMvbXktZWxlcGhhbnQub2Jq",
'env': 'AutodeskProduction',
'getAccessToken': authMe
} ;
var viewerElement =document.getElementById ('viewer') ;
//var viewer =new Autodesk.Viewing.Viewer3D (viewerElement, {}) ; / No toolbar
var viewer =new Autodesk.Viewing.Private.GuiViewer3D (viewerElement, {}) ; // With toolbar
Autodesk.Viewing.Initializer (options, function () {
viewer.initialize () ;
loadDocument (viewer, options.document) ;
}) ;
}
function loadDocument (viewer, documentId) {
// Find the first 3d geometry and load that.
Autodesk.Viewing.Document.load (
documentId,
function (doc) { // onLoadCallback
var geometryItems =[] ;
geometryItems =Autodesk.Viewing.Document.getSubItemsWithProperties (
doc.getRootItem (),
{ 'type' : 'geometry', 'role' : '3d' },
true
) ;
if ( geometryItems.length <= 0 ) {
geometryItems =Autodesk.Viewing.Document.getSubItemsWithProperties (
doc.getRootItem (),
{ 'type': 'geometry', 'role': '2d' },
true
) ;
}
if ( geometryItems.length > 0 )
viewer.load (
doc.getViewablePath (geometryItems [0])//,
//null, null, null,
//doc.acmSessionId /*session for DM*/
) ;
},
function (errorMsg) { // onErrorCallback
alert("Load Error: " + errorMsg) ;
}//,
//{
// 'oauth2AccessToken': authMe (),
// 'x-ads-acm-namespace': 'WIPDM',
// 'x-ads-acm-check-groups': 'true',
//}
) ;
}
</script>
</body>
</html>
在这里您可以找到创建基本骨架的示例,我们在大多数示例中使用这些骨架来将按钮添加到查看器的 UI 工具栏。