Skip to content

Instantly share code, notes, and snippets.

@yiskang
Last active August 23, 2023 06:56
Show Gist options
  • Save yiskang/c404af571ba4d631b5929c777503891e to your computer and use it in GitHub Desktop.
Save yiskang/c404af571ba4d631b5929c777503891e to your computer and use it in GitHub Desktop.
Autodesk Forge Viewer's AggregatedView demo
<!DOCTYPE html>
<html>
<head>
<title>Multiple 3D Viewer - Autodesk Forge AggregatedView</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="viewer"></div>
<!-- The Viewer JS -->
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<!-- Developer JS -->
<script>
function fetchForgeToken( callback ) {
fetch( 'https://127.0.0.1:8080/api/forge/oauth/token', {
method: 'get',
headers: new Headers({ 'Content-Type': 'application/json' })
})
.then( ( response ) => {
if( response.status === 200 ) {
return response.json();
} else {
return Promise.reject(
new Error( `Failed to fetch token from server (status: ${response.status}, message: ${response.statusText})` )
);
}
})
.then( ( data ) => {
if( !data ) return Promise.reject( new Error( 'Empty token response' ) );
callback( data.access_token, data.expires_in );
})
.catch( ( error ) => console.error( error ) );
}
function launchViewer( models ) {
if( !models || models.length <= 0 )
return console.error( 'Empty model input' );
const options = {
env: 'AutodeskProduction',
getAccessToken: fetchForgeToken
};
const options3d = {
viewerConfig: {
disableBimWalkInfoIcon: true
}
};
function loadManifest( documentId ) {
return new Promise(( resolve, reject ) => {
const onDocumentLoadSuccess = ( doc ) => {
doc.downloadAecModelData(() => resolve(doc));
};
Autodesk.Viewing.Document.load( documentId, onDocumentLoadSuccess, reject );
});
}
Autodesk.Viewing.Initializer( options, function() {
//get the viewer div
const viewerDiv = document.getElementById( 'viewer' );
//initialize the viewer object
const view = new Autodesk.Viewing.AggregatedView();
view.init( viewerDiv, options3d );
const viewer = view.viewer;
const tasks = [];
models.forEach( md => tasks.push( loadManifest( md.urn ) ) );
Promise.all(tasks)
.then( docs => Promise.resolve( docs.map( doc => {
const bubbles = doc.getRoot().search({type:'geometry', role: '3d'});
const bubble = bubbles[0];
if( !bubble ) return null;
return bubble;
})))
.then( bubbles => view.setNodes( bubbles ) );
});
}
const models = [
{ name: 'A.rvt', urn: 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6Zm9yZ2Utb3RnLWxrd2VqN3hwYmdwNjN4NGhsMzM1eTZtMjZvYWtnZ29mL0EucnZ0' },
{ name: 'B.rvt', urn: 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6Zm9yZ2Utb3RnLWxrd2VqN3hwYmdwNjN4NGhsMzM1eTZtMjZvYWtnZ29mL0IucnZ0' },
{ name: 'C.rvt', urn: 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6Zm9yZ2Utb3RnLWxrd2VqN3hwYmdwNjN4NGhsMzM1eTZtMjZvYWtnZ29mL0MucnZ0' },
{ name: 'D.rvt', urn: 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6Zm9yZ2Utb3RnLWxrd2VqN3hwYmdwNjN4NGhsMzM1eTZtMjZvYWtnZ29mL0QucnZ0' }
];
launchViewer( models.concat() );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment