title: Move an object along a plane in Three.js
body: <p>So basically what I want to do is when I have a selected object I want to be able to move it around on a plane that is facing the camera. I have OrbitControls.js in the scene so I have to disable that. Here is an example of what I want: 
  <a href="http://threejs.org/examples/webgl_interactive_draggablecubes.html" rel="nofollow">http://threejs.org/examples/webgl_interactive_draggablecubes.html</a>
  As you can see I want to be able to move the objects around when selected but still be able to use OrbitControls when they are not selected. Here is the code I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    var saveCoords = {
      x: 50,
      y: 40,
      z: 0
    }
  
    var selectedWood;
    var hasSelected = false;
    var GUIOpen = false;
    var GUI2Open = false;
    var objects = [];
    var NoLength = document.getElementById('NoLength');
    var NoPrice = document.getElementById('NoPrice');
    var NoType = document.getElementById('NoType');
  
    var addGUI = document.getElementById('AddGUI');
    var addbutton = document.getElementById('add-button');
    var xButton = document.getElementById('xButton');
    var moveGUI = document.getElementById('MovementGUI')
    var xMoveButton = document.getElementById('xMoveButton');
    var addConfirm = document.getElementById('addConfirm');
    var movebutton = document.getElementById('move-button');
    var rotRight = document.getElementById('ArrowRight');
    var rotDown = document.getElementById('ArrowDown');
    var moveDist = document.getElementById('moveDist');
    var es = document.getElementById('es');
  
    var mDown = document.getElementById('MoveDown');
    var mUp = document.getElementById('MoveUp');
    var mFront = document.getElementById('MoveForward');
    var mBack = document.getElementById('MoveBack');
    var mRight = document.getElementById('MoveRight');
    var mLeft = document.getElementById('MoveLeft');
  
    var cameraDistance = 60;
  
    var rotation = 0;
  
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 500);
    var renderer = new THREE.WebGLRenderer();
  
    renderer.setClearColor(0xdddddd);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMapSoft = true;
  
    //var axis = new THREE.AxisHelper(10);
    //scene.add(axis);
  
    var color = new THREE.Color("rgb(255,50,50)");
    var color2 = new THREE.Color(0x999999);
    var grid = new THREE.GridHelper(50, 50, color, color2);
  
    scene.add(grid);
  
    controls = new THREE.OrbitControls(camera, scene.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.enableZoom = true;
  
  
    var spotLight = new THREE.AmbientLight(0xffffff);
    spotLight.position.set(15, 30, 15);
  
    scene.add(spotLight);
  
    camera.position.x = 50;
    camera.position.y = 40;
    camera.position.z = 0;
  
    camera.lookAt(scene.position);
  
    var loader = new THREE.FontLoader();
  
    loader.load("fonts/FrontPageNeue.json", function(font) {
  
      var textGeo = new THREE.TextGeometry("Front", {
  
        font: font,
  
        size: 5,
        height: 0,
        curveSegments: 0,
  
        bevelThickness: 0,
        bevelSize: 0,
        bevelEnabled: false
  
      });
  
      var textMat = new THREE.MeshLambertMaterial({
        color: 0x666666
      });
  
      var textFront = new THREE.Mesh(textGeo, textMat);
  
      textFront.rotation.x = -1.57;
      textFront.rotation.z = 1.57;
      textFront.position.x = 50;
      textFront.position.z = 6.2;
      textFront.position.y = 0.05
  
      scene.add(textFront);
  
      var textGeo2 = new THREE.TextGeometry("Back", {
  
        font: font,
  
        size: 5,
        height: 0.02,
        curveSegments: 0,
  
        bevelThickness: 0,
        bevelSize: 0,
        bevelEnabled: false
  
      });
  
      var textGeo3 = new THREE.TextGeometry("Right", {
  
        font: font,
  
        size: 5,
        height: 0,
        curveSegments: 0,
  
        bevelThickness: 0,
        bevelSize: 0,
        bevelEnabled: false
  
      });
  
      var textGeo4 = new THREE.TextGeometry("Left", {
  
        font: font,
  
        size: 5,
        height: 0,
        curveSegments: 0,
  
        bevelThickness: 0,
        bevelSize: 0,
        bevelEnabled: false
  
      });
  
      var textBack = new THREE.Mesh(textGeo2, textMat);
      var textRight = new THREE.Mesh(textGeo3, textMat);
      var textLeft = new THREE.Mesh(textGeo4, textMat);
  
      scene.add(textBack);
  
      textBack.rotation.x = 4.71;
      textBack.rotation.z = 4.71;
      textBack.position.x = -50;
      textBack.position.z = -6.2;
      textBack.position.y = 0.07
  
      scene.add(textRight);
  
      textRight.rotation.x = 4.71;
      textRight.rotation.z = 3.14;
      textRight.position.x = 6.2;
      textRight.position.z = -50;
      textRight.position.y = 0.07
  
      scene.add(textLeft);
      textLeft.rotation.x = 1.57;
      textLeft.rotation.z = 3.14;
      textLeft.rotation.y = 3.14;
      textLeft.position.x = -4.5;
      textLeft.position.z = 50;
      textLeft.position.y = 0.07
  
    });
  
  
  
  
    render();
  
    function render() {
      controls.update();
      if (GUIOpen == true) {
        controls.enabled = false;
      } else {
        controls.enabled = true;
      }
      if (selectedWood != null) {
        hasSelected = true;
      } else {
        hasSelected = false;
      }
  
      if (hasSelected == true) {
        movebutton.style.visibility = 'visible';
      } else {
        movebutton.style.visibility = 'hidden';
      }
  
      if (GUI2Open == true &amp;&amp; moveDist.value != 1) {
        show(es);
      } else {
        hide(es);
      }
  
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
  
    document.getElementById('world').addEventListener('mousedown', onDocumentMouseDown);
  
    mUp.onclick = function() {
      selectedWood.position.y += Math.round(moveDist.value * 1000) / 1000;
    }
    mDown.onclick = function() {
      selectedWood.position.y -= Math.round(moveDist.value * 1000) / 1000;
    }
  
    function onDocumentMouseDown(event) {
      if (GUIOpen == false) {
        event.preventDefault();
        var mouse3D = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
        var raycaster = new THREE.Raycaster();
        raycaster.setFromCamera(mouse3D, camera);
        var intersects = raycaster.intersectObjects(objects);
        if (intersects.length &gt; 0) {
          intersects[0].object.material.color.setHex(0xd9b38c);
          //intersects[ 0 ].object.material.wireframe = true;
          selectedWood = intersects[0].object;
        } else {
          selectedWood.material.color.setHex(13012051);
          //selectedWood.material.wireframe = false;
          selectedWood = null;
        }
      }
    }
  
    $(window).resize(function() {
      w = window.innerWidth;
      h = window.innerHeight;
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      renderer.setSize(w, h);
    });
  
    $("#world").append(renderer.domElement);
    renderer.render(scene, camera);
  
    addbutton.onclick = function() {
      if (GUIOpen == false) {
        GUIOpen = true;
        AddGUI.style.visibility = 'visible';
        saveCoords = {
          x: camera.position.x,
          y: camera.position.y,
          z: camera.position.z
        }
      }
    };
    xButton.onclick = function() {
      AddGUI.style.visibility = 'hidden';
      GUIOpen = false;
      hide(NoLength);
      hide(NoType);
      hide(NoPrice);
      cube.position.x = saveCoords.x;
      cube.position.y = saveCoords.y;
      cube.position.z = saveCoords.z;
    };
    xMoveButton.onclick = function() {
      hide(document.getElementById('MovementGUI'));
      camera.position.x = saveCoords.x;
      camera.position.y = saveCoords.y;
      camera.position.z = saveCoords.z;
      GUIOpen = false;
      GUI2Open = false;
    }
  
    moveDist.onkeypress = function() {
      if (moveDist.value &gt; 1 &amp;&amp; moveDist.value != 0) {
        hide(es);
      } else {
        show(es);
      }
    }
  
    addConfirm.onclick = function() {
      var length = document.getElementById('wood-length').value;
      var type = document.getElementById('wood-type').value;
      var price = document.getElementById('wood-price').value;
  
      hide(NoLength);
      hide(NoType);
      hide(NoPrice);
  
  
      if (price == "") {
        show(NoPrice);
        return;
      }
      if (length == "") {
        show(NoLength);
        return;
      }
      if (type == "type1") {
        show(NoType);
        return;
      }
      if (price != "" &amp;&amp; type != "type1" &amp;&amp; length != "") {
        hide(AddGUI);
        addBoard(price, type, length)
        GUIOpen = false;
        GUI2Open = false;
      }
    }
  
    function addBoard(e, e2, e3) {
  
      var dimDepth = .75;
      var dimHeight = 0;
  
      if (e2 == "woodType21") {
        dimHeight = 1.5;
      }
      if (e2 == "woodType31") {
        dimHeight = 2;
      }
      if (e2 == "woodType41") {
        dimHeight = 2.5;
      }
  
      var cubeGeometry = new THREE.BoxGeometry(dimDepth, dimHeight, e3);
      var cubeMaterial = new THREE.MeshLambertMaterial({
        color: 0xd9b38c
      });
      var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  
      cube.position.x = 0;
      cube.position.y = 5
      cube.position.z = 0
      cube.castShadow = true;
      scene.add(cube);
      objects.push(cube);
      selectedWood = cube;
    };
  
    movebutton.onclick = function() {
      saveCoords = {
        x: camera.position.x,
        y: camera.position.y,
        z: camera.position.z
      }
      camera.position.y = 100;
      camera.position.x = 20;
      camera.position.z = 0;
      document.getElementById('moveDist').value = 2;
      document.getElementById('MovementGUI').style.visibility = 'visible';
      GUIOpen = true;
      GUI2Open = true;
    };
  
    function hide(e) {
      e.style.visibility = "hidden";
    }
  
    function show(e) {
      e.style.visibility = "visible";
    }
  
    rotRight.onclick = function() {
  
    }
  
    addBoard(2, "woodType21", 2)
  
    mLeft.onclick = function() {
      selectedWood.position.z = parseInt(selectedWood.position.z + parseInt(moveDist.value));
    };
  
    mRight.onclick = function() {
      selectedWood.position.z = parseInt(selectedWood.position.z - parseInt(moveDist.value));
    };
  
    mFront.onclick = function() {
      selectedWood.position.x = parseInt(selectedWood.position.x - parseInt(moveDist.value));
    };
  
    mBack.onclick = function() {
      selectedWood.position.x = parseInt(selectedWood.position.x + parseInt(moveDist.value));
    };
  
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>edit: bump?</p>