javascript - 如何为覆盖在 3D 模型上的球体对象显示鼠标单击事件的弹出数据(使用 Autodesk forge)
问题描述
我创建了一个项目以在查看器中显示 3d 模型(使用 Autodesk forge)。在它之上,我添加了一个场景来显示两个球体对象,如图所示我 想为球体对象添加一个鼠标单击事件——在单击球体对象时,我需要一个弹出数据。由于我是初学者,因此我陷入了叠加场景的单击事件中。这是我的项目的 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>
解决方案
推荐阅读
- c# - 如何创建将在列表视图中搜索 JSON 的搜索栏
- android - 发送存储在内部存储器中的文件附件
- angular - 使用带有 ControlValueAccessor 的自定义组件时从未调用过 onTouched
- ggplot2 - 在 R 中使用 y 轴“计数”将百分比标签添加到条形图
- c++ - clCloneKernel 导致分段错误
- python - Mac 上的人脸识别系统
- maximo - 如何使用 Python 在 IBM Maximo Asset Monitor 中创建自定义函数?是否有 SDK?
- .net - .Net Core 3.1 在数据库中每行添加多个图像
- reactjs - TextArea 中的 React Typescript 错误:类型“字符串”不可分配给类型编号
- python - 当在 python 中固定不同的列值时,想要计算列中的值