0

I have just started using model-viewer and it fits my use case perfectly. However when I visited the section for annotation no where could I find how can I add annotations dynamically. I want my users to have the ability to add annotations by themselves.

Model-Viewer: https://modelviewer.dev/ Docs: https://modelviewer.dev/docs/

Angad_Srivastav
  • 13
  • 3
  • setup an array holding config objects for your annotations (which a user can add/remove from, from the UI), and then map them within the model-viewer tags. Perhaps setup a codesandbox with the mode-viewer already configured within the context you wish to use it. There we can help a little easier without having to do the leg work – GBourke Jan 30 '22 at 11:54
  • https://modelviewer.dev/examples/annotations/index.html – GBourke Jan 30 '22 at 11:56
  • Thanks for the input. I just need to know how I can obtain a data-position and data-normal values when a user clicks on the model. I already know how I can show annotations. Unfortunately I am unable to get the position value to show it at the right place – Angad_Srivastav Jan 30 '22 at 12:04
  • Are you looking to transform a client x and y hit position, to a target on the model? Take a look at this example: https://modelviewer.dev/examples/stagingandcameras/#panning it uses positionAndNormalFromPoint(clientX, clientY) function. Try add an onclick event, which grabs the mouse pointer position and passes it to this function. It returns data-position and data-normal attributes, which you should be able to use to configure those attributes on an annotation – GBourke Jan 30 '22 at 12:18
  • I had tried that but for some reason, it just didn't work. It kept returning null for me. Here is the code: const getCord = async (event) => { console.log(event.screenX, event.screenY) const modelViewer = document.querySelector('#model-viewer') const vals = modelViewer.positionAndNormalFromPoint( event.screenX, event.screenY ) console.log(vals) } – Angad_Srivastav Jan 30 '22 at 12:29
  • if you log event.screenX, do you actually get a value? usually its clientX – GBourke Jan 30 '22 at 12:33
  • I did get a value. Here is the codeSandbox link: https://codesandbox.io/s/silly-proskuriakova-zyg8o?file=/src/App.js – Angad_Srivastav Jan 30 '22 at 12:54
  • Ok. I got it to work. ClientX and Y does give me what I want. Thanks, man. I appreciate your help. +1 – Angad_Srivastav Jan 30 '22 at 12:56
  • https://codesandbox.io/s/lingering-tree-d41cr?file=/src/App.js here is some hotspotting – GBourke Jan 30 '22 at 13:32

0 Answers0