如何显示覆盖在 3D 模型上的球体对象的鼠标单击事件的弹出数据（使用 Autodesk Forge）

Question

我创建了一个项目来在查看器中显示 3d 模型（使用 Autodesk forge）。在它之上，我添加了一个场景来显示两个球体对象，如 image 中所示我想为球体对象添加鼠标单击事件——单击球体对象时，我需要弹出数据。作为初学者，我卡在了叠加场景的这个点击事件中。这是我项目的githublink供参考(https://github.com/vennilabalaraman/SphereClick)。如果我为此找到解决方案，那将很有帮助。提前致谢。这是我的 javascript 和 html 代码

let viewer = null;

function setupViewer(divId, documentId, tokenFetchingUrl, exrtensionArray, AccessToken) {
    console.log('Entered setupViewer');
    let options = {
        env: 'AutodeskProduction',
        getAccessToken: (onGetAccessToken) => {
            fetch(tokenFetchingUrl)
                .then(response => response.json())
                .then(data => {
                    let accessToken = AccessToken;
                    let expireTimeSeconds = data["expires_in"];
                    onGetAccessToken(accessToken, expireTimeSeconds);
                })
        }
    };

    var config3d = {extensions: exrtensionArray};
    Autodesk.Viewing.Initializer(options, () => {
        viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById(divId), config3d);
        viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT,()=>{
     //Create Custom Geometry
     //alert("Under Custom Geom");
     var geom = new THREE.SphereGeometry(0.05, 4, 5);
     var material = new THREE.MeshBasicMaterial({ color: 0xFF0000 });
     var sphereMesh = new THREE.Mesh(geom, material);
     var sphereMesh1 = new THREE.Mesh(geom, material);
     //sphereMesh1.position.set(11, 10, 30);
        sphereMesh.position.x = -5; sphereMesh.position.y = -0.8; sphereMesh.position.z = 1.8;
     sphereMesh1.position.x = -3.5; sphereMesh1.position.y = -1.5; sphereMesh1.position.z = 1.8;
     //Create Overlay scene

     if (!viewer.overlays.hasScene('my_scene')) {
      viewer.overlays.addScene('my_scene');
        }
        viewer.overlays.addMesh([sphereMesh], 'my_scene');
        viewer.overlays.addMesh([sphereMesh1], 'my_scene');
    });
        viewer.start();
        Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
      });

      function onDocumentLoadSuccess(doc) {
        var viewables = doc.getRoot().getDefaultGeometry();
        viewer.loadDocumentNode(doc, viewables).then(i => {
          // documented loaded, any action?
        });
      }
      
      function onDocumentLoadFailure(viewerErrorCode) {
        console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
      }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no"/>
    <meta charset="UTF-8">

    <!-- Autodesk Forge Viewer files -->
    <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>


    <!-- Developer CSS -->
    <link rel="stylesheet" href="./assets/css/main.css"/>
    <!-- Developer JS -->
    <script src="app.js"></script>
    <script src="./assets/js/extensions/markupExt.js"></script>

</head>

<body>
    <div id="MyViewerDiv"></div>
    <script>
        let divId = "MyViewerDiv";
        let documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bmlzaGFudF90ZXN0Ml8yMDIwXzA0XzMvZ2F0ZWhvdXNlLm53ZA';
        let tokenFetchingUrl = "https://9irt90dm6j.execute-api.us-east-1.amazonaws.com/prod";
        let extensionArray = ['MarkUp3DExtension'];
        let AccessToken = "";
        setupViewer(divId, documentId, tokenFetchingUrl, extensionArray, AccessToken);
    </script>
</body>
</html>

Answer 1

我没有使用 Autodesk Forge 的经验，但使用 Three.js 的经验很多。所以在高层次上你需要：

订阅 MyViewerDiv 的 click 事件。
对场景执行光线投射以拾取鼠标光标下方的对象：offial docs, another tutorial。
如果有交集，请使用专用库显示弹出窗口。讨论了一些 in this question。

Answer 2

我建议尝试最新的 SceneBuilder API Viewer - 您将能够附加自己的几何图形并享受气泡视图（文档模型）开箱即用的所有功能例如选择、突出显示（翻转）和使用您自己的几何图形隔离等...

const sphereGeometry = new THREE.BufferGeometry().fromGeometry(new THREE.SphereGeometry(5, 8, 8));
const sphereMaterial = new THREE.MeshPhongMaterial({ color: new THREE.Color(0, 1, 0) });
const sphereTransform = new THREE.Matrix4().compose(
  new THREE.Vector3(0, 0, 0),
  new THREE.Quaternion(0, 0, 0, 1),
  new THREE.Vector3(1, 1, 1)
);
const sphereFragId = modelBuilder.addFragment(sphereGeometry, sphereMaterial, sphereTransform);
modelBuilder.changeFragmentsDbId(sphereFragId, 12345); // Use this dbId in Viewer APIs as usual

请参阅本教程here 开始......

如何显示覆盖在 3D 模型上的球体对象的鼠标单击事件的弹出数据（使用 Autodesk Forge）

How to display a pop up data on mouse click event for the sphere objects which is overlayed on the 3D model(using Autodesk forge)

javascript

html

three.js

autodesk-forge

autodesk-viewer