CODEWITHSUNDEEP
autodesk-forgeautodesk-viewer
Ashish Gupta
Ashish Gupta

Reputation: 3

How to capture mouse-over or hover event in Autodesk Forge Viewer?

I am working on a POC for a client where I have proposed to use Autodesk Forge platform for displaying and interacting with 3D illustrations on Web.

I was able to design an admin panel where admin users can tag different parts inside the illustrations and when end users click on the tagged parts we either navigate to illustrations of that part or display the stored information for that part. For this I used Autodesk.Viewing.SELECTION_CHANGED_EVENT.

Another major requirement is to display part name and some other info on hovering over the parts inside the image. I am not able to find any event to bind to for Mouse-over or hover over a part inside the model.

P.S. Pointing me to the documentation where I can find information for other supported events will be very helpful for my future use.

Upvotes: 0

Views: 1059

Answers (3)

Wesley Zloza
Wesley Zloza

Reputation: 1

For what it's worth Matt H's answer isn't incorrect... Version 7 of the Autodesk Viewer API does have the constant Autodesk.Viewing.OBJECT_UNDER_MOUSE_CHANGED (see docs) and a corresponding event. This constant, however, is missing a type definition so the TypeScript Language Server will list an error - it doesn't know that it exists at runtime. I used //@ts-expect-error to mute the warning and added comments to my code explaining the issue.

It is also important to note that this event will only fire if highlighting in the viewer is enabled. I didn't find this requirement in Autodesk's documentation but observed it myself and confirmed it by reading the source (viewer3D.min.js) in the browser.

Edit (2024-05-02): The latest version of @types/forge-viewer does contain Autodesk.Viewing.OBJECT_UNDER_MOUSE_CHANGED. I believe my tsconfig.json was initially referencing an older version that was installed from another dependency. I fixed this by specifying forge-viewer and three as types in my compiler options.

Upvotes: 0

Matt H
Matt H

Reputation: 640

You're able to utilize the object-under-mouse-changed event. It passes back a 'dbid' which can be used to identify the object that is being hovered over. When it is not being hovered (the canvas is the hover object), it appears to return -1.

Here is an example for adding the event listener (assuming your viewer is "viewer"). Simply logging items that may be of interest to you, and showing how to get the name from the dbId.

viewer.addEventListener(Autodesk.Viewing.OBJECT_UNDER_MOUSE_CHANGED,function(e){doStuff(e)});

function doStuff(e){
  console.log(e); /*To see everything passed back by the event.*/
  console.log(e.dbId); /*To get the internal ID of the object being hovered*/
  /*To get the object name from the dbId.  Note that this also includes the handle in the return of the name.*/
  viewer.getProperties(e.dbId, function(displayProperties){
   console.log(displayProperties.name); 
  });
}

Upvotes: 1

Zhong Wu
Zhong Wu

Reputation: 2024

ASAIK, there is no direct event like MOUSE_OVER_EVENT to return the hovering over element, but you can use the mousemove event and calculate the dbid of the hit element, here is a blog post you can refer, hope it helps and let me know if any other questions.

Upvotes: 0

Related Questions