button move camera THREE.js
<p>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. </p>

<p>Here is the code I currently have:</p>

<pre><code>    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)
</code></pre>