我已经创建了一个项目以在查看器中显示3D模型（使用Autodesk forge）。在其顶部，我添加了一个场景来显示两个球体对象，如image中所示我想为球体对象添加鼠标单击事件–单击球体对象时，我需要弹出数据。因为我是初学者，所以我陷入了叠加场景的单击事件。这是我的项目的github链接，以供参考（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>我没有使用[[Autodesk Forge的经验，但是有很多使用Three.js的经验。因此，在高级别上，您将需要：
click的MyViewerDiv事件。