Aligning Objects/Faces using intersects

Questions
1

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

2

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

3

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

4

do you have the code?

5

view source on the page

6

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 );
						n.add( intersects[ 0 ].point );

						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;

					}