Create Annotation by adding custom name

(Kunsinha79) #1

Hi All,
I am trying to write an application where I am using iframe based 3d model loading. After that I want to create custom annotations. On click of the model, I am capturing the positions and executing create annotation. If I execute create annotation method from within the model click event then it worked fine. But if I want to do the following:

  1. Capture info.3dposition on click of model
  2. Pass these positions to a form outside of the iframe
  3. On submit of that form (which will have name parameter), I am trying to execute createannotation.
  4. I have written the form handler within api.start callback. It gets all form parameters but does not create annotation rather reloads the model.

It is an important part of an assignment that I have taken up and am kind of stuck. I will really be thankful for help!

(Paul Sketch) #2 is the sample you want to study as it show all those things.
Be sure to check the devtools console.

(Kunsinha79) #3

Hi Paul,
I am creating multiple annotations on the fly but the annotation bar shows only one. I read annotation data from api and then fire createAnnotation. Ithe loop runs twice but only one annotation is shown. Any lead will be helpful

(Paul Sketch) #4

Do you have sample code and link model so that I can reproduce ?
(a codepen or a jsfiddle for example)

(Kunsinha79) #5

I have resolved this but the hotspots are not visible on viewer load. Once, i click on the annotation on annotation bar then all hotspots are visible.
Also, unable to set colors of the hotspots

(Paul Sketch) #6

Unfortunately seems there is a bug on the annotation create that doesn’t request refresh, when set/updated.
Until the fix is in production, you can force a refresh with a setMatrix (even with the same matrix) or setMaterial call

Api doesn’t have a way to set hotspot colors currently.

(Kunsinha79) #7

Thank you paul!
Let me try this. Also, can I create a hotspot on the fly. I want to create a hotspot at the place where I clicked. Will setmaterial help in that too?
Do you have any sample of setmatrix or setmaterial use?

(Paul Sketch) #8

“click” event will give you the 3D coordinates you need.

api.getMatrix(instanceid, function(instanceID, matrix){
    api.setMatrix(instanceID, matrix, function(){console.log("forced refresh")})

Documentation here: