yiskang/index.html

## index.html
<!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>
	<!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>