OrbitControls overwrites camera rotation

Questions
,
1

Hello, I have two problems:

  1. When I rotate the camera to look at the painting, the camera gets overwritten by “scope.object.lookAt( scope.target );” in OrbitControls. Example below:

bugdemo

This is how I am currently rotating the camera and moving towards the position of the paintings (the commented lines are what I tried before and didn’t work):

// Moving towards painting
new TWEEN.Tween(positionCoords)
            .to( { x: positionTo.x, y: positionTo.y, z: positionTo.z }, 1000 )
            .easing( TWEEN.Easing.Quartic.In )
            .onStart(() => {
                // this.orbitControls.enabled = false;
            })
            .onUpdate(() => {
                    this.target.set(positionCoords.x, positionCoords.y, positionCoords.z);
            })
            .onComplete(() => {
                    // this.orbitControls.enabled = true;
            })      
            .start();

// Rotate to look at the painting
new TWEEN.Tween(rotationCoords)
                .to(to, 1000)
                .easing(TWEEN.Easing.Quartic.In)
                .onUpdate(() => {
                    // this.camera.rotation.set(
                    //  rotationCoords.x, 
                    //  rotationCoords.y, 
                    //  rotationCoords.z, 
                    // )

                    this.camera.rotation.z = rotationCoords.z;
                    this.camera.rotation.x = rotationCoords.x;
                    this.camera.rotation.y = rotationCoords.y;
                })
                .onComplete(() => {
                    // this.camera.position.set(positionCoords.x, positionCoords.y, positionCoords.z);
                    // this.target.set(positionCoords.x, positionCoords.y, positionCoords.z);
                    // this.orbitControls.enabled = true;
                })
                .start();
  1. I want to fit the painting to the center of the screen like below

dezad
dezad910×734 116 KB

2

Yes, orbit controls orbit around their target position.

What you can do is:
(1) disable orbit controls all the time when looking at a painting (simply stop calling this.controls.update(); in the loop and do the rotation yourself, until user decides to leave, clicks or moves the mouse)
(2) set controls.target to the center of the painting based on its bounding box (see here how-to).

Long story short - don’t play with rotation when using OrbitControls.update(), it’ll just mess things up, use target only.

2 Likes
3

  1. The moment I enable the controls back the lookAt by OrbitControls will be called again with the last value of controls.target. That will make the experience unpleasant as the camera will not be looking at the same place when enable back the controls. Is there a way to get the right values for target.set() and camera.set() to be able to look at the right place?

  2. I am going to test it soon.

Thank you for your answer!

4

(2) Didn’t work as it is still zoomed in (like in the demo video). The behavior that I want to achieve is to have the painting fit the screen.

I still have a problem with (1). I tried enabling/disabling the orbit controls but the moment they are enabled , the camera looks at another position.

5

Hi,

Were you able to position orbit control correctly. im in the same situation.

Thanks

6

Hi,

did you find the solution ? , I’m in the same situation.

Thanks

7

the answer of mjurczyk should work.
But I admit it’s could be wild/confusing depending the cases. Here is a similar chunk of code (or close)
Maybe it can help.

controls.enabled = false;			//disable orbitControls
controls.reset();					//reset orbitControls
const vect3 = new THREE.Vector3();
controls.target = vect3;			//reset orbitControls target
camera.position.set(0,500,1000);	//reposition camera using some values
camera.lookAt(vect3);				//matching target
controls.enabled = true;			//enable orbitControl