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

1
votes

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.

enter image description here

1
javascript3dthree.js
As far as I can see the only thing you have to change is the assignment of the plane; the example uses plane.setFromNormalAndCoplanarPoint( camera.getWorldDirection( plane.normal ), INTERSECTED.position ); while you need the Y = 0 plane instead. Something like plane = new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), 0); – Chris G
Can you explain what the new THREE.Vector3(0,1,0) does along with the 0 after it? I'm a bit unsure of the Vector3 object and the parameters that you are putting into the Vector3 along with the THREE.Plane parameters. Thanks for your help – Dale
I'm creating a new plane. The constructor requires a normal and a distance. The (0, 1, 0) vector is the one pointing straight upwards; together with distance 0 from the origin I get the XZ plane. – Chris G
When this vector is created, this represents the direction that the norm of the plane faces, right? That is what the vector part is used for, just to show direction. To face down I imagine it would be -1 or 45 degrees it might be 0.5?..correct? – Dale
Yes, down is (0, -1, 0), but 45 degrees would be something like (1, 1, 0). – Chris G

1 Answers

3
votes

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.