How to get camera-target and camera-orbit values for annotations

[adeshgg]

How to get camera-target and camera-orbit values for annotations

I was trying to re-create this zoom-in effect, once the annotation is clicked. From the documentation, on my custom model
https://modelviewer.dev/examples/annotations/index.html#cameraViews

But how to get those perfect data-target and data-orbit attributes, set for my own annotations.

I have added the annotations, as required using the editor.
Is there a way to find these values for target and orbit using the editor?

[elalish]

Indeed, this is great feature of our editor! Simply go to the Hotspots section of the second tab and you can add them by clicking. When you download the scene, the HTML is all built for you, ready for further customization.

[adeshgg]

Thanks! Will try to make it today 🚀 🚀 🚀

[rayhan-evan]

@adesh02092000 , were you able to do it later? If so, then could you please share a sample code snippet? Will be so grateful.

[rayhan-evan]

@elalish , Could you please enlighten me to do this interaction (Camera Orbit/Target Changing) after loading the model in AR? I am facing an issue to do that.

[jzaburunov]

@elalish Hi. Tried to go for option 1 with using editor, but I don't see camer-target setting in the snippet, could you say me where to find it, please?

[khumam]

@jzaburunov you can use data-position as a camera target, it is the same way

[devmadan]

hey could you help me out with same above issue?

[k1mo-rubik]

code:

const modelViewer = document.querySelector("#hotspot-camera-view-demo");
  const annotationClicked = (annotation) => {
    let dataset = annotation.dataset;
    modelViewer.cameraTarget = dataset.position;
  

  }

  modelViewer.querySelectorAll('button').forEach((hotspot) => {
 
    hotspot.addEventListener('click', () => annotationClicked(hotspot));
  });

---

the issue is modelViewer.cameraTarget = dataset.position;
if u using smth like that
<button class="Hotspot" data-position="0.9070117843735008m 7.22772579323824m 9.84750384385202m"......

[khumam]

If you want to recreate this page (https://rava-cycle-neotix.glitch.me/), you can take the camera target from the camera position data. Additionally, you can obtain the camera orbit from the editor, as discussed here:

Indeed, this is a great feature of our editor! Simply go to the Hotspots section on the second tab, and you can add them by clicking. When you download the scene, the HTML is all built for you, ready for further customization.

For those who feel that the angle or position is not right, the issue may be related to the model. Since the Rava cycle uses a bicycle model, it allows us to view it from every angle and create smoother transitions. However, if you're using a 3D model with distinct "back" and "front" sides, you may not be able to adjust the position to the "front side" of your model (or it might be possible, but I'm not certain).

Alternatively, if there is a way to reset the model's rotation to match the current camera position, it might provide a solution.

[rebrob]

Hello,

I see that the dataPosition values collected from the editor can be used to set the dataTarget of hot spots. Is there a way to easily get the dataOrbit from the editor? Can the user rotate the model and retrieve some orbit values?

[elalish]

Yes, in the third tab, just click "Save current as initial" and you'll see them in the snippet.