如何从查看器中的选定组件获取 xyz 坐标

Question

var viewer;
 var options = {
     env: 'AutodeskProduction',
     api: 'derivativeV2',  // for models uploaded to EMEA change this option to 'derivativeV2_EU'
     getAccessToken: function(onTokenReady) {
         var token = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJjbGllbnRfaWQiOiJUN0dBbWViNGgzVU04bE1wUm10MTJHT2M1dXYzRkI4aCIsImV4cCI6MTU3ODQ2Mzc4Nywic2NvcGUiOlsidmlld2FibGVzOnJlYWQiXSwiYXVkIjoiaHR0cHM6Lyp9hdXRvZGVzay5jb20vYXVkL2p3dGV4cDYwIiwianRpIjoiRE1jWTVDVUVqNmo5QkdjM0F2N1VFN1NKdWZvZ0dQV1pIbUlrdUJPTEIzczJ4Ym1YakpnVVZyZzZVZnZhZDA3UyJ9.j3T1cThwAs9p8LNasuR7S8WXlGqR1lU6kX-RY8XW5QU';
         var timeInSeconds = 36000; // Use value provided by Forge Authentication (OAuth) API
         onTokenReady(token, timeInSeconds);
     }
 };

 Autodesk.Viewing.Initializer(options, function() {

     var htmlDiv = document.getElementById('forgeViewer');
     viewer = new Autodesk.Viewing.Private.GuiViewer3D(htmlDiv);
     //viewer = new Autodesk.Viewing.Private.GuiViewer3D(htmlDiv);
     var startedCode = viewer.start();
     if (startedCode > 0) {
         console.error('Failed to create a Viewer: WebGL not supported.');
         return;
     }

     console.log('Initialization complete, loading a model next...');

 });

 var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dDdnYW1ljYjRoM3VtOGxtcHJtdDEyZ29jNXV2M2ZiOGhfdHV0b3JpYWxfYnVja2V0L1QwMDZfMTktQVJDLVpaLVlZWS1NMy1XRC0wMDUxLnJ2dA';
 Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);

 function onDocumentLoadSuccess(viewerDocument) {
     var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
     viewer.loadDocumentNode(viewerDocument, defaultModel);
 }

 function onDocumentLoadFailure() {
     console.error('Failed fetching Forge manifest');
 }

 $(document ).ready(function() {
  $viewer = jQuery('#forgeViewer');
  
  // After a mouse click on 3D viewport, populate X/Y/Z of the intersection
     $viewer.on('click', function(ev) {
            
         if(viewer.getSelection()){
          
                mainviewer = new Autodesk.Viewing.GuiViewer3D(  document.getElementById('forgeViewer') );

                // Other codes ...
                const selSet = mainviewer.getSelection();
                const targetElem = selSet[0];

                const model = mainviewer.model;
                const instanceTree = model.getData().instanceTree;
                const fragList = model.getFragmentList();

                let bounds = new THREE.Box3();

                instanceTree.enumNodeFragments( dbId, ( fragId ) => {
                    let box = new THREE.Box3();
                    fragList.getWorldBounds( fragId, box );
                    bounds.union( box );
                }, true );

                const position = bounds.center();

            }
        })
        
 });

<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
    <meta charset="utf-8">
    <script src="js/jquery-2.2.4.js"></script>
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
    
    <style>
        body {
            margin: 0;
        }
        #forgeViewer {
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: #F0F8FF;
        }
       
    </style>
</head>
<body>
    <div id="forgeViewer"></div>
<div>
</body>

我试过 const bounds = document.getElementById('forgeViewer').getBoundingClientRect();用于获取边界，但它 return me x =0 and y=0 for any selected component in viewer. 我只使用 chrome，不确定为什么它在这里不起作用....任何其他获取坐标的方法实际上我的目的是为所选组件显示一个弹出窗口 window 以添加一些自定义数据。

Answer 1

您提到的代码片段仅适用于 HTML DOM。它将为您提供 ID 为 forgeViewer 的 DOM 元素的 DOM 矩形元素，并且不能用于检索查看者的 3d/2d 世界中的信息。请改用查看器 API。

const viewer = new Autodesk.Viewing.GuiViewer3D(  document.getElementById('forgeViewer') );

// Other codes ...

const selSet = viewer.getSelection();
const targetElem = selSet[0];

const model = viewer.model;
const instanceTree = model.getData().instanceTree;
const fragList = model.getFragmentList();

let bounds = new THREE.Box3();

instanceTree.enumNodeFragments( dbId, ( fragId ) => {
    let box = new THREE.Box3();
    fragList.getWorldBounds( fragId, box );
    bounds.union( box );
}, true );

const position = bounds.center(); //!<<< This is the selected object's position in the viewer world

Answer 2

var _selectedModel = viewer.getAggregateSelection()[0].model;

这用于在查看器中查找所选对象的模型。您也可以在事件侦听器中执行此操作。例如，您可以使用 AGGREGATE_SELECTION_CHANGED_EVENT。然后您可以调用 _selectedModel 并访问坐标、全局偏移、4 维矩阵和更多功能。

_selectedModel.getGlobalOffset()

例如，这将为您提供 x、y、z 坐标。

如何从查看器中的选定组件获取 xyz 坐标

How to get xyz coordinates from a selected component in viewer

autodesk-forge

autodesk-viewer