1

i'm looking for some guidance on how best to display real world coordinates when i click on the screen or select a model element in the forge viewer.

i have had a look around and done some research but with little success, however i have found this post that helps however the coordinate read out seems to be completely diffent to the cordantes that i would expect to see.

https://github.com/apprentice3d/ForgeViewerExtensions/blob/master/assets/js/extensions/transformationExplorer.js

As you can tell i dont know much about the viewer geo extension, any guidance on this would be great.

Thanks Tom.

Tom Denby
  • 33
  • 5

2 Answers2

1

If it's enough to get the world coordinates of a point you clicked on in the viewer, you can simply use the viewer's clientToWorld method, for example like so:

viewer.container.addEventListener('click', function (ev) {
    const result = viewer.clientToWorld(ev.clientX, ev.clientY);
    if (result) {
        console.log(result.point);
    }
});
Petr Broz
  • 8,891
  • 2
  • 15
  • 24
  • thanks petr i will look into this option as well. – Tom Denby Aug 06 '21 at 17:34
  • - i have been looking at this and i wanted to check it was returning the coordinates for the location that i was clicking, to do this i followed this tutorial [link](https://forge.autodesk.com/en/docs/viewer/v7/developers_guide/advanced_options/custom-geometry/) the click location is not the location that i actually clicked if that makes sense. Image[link](https://1drv.ms/u/s!AiWERW5jOGxXivwitJ94iVkF4IE5sg?e=6p7IKq). the arrow is the click and as you can see the sphere is in a different location. do you know what could be causing this ? – Tom Denby Aug 11 '21 at 07:29
  • 'viewer.container.addEventListener('click', function (ev) { const result = viewer.clientToWorld(ev.clientX, ev.clientY); if (result) {console.log(result.point); var geom = new THREE.SphereGeometry(10, 8, 8); var material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); var sphereMesh = new THREE.Mesh(geom, material); sphereMesh.position.set(result.point.x, result.point.y, result.point.z); if (!viewer.overlays.hasScene('custom-scene')) { viewer.overlays.addScene('custom-scene'); } viewer.overlays.addMesh(sphereMesh, 'custom-scene'); } });'' – Tom Denby Aug 11 '21 at 07:36
  • I think this might have something to do with how your viewer canvas is offset from the top-left corner of the webpage. Notice that the different between where you clicked and where the sphere appeared is very similar to how far the viewer canvas is from the top-left corner or the webpage. – Petr Broz Aug 11 '21 at 07:41
  • While one would expect that retrieving mouse coordinates within an HTML element would be straightforward, unfortunately that's not the case (as you can see [here](https://stackoverflow.com/questions/17130395/real-mouse-position-in-canvas) for example). – Petr Broz Aug 11 '21 at 07:43
  • i made the viewer canvas the full width and reduced the Y position by the ribbon px width 'const result = viewer.clientToWorld(ev.clientX, ev.clientY - 52);' this worked a treat.. im sure theres a dynamic way of accessing the ribbon width but im not good enough to extract that data. thank you for your help – Tom Denby Aug 11 '21 at 19:42
0

i managed to get it to work by using NOP_VIEWER.model.getData().globalOffset

Example

this.infoX.innerText = nodeData.position.x + NOP_VIEWER.model.getData().globalOffset.x;

Tom Denby
  • 33
  • 5