Camera bounce back

Questions
1

Hi there.

I am trying to update my camera position using the Tween library. I’ve added it to several objects in my world, and they are all working as expected. With the camera however, it only appears to adjust the ‘z’ value of my camera position. It does however jump to the correct coordinates, it just then immediately jumps to a (0, 0, ‘z-value’). I’ve checked a couple of solutions on SO. But none of them seem to resolve my issue. Any advise welcome.

camera = new THREE.PerspectiveCamera( 70, WIDTH / HEIGHT, 0.1, 10000 );
camera.position.z = 1000;
camera.focalLength = 1000;

window.addEventListener('wheel', function(e){
  console.log( e.deltaY );
  var tweenCamera = new TWEEN.Tween(camera.position);
  console.log( e.deltaY );
  if( e.deltaY < 0){
    tweenCamera.to({x: 0, y: 0, z: 1000}, 500);
    tweenCamera.easing(TWEEN.Easing.Quadratic.Out);
    tweenCamera.start();
  } else if ( e.deltaY > 100){
    tweenCamera.to({x: 3000, y: 4000, z: 5000}, 500);
    tweenCamera.easing(TWEEN.Easing.Quadratic.Out);
    tweenCamera.start();
  }
});

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', function(){
  renderer.setSize( window.innerWidth, window.innerHeight );
  camera.aspect = WIDTH/HEIGHT;
  camera.updateProjectionMatrix();
}

function animate() {
  requestAnimationFrame( animate );
  TWEEN.update();
  render();
}
2

It seems I’m unable to reproduce: https://jsfiddle.net/vwzLqxds/

3

Thank you for the inspection. I had a look at the fiddle, I see some values were changed, but overall the same idea. I found two differences in our codes.

  1. You included the function TWEEN.removeAll() - Please elaborate why you did this?
  2. I noticed that I didn’t include my render function in my description, and inside of that I have the function camera.LookAt( scene.position ). The moment I turned that off, the Tween worked perfectly. Is this a conflict with Three.Camera and Tween perhaps?
4

To remove existing tweens in order to avoid conflicting animations.

Calling Object3D.lookAt() does only change the orientation of an object, not its position. So as long as you do not animate the orientation of the camera, there should be no conflict.

1 Like
5

Correction!

This was not the issue. I have another function that is causing the conflict. Please review code below:

var camera, scene, renderer;
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var mouseX = 0;
var mouseY = 0;

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera( 70, WIDTH / HEIGHT, 0.1, 10000 );
  camera.position.z = 1000;
  camera.focalLength = 1000;

  window.addEventListener('wheel', function(e){
    TWEEN.removeAll();
    var tweenCamera = new TWEEN.Tween(camera.position);
    console.log( e.deltaY );
    if( e.deltaY < 0){
      tweenCamera.to({x: 0, y: 0, z: 1000}, 500);
      tweenCamera.easing(TWEEN.Easing.Quadratic.Out);
      tweenCamera.start();
    } else if ( e.deltaY > 100){
      tweenCamera.to({x: 3000, y: 4000, z: 5000}, 500);
      tweenCamera.easing(TWEEN.Easing.Quadratic.Out);
      tweenCamera.start();
    }
  });

scene = new THREE.Scene();

function addRenderer(){
  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( WIDTH, HEIGHT );
  document.body.appendChild( renderer.domElement );
  window.addEventListener( 'resize', function(){
    renderer.setSize( window.innerWidth, window.innerHeight );
    camera.aspect = WIDTH/HEIGHT;
    camera.updateProjectionMatrix();
  } )
}

function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - (WIDTH / 2) ) / 10;
mouseY = ( event.clientY - (HEIGHT / 2) ) / 10;
}

function animate() {
  requestAnimationFrame( animate );
  TWEEN.update();
  render();
}

function render() {
  function cameraLook(){
    camera.position.x += ( mouseX - camera.position.x ) * .05;
	camera.position.y += ( - mouseY - camera.position.y ) * .05;
    camera.position.z += ( - mouseY - camera.position.y ) * .05;
	camera.lookAt( scene.position );
  }
  cameraLook();

  renderer.render( scene, camera );
}

It would appear that the hovering effect that I have set up with the camera is causing the issue. not the camera.LookAt() function. Is this what you were referring to in your reply?

6

Doing this and perform your tweening won’t work.

7

I thought so. Thanks for the assist, it’s much appreciated. Have a fantastic day.

1 Like