使用新 AggregatedView 时出现问题，我需要这个 class 的用法示例

Question

我正在尝试在查看器中加载 3 个不同的模型，然后访问每个模型中的属性以选择零件...

观众总是在寻找第一个加载的模型，我需要改变这一点。读到这篇文章，我发现了新的 AggregatedView class.

根据文档我得到了这个：

var view = new Autodesk.Viewing.AggregatedView();
const bubbleNodes = [];

function loadModels(docs) {

    const options = {
        env: 'AutodeskProduction',
        getAccessToken: getForgeToken
    };

    // Initialize and load a document.
    Autodesk.Viewing.Initializer(options, function onInitialized() {
        // Get the Viewer DIV
        var htmlDiv = document.getElementById('forgeViewer');

        // Initialize the AggregatedView view
        view.init(htmlDiv, options).then(function () {

            console.log(docs)

            for (let i = 0; i < docs.length; i++) {
                Autodesk.Viewing.Document.load(docs[i], (doc) => {
                    // Set the nodes from the doc
                    var nodes = doc.getRoot().search({ type: 'geometry' });
                    bubbleNodes.push(nodes[0]);
                }, (errorCode, errorMsg, messages) => {
                    // Do something with the failed document.
                    // ...
                    console.log(errorCode, errorMsg, messages)
                });
            }
            view.setNodes(bubbleNodes);
        });
    });
}

我总是在错误回调中得到这个 --> 5 'Error: 404 (Not Found)' 404

我不知道我做错了什么。

Answer 1

Autodesk.Viewing.Document.load 是一个异步任务，您不能像上面发布的那样使用它。那么，开始吧：

<!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>

参考：https://gist.github.com/yiskang/c404af571ba4d631b5929c777503891e

使用新 AggregatedView 时出现问题，我需要这个 class 的用法示例

Problems working with new AggregatedView, I need an usage example of this class

autodesk-viewer

autodesk-forge