title: How to drag a scene with three.js?
body: <p>In the following html page I create a scene with some points, in which you can zoom comfortably by using the mouse wheel.</p>
  <p>But what I want to do is to drag that scene after I have zoomed in. I want to press the left mouse button, keep it pressed and then move the mouse. I want the scene to move accordingly (e.g. by changing the x/y coordinates of the camera).</p>
  <p>I tried to create a listener to listen to clicks, but when I click somewhere I do not see any console output.</p>
  <p>I also searched and found the suggestion to use <code>DragControls</code>, but this does not seem to be defined in THREE. At least I get an error when I uncomment these lines.</p>
  <p>So how to implement something so I can drag the whole scene (or the camera)?</p>
  <p>Code:</p>
  <pre><code>&lt;meta content=&quot;text/html;charset=utf-8&quot; http-equiv=&quot;Content-Type&quot;&gt;
  &lt;meta content=&quot;utf-8&quot; http-equiv=&quot;encoding&quot;&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js&quot;&gt;&lt;/script&gt;
          &lt;title&gt;Test&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script&gt;
              container = document.createElement('div');
              document.body.appendChild(container);
              camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
              camera.position.set(0, 0, 150);
              scene = new THREE.Scene();
              scene.add(camera);
              renderer = new THREE.WebGLRenderer({
                  clearAlpha: 1
              });
              renderer.setSize(window.innerWidth, window.innerHeight);
              renderer.setClearColor(0x228B22, 1);
              document.body.appendChild(renderer.domElement); 
              
              // Define a standard Circle
              circle = new THREE.CircleGeometry(1, 20);
              
              var max = 50;
              var min = -50;              
              for (var i = 0; i &lt; 100; i++) {         
                  var object = new THREE.Mesh( circle.clone(), new THREE.MeshBasicMaterial( { color: new THREE.Color('yellow'), opacity: 0.5 } ) );
                  object.position.x = Math.random() * (max - min) + min;
                  object.position.y = Math.random() * (max - min) + min;
                  object.position.z = 0;                  
                  scene.add( object );            
              }
              
              document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
              function onDocumentMouseWheel( event ) {
                  var fovMAX = 100;
                  var fovMIN = 1;
                  camera.fov -= event.wheelDeltaY * 0.05;
                  camera.fov = Math.max( Math.min( camera.fov, fovMAX ), fovMIN );
                  camera.projectionMatrix = new THREE.Matrix4().makePerspective(camera.fov, window.innerWidth / window.innerHeight, camera.near, camera.far);
              }
              
              document.addEventListener( 'mouseclick', onDocumentMouseClick, false );
              function onDocumentMouseClick( event ) {
                  console.log(&quot;mouseclick! &quot; + event.offsetX + &quot;-&quot; + event.offsetY, );
              }
              
              animate();
              function animate() {
                  requestAnimationFrame(animate);
                  renderer.render(scene, camera);
              }
              
              //// undefined: 
              //var controls = new THREE.DragControls( objects, camera, renderer.domElement );            
              //controls.addEventListener( 'dragstart', function ( event ) {
              //  event.object.material.emissive.set( 0xaaaaaa );
              //} );
              //
              //controls.addEventListener( 'dragend', function ( event ) {
              //  event.object.material.emissive.set( 0x000000 );
              //} );
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>