title: Three.js - Drag and drop (XZ)
body: <p>I'm new to three.js and I used the example of <a href="http://threejs.org/examples/webgl_interactive_draggablecubes.html" rel="nofollow">http://threejs.org/examples/webgl_interactive_draggablecubes.html</a> to drag and drop my objects. The problem is that I want them to move only on the XZ plane (not on the Y axis) and I don't know how to achieve it in order to move them on a plane. The user should only be able to "slide" them on the ground. I'm using the OrbitControls instead of the TrackballControls.</p>
  
  <p><a href="https://jsfiddle.net/d58bbLey/" rel="nofollow">https://jsfiddle.net/d58bbLey/</a></p>
  
  <pre><code>    function onDocumentMouseMove( event ) {
      event.preventDefault();
  
      mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
      mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  
      raycaster.setFromCamera( mouse, camera );
  
      if ( SELECTED ) {
          var intersects = raycaster.intersectObject( plane );
  
          if ( intersects.length &gt; 0 ) {
              SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) );
          }
          return;
      }
  
      var intersects = raycaster.intersectObjects( objects );
  
      if ( intersects.length &gt; 0 ) {
  
          if ( INTERSECTED != intersects[ 0 ].object ) {
  
              if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
              INTERSECTED = intersects[ 0 ].object;
              INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
              plane.position.copy( INTERSECTED.position );
              plane.lookAt( camera.position );
          }
          container.style.cursor = 'pointer';
      } else {
          if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
          INTERSECTED = null;
          container.style.cursor = 'auto';
      }
  }
  </code></pre>
  
  <p>I appreciate your help! :D</p>