title: Translate mouse coordinates to a 3D plan
body: <p>I'm building some kind of drag and drop app in javascript/jquery (DOM based, not canvas).</p>
  
  <p>The idea is to be able to drag divs on a 3D scene (a div rotated in 3D).</p>
  
  <p>It works on a 2D plan, the problem is when I rotate the scene in 3D, the objects position doesn't reflect the actual mouse position, but the coordinates translated in 3D</p>
  
  <p>Illustrated exemple :
  <img src="https://i.stack.imgur.com/qrJDR.png" alt="exemple"></p>
  
  <p><a href="http://jsfiddle.net/JulianG/Aubcr/" rel="nofollow noreferrer">EXEMPLE ON JSFIDDLE</a></p>
  
  <p>I want the objects moving relative to the absolute position of the mouse.</p>
  
  <p>I calculate the mouse position like this :</p>
  
  <pre><code>document.addEventListener(gestureMove, function (event) {
    if (mouseDown == true) {
    event.preventDefault();
    moveX = (event.pageX - $('#scene').offset().left);
    moveY = (event.pageY - $('#scene').offset().top);
  }
  
  #scene { 
    width: 1000px;
    height: 1000px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX( 35deg ); 
  }
  </code></pre>
  
  <p>An early solution was to calculate the difference between the mouse position and the object based on the initial position, and adding it to the object position during the drag. It was working, but the animation was really choppy and not smooth at all.</p>
  
  <p>I'm sure there is a more simple way to get the mouse coordinates relative to the 3D plan, but wasn't able to find a real solution at this point.</p>
  
  <p>Most of the search results on this subject point to gaming oriented languages, or canvas/webgl questions.</p>
  
  <p>Any ideas ?</p>
  
  <p>Thanks</p>