在Three.js中沿着平面移动对象

Question

所以基本上我想做的是当我有一个选定的对象时，我希望能够在面向相机的平面上移动它。我在场景中有OrbitControls.js所以我必须禁用它。这是我想要的一个例子： http://threejs.org/examples/webgl_interactive_draggablecubes.html 正如您所看到的，我希望能够在选中时移动对象，但仍然可以在未选中时使用OrbitControls。这是我到目前为止的代码：

$(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 && 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 > 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 > 1 && 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 != "" && type != "type1" && 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));
  };

});

编辑：碰撞？