CODEWITHSUNDEEP
javascript3dthree.js
Dale
Dale

Reputation: 1628

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

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

Upvotes: 1

Views: 2636

Answers (1)

user5734311
user5734311

Reputation:

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.

Upvotes: 3

Related Questions