OrbitControls Moves on 1st Mouse after Setting Camera Information

Questions
1

After copying what I believe to be all the necessary information from the animation camera back to the default camera, the 1st mouse movement after the animation is run still jumps.

‘’’
function switchCamera(fromCamera, toCamera) {

    console.log('fromCamera');
    camInfo('', fromCamera);
    
		  var a = new THREE.Vector3(0,0,0);
		  fromCamera.getWorldDirection( a );
    a.normalize();

    controls.ptr.enabled = false;
    
    camera.ptr = toCamera;
    controls.ptr.object = toCamera;
    
    toCamera.position.copy(fromCamera.position);
			toCamera.rotation.copy(fromCamera.rotation);
			
    controls.ptr.target.copy(toCamera.position).add(a);
    
    controls.ptr.saveState();

    controls.ptr.enabled = true;
    
    render();
    
    
    console.log('controls.ptr.object after 1st render');
    camInfo('', controls.ptr.object);
    console.log('camera.ptr after 1st render');
    camInfo('', camera.ptr);
		}

‘’’

2
  1. A bit unrelated to the question, but related to code itself - every object in JS is a pointer, no need to nest them as a .ptr reference, it’s just a potential memory leak in a long run.
  2. Consider using const instead of var - debugging the code in it’s current state is a bit very hard, stuff’s declared all over the place.
  3. var that = this; stuff like this will get you a life sentence in some states :pensive:
  4. You cannot manually modify the camera if it’s controlled by OrbitControls - camera position and rotation will be automatically overridden on the next frame. The fact that you disable controls before overwriting the camera doesn’t mean much, as soon as you re-enable the controls they’ll jump the camera back to where they left of. If you apply OrbitControls to the camera, forget about manually modifying camera.position and camera.rotation - instead modify camera.position and controls.target to place the camera in the way you want it.
1 Like
3

Surely there is a way to programmatically reposition / rotate / retarget a camera once it is under ObitControls.

I have cleaned up my jsFiddle - removed ‘pointer’ code and ‘that’ references.

4

If you want to camera to stay immobile under orbitctrols, you have to set the controls.target to something valid for the new position/orientation.

Something like controls.target.set(0,0,-controls.target.distanceTo(camera.poistion)).applyQuaternion(camera.quaternion).add(camera.position)

1 Like
5

Thank you for code.

I add it to the finish callback after the animation runs. The finish callback also switch back to the action camera and renders scenes. Unfortunately the code makes no difference.

What I am trying to achieve is basically have the OrbitControls reset to the new position and view of where the animeCamera leaves off (and where the actnCamera has been set to [and is rendering at]). But any mouse movement put the actnCamera to some weird location.

Modified jsFiddle

6

It’s a bit hard to follow the logic in the fiddle. Using 2 cameras makes it a bit more complex than it perhaps needs to be?

Usually when animating cameras, I just do a tween on camera.position and controls.target rather than constructing an AnimationClip from scratch.
That all said:
You could try adding:

        controls.target0.copy(controls.target)
        controls.position0.copy(camera.position)

After you reset the controls target/etc. Those are some internal state variables that cameracontrols uses, and might need to be reset.

(I also didn’t notice you calling controls.update() in your render loop. That can cause problems sometimes.)

If you do continue with 2 cameras, you can make the second camera by just:

animeCamera = actnCamera.clone();
animeCamera.name = ‘animeCamera’

I did some rearrangement on your fiddle… don’t know if its doing what you expect but… :smiley: