Reset camera rotation

Questions
,
1

Some of the equirectangular images I import have an “initial heading” set which is the direction (0…360) to point the camera and I would like to support this. I added some code to reset the camera rotation in terms of the OrbitControls() in place but it doesn’t seem to work despite trying many different things. Is it possible and if so, can someone point me in the right direction?

I made a fiddle with an example here

Thank you.

2

Just save the state first and then load it.
Of course, there is also a reset method.
https://threejs.org/docs/#examples/en/controls/OrbitControls.saveState

3

Just save the state first and then load it.
Of course, there is also a reset method.

I tried calling saveState() but there is no load() method - did you mean reset()?

controls.saveState();
controls.reset();

like this after I set the target?

4

Put the camera in the desired position and call the saveState() method.
Then the state of the camera is saved.
After this, if you call the reset() method at a desired point in time, the camera position is restored.

OrbitControls automatically calls the saveState() method upon creation.

5

Understood and reset() seems to do what you describe - fiddle here with code.

However, positioning the camera still only works the first click - moving the scene with the mouse then clicking the left button again (same angles) should move it back to same position each time surely?

6

Resetting does not erase the saved information.
When I run the source you gave me, it works like that.
Checking the source does not seem to clear the saved location.

three.js/OrbitControls.js at 44b8fa7b452dd0d291b9b930fdfc5721cb6ebee9 · mrdoob/three.js · GitHub
three.js docs 

	this.saveState = function () {

		scope.target0.copy( scope.target );
		scope.position0.copy( scope.object.position );
		scope.zoom0 = scope.object.zoom;

	};

	this.reset = function () {

		scope.target.copy( scope.target0 );
		scope.object.position.copy( scope.position0 );
		scope.object.zoom = scope.zoom0;

		scope.object.updateProjectionMatrix();
		scope.dispatchEvent( _changeEvent );

		scope.update();

		state = STATE.NONE;

	};
7 
reset.addEventListener("click", function() {
//    var angle = Math.PI * 3.0 / 4.0;
//    var spherical_target = new THREE.Spherical(1, Math.PI / 2, angle);
//    var target = new THREE.Vector3().setFromSpherical(spherical_target);
//    controls.target = target;
    camera.position.set(0,0,0.0001);
    controls.update();
  });
8

I’m sorry, I don’t understand what you mean.

Here is another fiddle with 3 buttons - pressing each should move the camera to a predefined angle. They all work the first time, but subsequently, they move the camera by a tiny amount.

9

I didn’t understand your answer at first, but using what you wrote to position the camera target and calling controls.update() appeared to do the trick.

function position_camera(controls, angle) {
  var spherical_target = new THREE.Spherical(1, Math.PI / 2, angle);
  var target = new THREE.Vector3().setFromSpherical(spherical_target);
  camera.position.set(target.x, target.y, target.z)
  controls.update();
  controls.saveState();
}

This feels like a bit of a cheat but it’s the only thing that has worked so thank you.

Example