# Aligning Objects/Faces using intersects

Hopefully someone can assist as I believe I am missing something basic with my maths methodology here. I have two meshes (A and B), which I would like to bring together. Using a raycaster I pick a point on each mesh and I would like A to move so that the point picked matches the point picked on B. That’s easy enough, but I would also like the faces to be parallel. (imagine A was a coffee cup, at any angle, B was a table also at any angle, I want to place the cup on the table by picking the bottom of the cup and the top of the table)

The information I have is 2 x Intersects from a raycaster. The intersects have the vectors picked, the parts and the faces (including their normal). My plan was to rotate Part A first, then move into position.

I am struggling to get the faces to become parallel before I move part A into position.

I have tried various things such as:

`````` let normal1 = intersect1.object.localToWorld(intersect1.face.normal).normalize();
let normal2 = intersect2.object.localToWorld(intersect2.face.normal).normalize();

let angleDifference = new THREE.Quaternion()
angleDifference.setFromUnitVectors(normal1,normal2);

partA.quaternion.multiply(angleDifference);
``````

I have also tried using the lookat

``````partA.up = normal1
partA.lookat(intersect2.point)
``````

I feel I am missing something really obvious here so I would greatly appriciate pointers on how to position a mesh parrellel to another mesh using 2 intersects

I am working on a similar problem.
Try using:
mesh.lookat(intersect[0].face.normal)

Do you mean something like this?
Click or touch the 3d model.
https://sbcode.net/extra_html/game.html

do you have the code?

view source on the page

I think seans example is based on WebDecals - three.js/webgl_decals.html at 45d40e8f0036f9b812e931bfd8c877b775fdebf8 · mrdoob/three.js · GitHub

and all the magic is here:

``````if ( intersects.length > 0 ) {

const p = intersects[ 0 ].point;
mouseHelper.position.copy( p );
intersection.point.copy( p );

const n = intersects[ 0 ].face.normal.clone();
n.transformDirection( mesh.matrixWorld );
n.multiplyScalar( 10 );

intersection.normal.copy( intersects[ 0 ].face.normal );
mouseHelper.lookAt( n );

const positions = line.geometry.attributes.position;
positions.setXYZ( 0, p.x, p.y, p.z );
positions.setXYZ( 1, n.x, n.y, n.z );
positions.needsUpdate = true;

intersection.intersects = true;

intersects.length = 0;

} else {

intersection.intersects = false;

}
``````