Is there a way to set azimuth and polar angles for Orbitcontrols?

Questions
1

I am using OrbitControls for user navigation around the scene.
Now I would like to add some camera animation - on the same camera, or one that appears to be the same one by virtue of starting at the same place where the OrbitControls camera was. When the camera animation is complete, I want to user to be able to seamlessly go back to navigation in the scene using OrbitControls.
I think for this to work, I need to be able to set the azimuth and polar angle values for my OrbitControls object.
Is there a way to do that ?

Thanks
-jg-

2

There are not setters for the azimuthal and polar angles, only getters. These values are internally computed based on the event data and not intended to be set by the user.

If you still want to do this, you have to create a custom version of OrbitControls and add both methods by yourself. When animating, you have to disable OrbitControls (by setting the enabled property to false) and call update() by yourself.

1 Like
3

Got it.
Thanks for your help.

cheers
-jg-

4

There might be a way around - a bit dirty however

        var setPolar=_data[7][2]
        var setAzimuth=_data[7][3]
        var orig = 
        [
            orbitControls.minPolarAngle,
            orbitControls.maxPolarAngle,
            orbitControls.minAzimuthAngle,
            orbitControls.maxAzimuthAngle
        ]

        orbitControls.minPolarAngle=setPolar
        orbitControls.maxPolarAngle=setPolar
        orbitControls.minAzimuthAngle=setAzimuth
        orbitControls.maxAzimuthAngle=setAzimuth
        orbitControls.update()

        orbitControls.minPolarAngle  = orig[0]
        orbitControls.maxPolarAngle  = orig[1]
        orbitControls.minAzimuthAngle= orig[2]
        orbitControls.maxAzimuthAngle= orig[3]
        orbitControls.update()
1 Like
5

Hi All, I have a simple solution that doesn’t require directly editing the OrbitControls class.

// Create a Spherical object and assign it the internal values of OrbitControls.
var spherical = new Spherical();
spherical.radius = orbitControls.getDistance();
spherical.phi = orbitControls.getPolarAngle();
spherical.theta = orbitControls.getAzimuthalAngle();

// Set the new values on the Spherical object.
spherical.radius = newDistance;
spherical.phi = newPolarAngle;
spherical.theta = newAzimuthalAngle;

// Update the camera position.
orbitControls.object.position.setFromSpherical(spherical);
6

you can use orbitcontrols from stdlib: GitHub - pmndrs/three-stdlib: 📚 Stand-alone library of threejs examples designed to run without transpilation in node & browser

import { OrbitControls } from 'three-stdlib'
...
    controls?.setAzimuthalAngle(azimuth)
    controls?.setPolarAngle(polar)
7

Cool.
I will try that.
-jg-

8

there’s no way to directly set it. Try it like this:

        slider2.addEventListener("input",function(){
            controls.minPolarAngle = slider2.value;
            controls.maxPolarAngle = slider2.value;
            controls.update();
            controls.minPolarAngle = -Infinity;
            controls.maxPolarAngle = Infinity;
        });
1 Like