Using Three.js how can I move an object along a specified plane?

Question

I'm looking at the example on http://threejs.org site ( http://threejs.org/examples/webgl_interactive_draggablecubes.html ) and I see they are moving the selected cube along a plane relative to the camera. I get how the unprojection works with raycaster. What I don't get is how to set this up to always move the object along the ground (plane) even if the camera is at an angle. The idea is to have the user use a the mouse to move the object along the ground even if the camera is at an angle and is NOT looking perfectly down at it. I'm new to using Three.js so you might want to be verbose in explaining what I'm missing. Or maybe ask questions back if I didn't explain myself.

My project looks like this and I'm looking to move the boxes around with a mouse.

Answer 1

The example code creates a plane and updates it in the MouseMove event whenever the camera angle changes:

plane.setFromNormalAndCoplanarPoint(camera.getWorldDirection(plane.normal), INTERSECTED.position);

Instead of doing that, create the plane as

var plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);

which is the XZ plane at the origin.