-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (110 loc) · 4.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
<meta charset="utf-8">
<!-- The Viewer CSS -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<!-- Developer CSS -->
<style>
body {
margin: 0;
}
#MyConytainerDiv {
width: 100%;
height: 100%;
position: relative;
}
#MyViewerDiv {
width: 100%;
height: 100%;
margin: 0;
background-color: #F0F8FF;
}
.absolute {
position: absolute;
left: 10px;
z-index: 10;
}
#reference {
position: fixed;
bottom: 10px;
}
</style>
<title>Basic Forge Viewer Demo</title>
</head>
<body>
<!-- The Viewer will be instantiated here -->
<div id="MyConytainerDiv">
<div class="absolute">
<h1>This is the most basic Forge Viewer</h1>
<p>2 of the Core Extensions are also loaded in this app.</p>
<p id="reference">Reference:
<br>
<a href="https://forge.autodesk.com/blog/publicly-share-models-customized-viewer">https://forge.autodesk.com/blog/publicly-share-models-customized-viewer</a>
</p>
</div>
<div id="MyViewerDiv"></div>
</div>
<!-- The Viewer JS -->
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Developer JS -->
<script>
// this is the iframe URL that shows up when sharing a model embed on a page
var myRevitFile = 'https://myhub.autodesk360.com/ue2970ee2/shares/public/SH919a0QTf3c32634dcf7d90e49034aabd19?mode=embed'; // Revit file
var viewer;
function getURN(embedURLfromA360, onURNCallback) {
$.get({
url: embedURLfromA360.replace('public', 'metadata').replace('mode=embed', ''),
dataType: 'json',
success: function (metadata) {
if (onURNCallback) {
let urn = btoa(metadata.success.body.urn).replace("/", "_").replace("=", "");
onURNCallback(urn);
}
}
})
}
function getForgeToken(onTokenCallback) {
$.post({
url: myRevitFile.replace('public', 'sign').replace('mode=embed', 'oauth2=true'),
data: '{}',
success: function (oauth) {
if (onTokenCallback)
onTokenCallback(oauth.accessToken, oauth.validitySeconds);
}
});
}
let options = {
env: 'AutodeskProduction',
getAccessToken: getForgeToken
};
Autodesk.Viewing.Initializer(options, function onInitialized() {
var viewerDiv = document.getElementById('MyViewerDiv');
viewer = new Autodesk.Viewing.GuiViewer3D(viewerDiv, { extensions: ['Autodesk.VisualClusters', 'Autodesk.DocumentBrowser'] });
viewer.start();
getURN(myRevitFile, function (urn) {
let options = {
env: 'AutodeskProduction',
getAccessToken: getForgeToken
};
let documentId = 'urn:' + urn;
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess);
function onDocumentLoadSuccess(doc) {
// A document contains references to 3D and 2D viewables.
let viewables = doc.getRoot().search({
'type': 'geometry',
'role': '3d'
}, true);
if (viewables.length === 0) {
console.error('Document contains no viewables.');
return;
}
viewer.loadDocumentNode(doc, viewables[0], {})
}
});
});
</script>
</body>
</html>