CODEWITHSUNDEEP
javascriptthree.jsdrag
JSdc
JSdc

Reputation: 121

Three.js constrain object drag to surface of another object

I want to be able to drag an object, but have it 'snap' to the surface of another. I don't care if it only 'snaps' when I release the mouse, or if it updates live.

Ultimate goal: create a smooth shape in Blender, import it, and be able to snap drag to that shape. I know I can do this with procedurally generated surfaces with a bit of math, but I'm looking to use some non-procedurally generated surfaces.. or at least, the surfaces I'm wanting to use I haven't figured out how to generate procedurally yet.

I tried taking this example: http://stemkoski.github.io/Three.js/Mouse-Click.html and changing the 'click' effect to a 'drag' effect. Then I incorporated it with this example: http://mrdoob.github.io/three.js/examples/webgl_interactive_draggablecubes.html

The effect is working, in that I can drag any of the cubes across the sphere, and the face hilights.

Then I tried taking the dragged object, and snapping it to the face of the sphere using this flawed logic:

SELECTED.position.x = intersectsRay[ 0 ].face.normal.x;
SELECTED.position.y = intersectsRay[ 0 ].face.normal.y;
SELECTED.position.z = intersectsRay[ 0 ].face.normal.z;

The problem: the dragged objects always snap to the center of the sphere...

The reason being, (I think . . . ) is the face 'normal' is the center of the (sphere) in this case.

Does anyone know a way to find the x,y,z of the FACE (no matter what the shape), or any other way to implement this concept?

Upvotes: 2

Views: 3153

Answers (1)

GuyGood
GuyGood

Reputation: 1377

An easy solution would be to not use the local (and normalized) face normal, instead for example you could use the vertex index.

Something like: 

intersectedOBJ.geometry.vertices[intersect.face.a]

This way, you would snap your dragged object to one of the face's vertices.

Also there is a face "centroid" that you can use or you could calculate the center of the face on your own.

Upvotes: 3

Related Questions