title: how to dragging Threejs point
body: <p>I'm trying to huge graph visualization with threejs r86(latest master version), for showing 600,000 nodes I found a way to draw them faster than using mesh with THREE.points but know I need to make them draggable, after many searches I found raycast to found closest object to mouse point but I have a problem becouse all of taht points are just an object and can not be changed seperately.</p>
  
  <pre><code>function Graph3(Nodes, Edges) {
  this.renderer = new THREE.WebGLRenderer({ alpha: true});
  var width = window.innerWidth , height = window.innerHeight;
  this.renderer.setSize(width, height, false);
  document.body.appendChild(this.renderer.domElement);
  this.scene = new THREE.Scene(),
  this.camera = new THREE.PerspectiveCamera(100, width / height, 0.1, 3000),
  this.controls = new THREE.OrbitControls(this.camera);
  this.controls.enableKeys = true;
  this.controls.enableRotate = false;
  
  var material, geometry;
  self = this;
  material = new THREE.LineBasicMaterial({color: '#ccc'});
  
  geometry = new THREE.Geometry();
  geometry.vertices = Nodes.map(function(item){return new THREE.Vector3(item.pos.x,item.pos.y,item.pos.z);});
  // this.vertices = geometry.vertices;
  
  
  this.line = new THREE.LineSegments(geometry, material);
  this.scene.add(this.line);
  
  var Node = new THREE.Group();
  
  material = new THREE.PointsMaterial( { color:0x000060 ,size:1 } );
  
  this.particles = new THREE.Mesh(geometry,material)
  this.particles = new THREE.Points( geometry, material);
  this.scene.add( this.particles );
  
  dragControls = new THREE.DragControls([this.particles], this.camera/*,this.scene*/, this.renderer.domElement);
  
  this.camera.position.z = 200;
  
  var raycaster = new THREE.Raycaster();
  var mouse = new THREE.Vector2();
  
  document.addEventListener( 'click', function ( event ) {
  
      // calculate mouse position in normalized device coordinates
      // (-1 to +1) for both components
  
      mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
      mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
      console.log(mouse);
  
  }, false );
  
  
  stats = new Stats();
  document.body.appendChild(stats.dom);
  
  this.animate = function()
  {
  
      raycaster.setFromCamera( mouse, self.camera );
      var intersections = raycaster.intersectObject( self.particles );
      intersection = ( intersections.length ) &gt; 0 ? intersections[ 0 ] : null;
  
      if ( intersection !== null) {
          console.log(intersection);
      }
  
      requestAnimationFrame( self.animate );
      stats.update();
  
      self.renderer.render(self.scene, self.camera);
  }
  this.animate();}
  </code></pre>
  
  <p>I had able to change all the points with dragControls but can't move them seperatly
  I had found EventsControls.js file which help us to handle events but I couldn't use it</p>