Pure THREE.JS template

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.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 = 5.0;
      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;

      ////////////
      //...

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);
  scene.add(gridXZ);

  // globe
  var sphere = new THREE.Mesh(new THREE.SphereGeometry(10, 16, 16));
  scene.add(sphere);

}

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

init();
animate();