How to rotate sphere by 'grabbing' it?

Asking for help

by MichaelJendryke

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<html>

  <head>
    <title>My first three.js app</title>
    <style>
      body {
        margin: 0;
      }

      canvas {
        width: 100%;
        height: 100%
      }

    </style>
    <meta charset="UTF-8">
  </head>
  <script type="text/javascript" src="OrbitControls.js"></script>

  <body>



    <div id="container">
    </div>
    <script type="text/javascript" src="update_on_camera_change.js"></script>


  </body>

</html>

JavaScript

var container, stats;

var camera, controls, scene, renderer;

var cross;

class CustomDelay {
  constructor() {
    this.timer = null;
  }
  Timeout(fun = () => {}, ms) {
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      fun()
    }, ms)
  }
}


var state = JSON.parse('{ "bbox" :   { "xmin":-180.0 , "ymin":-90.0, "xmax":180.0, "ymax":90.0 },' +
  '"camera" : { "x" : 300 , "y" : 0 , "z" : 0, "dfc" : 300 },' +
  '"orbit" :  { "AzimuthAngle" : 0, "PolarAngle" : 0}}');


init();

function init() {

  THREE.Cache.enabled = true;

  // SCENE
  scene = new THREE.Scene();
  var axesHelper = new THREE.AxesHelper(500);
  scene.add(axesHelper);

  // CAMERA
  console.log('state=',state);
  camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight);
  camera.position.x = state['camera']['x'];
  camera.position.y = state['camera']['y'];
  camera.position.z = state['camera']['z'];
  camera.near = 100;
  camera.far = 10000;
  camera.updateProjectionMatrix();
  scene.add(camera);



  // CONTROLS (Orbit)
  controls = new THREE.OrbitControls(camera);
  controls.addEventListener('change', render);
  controls.update();

  // LIGHTS
  var ambientlight = new THREE.AmbientLight(0xffffff, 2);
  scene.add(ambientlight);

  flashlight = new THREE.SpotLight(0x0000ff, 1000, 500, 1, 1, 1);
  camera.add(flashlight);
  flashlight.position.set(100, 100, 100);
  flashlight.target = camera;
  var spotLightHelper = new THREE.SpotLightHelper(flashlight);
  scene.add(spotLightHelper);


// from http://jsfiddle.net/tfjvggfu/24/
	// geometry
    var geometry = new THREE.SphereGeometry( 50, 12, 8 );
    
    // material
    var material = new THREE.MeshPhongMaterial( {
        color: 0xff0000, 
        shading: THREE.FlatShading,
        polygonOffset: true,
        polygonOffsetFactor: 1, // positive value pushes polygon further away
        polygonOffsetUnits: 1
    } );
    
    // mesh
    var mesh = new THREE.Mesh( geometry, material );
    scene.add(...