如何顯示覆蓋在 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)
問題描述
我創建了一個項目來在查看器中顯示 3d model（使用 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>
2 個解決方案
解決方案1
0 2020-05-18 11:59:23
解決方案2
0 已采納 2020-05-19 03:17:36
我建議嘗試 Viewer 的最新SceneBuilder API - 你將能夠 append 你自己的幾何圖形並享受帶有氣泡視圖（文檔模型）的所有開箱即用的功能，例如選擇，突出顯示（翻轉）和用你自己的幾何體隔離等......
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
請在此處查看本教程以開始使用...
Autodesk forge標記3D錯誤TypeError：$（…）.tooltip不是函數
[英]Autodesk forge markup 3D error TypeError: $(…).tooltip is not a function
使用CSS 3D變換從DOM對象接收轉換的鼠標事件數據
[英]Receiving transformed mouse event data from DOM objects with a CSS 3D transform
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.