button move camera THREE.js

Question

I want to have the separate buttons on my website, and each button moves the camera to a different position. How do I go about doing this. Currently, I have it set up so that when I press a button, the camera follows a chain of camera positions I have set, But I do not know how to separate these so each button moves the camera to a different spot in my scene.

Here is the code I currently have:

    camera.position.set(100, 0, 400);
}

function render() {
    requestAnimationFrame(render);

    renderer.render(scene, camera);
    TWEEN.update();
}

function moveCam() {

    var pos1 = new TWEEN.Tween(camera.position).to({
        y: 300
    }, 3000).easing(TWEEN.Easing.Quadratic.InOut);

    var pos2 = new TWEEN.Tween(camera.position).to({
        x: -400
    }, 4000).easing(TWEEN.Easing.Quadratic.InOut);

     var pos3 = new TWEEN.Tween(camera.position).to({
        y: -10
    }, 4000).easing(TWEEN.Easing.Quadratic.InOut);

     var rot1 = new TWEEN.Tween(camera.rotation).to({
        y: -1
    }, 4000).easing(TWEEN.Easing.Quadratic.InOut);

    var pos4 = new TWEEN.Tween(camera.position).to({
        x: 600
    }, 6000).easing(TWEEN.Easing.Quadratic.InOut);

    var pos5 = new TWEEN.Tween(camera.position).to({
        y: -400
    }, 2000).easing(TWEEN.Easing.Quadratic.InOut);

    var rot2 = new TWEEN.Tween(camera.rotation).to({
        y: -5
    }, 2000).easing(TWEEN.Easing.Quadratic.InOut);

    var pos6 = new TWEEN.Tween(camera.position).to({
        z: 10
    }, 5000).easing(TWEEN.Easing.Quadratic.InOut);

    var rot3 = new TWEEN.Tween(camera.rotation).to({
        y: 0
    }, 2000).easing(TWEEN.Easing.Quadratic.InOut);


    pos1.start();
    pos1.chain(pos2);
    pos2.chain(pos3, rot1)
    rot1.chain(pos4)
    pos4.chain(pos5, rot2)
    rot2.chain(pos6)
    pos6.chain(rot3)

Answer 1

Maybe try the following:

Use a single tween instead of one per button. This way you can make sure they won't interfere:

var positionTween = new TWEEN.Tween(camera.position)
    .easing(TWEEN.Easing.Quadratic.InOut);
var rotationTween = new TWEEN.Tween(camera.rotation)
    .easing(TWEEN.Easing.Quadratic.InOut);

And define the positions and rotations for each of the buttons in their complete form. So, if you define a position, always define it with all three components. Same goes for the rotation. If you don't specify a value, it will not be changed so the position would then depend on where the camera was before.

Here, I'm using the buttons id-attribute to retrieve the position. So I'm assuming the HTML for the buttons looks something like this:

<button id="button1" class="camera-button">Position 1</button>

And the JS would be:

var buttonCameraSettings = {
    button1: {
      position: {x: 1, y: 0, z: 0},
      rotation: {x: 0, y: Math.PI, z: 0}
    },
    button2: {
      // ...
    }
};

You can now register an event-handler for all buttons and lookup the settings for the button:

var button1 = document.getElementById('button1');
button1.addEventListener('click', function(ev) {
  var buttonId = ev.target.id;
  var cameraSettings = buttonCameraSettings[buttonId];

  updateCameraTweens(cameraSettings);
});

Now for the last part, the function updateCameraTweens would look like this:

function updateCameraTweens(params) {
  if (params.position) {
    positionTween.stop();
    positionTween.to(params.position, 1000).start();
  }

  if (params.rotation) {
    rotationTween.stop();
    rotationTween.to(params.rotation, 1000).start();
  }
}

If you need different durations per animation, you could just add those numbers to the parameters as well.

Another note regarding the rotations. For some mathematical reason it is generally not the best idea to animate the Euler-angles stored in camera.rotation. Animations tend to look better if the quaternion of the object is animated instead.

var quatTween = new TWEEN.Tween(camera.quaternion);
var toQuaternion = new THREE.Quaternion();
var toEuler = new THREE.Eueler();

// in updateCameraTweens()
toEuler.set(rotation.x, rotation.y, rotation.z);
toQuaternion.setFromEuler(toEuler);
quatTween.to(toQuaternion, 1000).start();

Answer 2

For your scene is render auto, so just change the camere like this:

html:

<button onclick="move()">Move</button>

js:

function move()
{
  camera.position += 10;
}