sphere zoom

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>

JavaScript

var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    ASPECT = WIDTH / HEIGHT,
    VIEW_ANGLE = 45, NEAR = 0.1, FAR = 10000;

var click = true;

var contianer, renderer, camera, scene, sphere;
 
function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(WIDTH, HEIGHT);
    container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    camera.position.z = 500;

    var sphereMaterial = new THREE.MeshBasicMaterial({
        color: 'green'
    });
    sphere = new THREE.Mesh(new THREE.SphereGeometry(50, 16, 16),
    sphereMaterial);

    scene = new THREE.Scene();
    scene.add(camera);
    scene.add(sphere);
    
    renderer.domElement.style.position="absolute";
    renderer.domElement.style.top="0";
    renderer.domElement.style.bottom="0";
    renderer.domElement.style.left="0";
    renderer.domElement.style.right="0";
    
    renderer.domElement.addEventListener( 'mousedown', onMouseDown );
    renderer.render(scene, camera);
}

//event listener
function onMouseDown( event_info ) {
    
    event_info.preventDefault();  
    
    if(click) {
        var dist =  50 / (Math.sin( camera.fov * (Math.PI/180) / 2 ));
        camera.position.z = dist;
        
        click = false;
    } else {
       
        camera.position.z = 500;
        
        click = true;
    } 
    renderer.render(scene,camera); 
}


init();