Producing Interactive Hotspot on Click and Generate accurate camera-orbit to focus on hotspot

[skoorbnadroj]

Currently I have a viewer setup with interactive hotspot generation mapped to right click using the positionAndNormalFromPoint method, and using a database to ensure hotspot datasets are saved and persist everytime a model loads. My goal is to programmatically derive the camera orbit on hotspot generation so that when the user clicks a hotspot with left click, the camera interpolates between the focused hotspot via its data-orbit attribute. Unfortunately, I have not had much success and spent hours trying to generate the correct theta, phi values based on cartesian to spherical coordinate conversion. I had thought there would be a solution by utilizing the normal vector of the hotspot but am not well versed in trigonometry to work out the maths...

Since the intent is for the hotspots to be interactively generated, I do not want to have to utilize a manual process to pre-generate the camera orbits via the editor which seems to have been the recommendation for other folks. Any help or support would be greatly appreciated.

[elalish]

Are you saying you want to move the camera so the hotspot normal is pointing straight at it? Have you tried something like phi = Math.acos(normal.y) and theta = Math.atan2(normal.x, normal.z)? On that second one you may need to swap the order or the signs to get it right - I inevitable end up testing each combo until it's working.

[skoorbnadroj]

Yes! Exactly, this worked flawlessly. Thank you so much. Just for reference this is how I'm implementing the functionality:
`modelViewer.addEventListener("contextmenu", function(event) {

if (modelViewer.surfaceFromPoint(event.clientX, event.clientY) != null) {
    let positionAndNormal = modelViewer.positionAndNormalFromPoint(event.clientX, event.clientY);
    let hotspot = document.createElement('div');

    hotspot.classList.add('hotspot');
    let s = 'hotspot-' + hotspotCounter;
    hotspot.setAttribute("data-position", positionAndNormal.position.toString());
    hotspot.setAttribute("data-normal", positionAndNormal.normal.toString());

    console.log(positionAndNormal);
    // Convert hotspot position to spherical coordinates to input to camera orbit attribute
    let normalX = positionAndNormal.normal.x;
    let normalY = positionAndNormal.normal.y;
    let normalZ = positionAndNormal.normal.z;
    let theta = Math.atan2(normalX, normalZ);
    let phi = Math.acos(normalY);

    let camOrbit = theta + "rad " + phi + "rad " + "1m";
    hotspot.setAttribute("data-orbit", camOrbit);

    hotspot.setAttribute("slot",  s);
    hotspotCounter++;

    modelViewer.appendChild(hotspot);
    modelViewer.cameraTarget = positionAndNormal.position;
    modelViewer.cameraOrbit = camOrbit;

}

});`