Three JS Camera Movement

by navinleon

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs.org/examples/js/libs/tween.min.js"></script>
<div class="clicks">Move Camera</div>
<div class="webgl"></div>

CSS

body{
  overflow: hidden;
  margin: 0;
}
.webgl {
    height:100vh;
    width:100vw;
}
.clicks {
    position:absolute;
    top:1%;
    width:auto;
    height:20px;
    border:1px solid red;
    cursor:pointer;
    color:black;
    background-color:white;
}

JavaScript

var camera;
var controls;
var scene;
var torus;
var light;
var renderer;
var w = window.innerWidth;
var h = window.innerHeight;

init();
animate();

function init() {
    //camera
    camera = new THREE.PerspectiveCamera(45, w / h, 1, 5000);
    camera.position.set(0, 200, -500);

    
    //Scene
    scene = new THREE.Scene();

    // Helpers
    axes = new THREE.AxisHelper(50);
    helper = new THREE.GridHelper(1000, 10, 0x0000ff, 0x808080);
    scene.add(axes);
    scene.add(helper);

    // Torus Geometry
    torus = new THREE.Mesh(new THREE.TorusGeometry(120, 60, 40, 40),
    new THREE.MeshNormalMaterial());
    torus.position.set(0, 0, 0);
    scene.add(torus);

    //Hemisphere Light
    light = new THREE.HemisphereLight(0xffbf67, 0x15c6ff);
    scene.add(light);

    //WebGL Renderer
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    
    //controls
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;
    
    //renderer.setClearColor(0xffffff, 1)
    renderer.setSize(w, h);
    $('.webgl').append(renderer.domElement);
    
    


    $('.clicks').click(function () {
    		var from = camera.position.clone();
				var to = camera.position.clone().subScalar(100);
        // initially, camera looks at the center of the scene
        // next line makes it to look at the top of the torus
        controls.target = new THREE.Vector3(0, 120, 0); // set target once, not in .onUpdate
        var tween = new TWEEN.Tween(from)
            .to(to, 600)
            .easing(TWEEN.Easing.Linear.None)
            .onUpdate( function(){
            	camera.position.copy(this);
              controls.update();
            })
            .start();
    });
}// init end


function animate() {
    requestAnimationFrame(animate);
    TWEEN.update();
    renderer.render(scene, camera);
}