# Aligning Objects/Faces using intersects

**URL:** <https://discourse.threejs.org/t/aligning-objects-faces-using-intersects/10445>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [October 25, 2019, 7:06am UTC](https://discourse.threejs.org/t/aligning-objects-faces-using-intersects/10445 "2019-10-25T07:06:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![user123](https://avatars.discourse-cdn.com/v4/letter/u/ed655f/32.png) [@user123](https://discourse.threejs.org/u/user123)\
**Post date:** [October 25, 2019, 7:06am UTC](https://discourse.threejs.org/t/aligning-objects-faces-using-intersects/10445/1 "2019-10-25T07:06:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![devashriv](https://avatars.discourse-cdn.com/v4/letter/d/958977/32.png) [@devashriv](https://discourse.threejs.org/u/devashriv)\
**Post date:** [April 12, 2020, 9:13pm UTC](https://discourse.threejs.org/t/aligning-objects-faces-using-intersects/10445/2 "2020-04-12T21:13:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [April 13, 2020, 2:38pm UTC](https://discourse.threejs.org/t/aligning-objects-faces-using-intersects/10445/3 "2020-04-13T14:38:00Z")

</div>

Do you mean something like this?  
Click or touch the 3d model.  
[https://sbcode.net/extra\_html/game.html](https://sbcode.net/extra_html/game.html)

---

<div class="post-metadata">

**Author:** ![SEBASTHIAN\_COPCA](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sebasthian_copca/32/10448_2.png) [@SEBASTHIAN\_COPCA](https://discourse.threejs.org/u/SEBASTHIAN_COPCA)\
**Post date:** [April 20, 2020, 11:33pm UTC](https://discourse.threejs.org/t/aligning-objects-faces-using-intersects/10445/4 "2020-04-20T23:33:48Z")

</div>

do you have the code?

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [April 21, 2020, 6:24am UTC](https://discourse.threejs.org/t/aligning-objects-faces-using-intersects/10445/5 "2020-04-21T06:24:38Z")

</div>

view source on the page

---

<div class="post-metadata">

**Author:** ![sylwesterdigital](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sylwesterdigital/32/11792_2.png) [@sylwesterdigital](https://discourse.threejs.org/u/sylwesterdigital)\
**Post date:** [May 9, 2022, 8:11pm UTC](https://discourse.threejs.org/t/aligning-objects-faces-using-intersects/10445/6 "2022-05-09T20:11:46Z")

</div>

I think seans example is based on WebDecals - [three.js/webgl\_decals.html at 45d40e8f0036f9b812e931bfd8c877b775fdebf8 · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/blob/45d40e8f0036f9b812e931bfd8c877b775fdebf8/examples/webgl_decals.html)

and all the magic is here:

```javascript
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;

					}

```