Pure THREE.JS template

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script>
/**
 * @author qiao / https://github.com/qiao
 * @author mrdoob / http://mrdoob.com
 * @author alteredq / http://alteredqualia.com/
 * @author WestLangley / http://github.com/WestLangley
 * @author erich666 / http://erichaines.com
 */
/*global THREE, console */

( function () {

	function OrbitConstraint ( object ) {
	
		// smooth Zoom
		var zoomEnd = 0;
		this.zoomStart = 0;

		this.zoomDampingFactor = 0.2; //0.3
		this.smoothZoomSpeed = 0.2;
		this.smoothZoom = false;

		this.smoothZoomUpdate = function () {

			var factor = 1.0 + ( zoomEnd - this.zoomStart ) * this.smoothZoomSpeed;
			scale *= factor;

			this.zoomStart += ( zoomEnd - this.zoomStart ) * this.zoomDampingFactor;

		 };

		this.object = object;

		// "target" sets the location of focus, where the object orbits around
		// and where it pans with respect to.
		this.target = new THREE.Vector3();

		// Limits to how far you can dolly in and out ( PerspectiveCamera only )
		this.minDistance = 0;
		this.maxDistance = Infinity;

		// Limits to how far you can zoom in and out ( OrthographicCamera only )
		this.minZoom = 0;
		this.maxZoom = Infinity;

		// How far you can orbit vertically, upper and lower limits.
		// Range is 0 to Math.PI radians.
		this.minPolarAngle = 0; // radians
		this.maxPolarAngle = Math.PI; // radians

		// How far you can orbit horizontally, upper and lower limits.
		// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
		this.minAzimuthAngle = - Infinity; // radians
		this.maxAzimuthAngle = Infinity; // radians

		// Set to true to enable damping (inertia)
		// If damping is enabled, you must call controls.update() in your animation loop
		this.enableDamping = false;
		this.dampingFactor = 0.25;

		////////////
		// internals

		var scope = this;

		var EPS = 0.000001;

		// Current position in spherical coordinate system.
		var theta;
		var phi;

		// Pending...

JavaScript

var scene, renderer, camera, controls;

function init()
{	
    // basic scene
    renderer = new THREE.WebGLRenderer( {antialias:true} );
	var width = window.innerWidth;
	var height = window.innerHeight;

    renderer.setSize (width, height);
    renderer.setClearColor( 0xffaa00, 1);
    
	document.body.appendChild (renderer.domElement);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
	camera.position.y = 16;
	camera.position.z = 250;

    controls = new THREE.OOrbitControls (camera, renderer.domElement);
    controls.enableDamping = true;
	controls.dampingFactor = 0.25;
    
    // smooth Zoom
    controls.constraint.smoothZoom = true;
    controls.constraint.zoomDampingFactor = 0.2;
    controls.constraint.smoothZoomSpeed = 5.0;
    
	var gridXZ = new THREE.GridHelper(100, 10);
	gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
	scene.add(gridXZ);
    
    // globe
    var sphere = new THREE.Mesh( new THREE.SphereGeometry( 100, 16,16) );
    scene.add( sphere );
    
}

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

init();
animate();