# How to detect intersections of two faces of two bufferGeometryBox?

**URL:** <https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [May 27, 2019, 12:11pm UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761 "2019-05-27T12:11:31Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [May 27, 2019, 12:11pm UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/1 "2019-05-27T12:11:31Z")

</div>

I am developing a 3d configurator. A cube appears on the scene. If you click on the side of this cube, a rectangle appears. The problem is that if I click on the same side of the cube, another one will be added over the existing rectangle. I would like to block the clicked side. My cubes and rectangles is buffer geometry. I can get raycasting face (a,b,c) and faceIndex. But how to get intersection of two different faces of two different objects? Sorry for my english

This is my project [https://alovert.ru](https://alovert.ru/)

[![enter image description here](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/e/e464c66b38b939a6d46fb1d54a8f5fdf030cae84.png)](https://i.stack.imgur.com/woZCs.png) [![enter image description here](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/688b1e369533f2e5c874fdffad8a80a689797863.png)](https://i.stack.imgur.com/5NMda.png)

my code

```auto
if (intersect) {
            var index = Math.floor( intersect.faceIndex / 6 );
                if ( intersect.object.name == 'cube' ) {

                    switch ( index ) {
                        case 0: load( intersect.object.position.x + 6.58, intersect.object.position.y, intersect.object.position.z, 'beam', 0, 0, 0 ); break;
                        case 1: load( intersect.object.position.x - 6.58, intersect.object.position.y, intersect.object.position.z, 'beam', 0, 0, 0 ); break;
                        case 2: load( intersect.object.position.x, intersect.object.position.y + 6.58, intersect.object.position.z, 'beam', 0, 0, 90 ); break;
                        case 3: load( intersect.object.position.x, intersect.object.position.y - 6.58, intersect.object.position.z, 'beam', 0, 0, 90 ); break;
                        case 4: load( intersect.object.position.x, intersect.object.position.y, intersect.object.position.z + 6.58, 'beam', 0, 90, 0 ); break;
                        case 5: load( intersect.object.position.x, intersect.object.position.y, intersect.object.position.z - 6.58, 'beam', 0, 90, 0 ); break;
                    }

                }`

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 27, 2019, 12:40pm UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/2 "2019-05-27T12:40:37Z")

</div>

/cc

> <https://stackoverflow.com/questions/56325178/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox>

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 27, 2019, 1:34pm UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/3 "2019-05-27T13:34:41Z")

</div>

A very rough concept with additional “flags” for sides:  
[https://jsfiddle.net/prisoner849/oxujpaqy/](https://jsfiddle.net/prisoner849/oxujpaqy/)  
Click a side to add a square. If you click the same side again, you’ll get a message “Occupied!” and won’t be able to add another square to the side.

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [May 27, 2019, 1:50pm UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/4 "2019-05-27T13:50:02Z")

</div>

Thank you! I thought about that, but what i should do in this case?

 ![%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9-1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3d5affa04d085b20e1e07eead5e531f50bd1f172.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 27, 2019, 1:55pm UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/5 "2019-05-27T13:55:39Z")

</div>

You can cast a ray from the intersected side, find intersection with an opposite box and do the same thing with flags on that box.

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [May 27, 2019, 1:57pm UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/6 "2019-05-27T13:57:37Z")

</div>

Its sounds very hard for me. I use three js just a couple of weeks…Can you please show me some example? Thank you very much

---

<div class="post-metadata">

**Author:** ![sciecode](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sciecode/32/5623_2.png) [@sciecode](https://discourse.threejs.org/u/sciecode)\
**Post date:** [May 27, 2019, 2:02pm UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/7 "2019-05-27T14:02:28Z")

</div>

Only a small suggestion over what prisoner did, you might want to bind the OrbitControls rotation/pan button to right click. So you don’t interfere with all the mesh clicking. Having all the interactions on the same button is somewhat troublesome.

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [May 27, 2019, 2:05pm UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/8 "2019-05-27T14:05:03Z")

</div>

Yes, this is a temporary solution

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 27, 2019, 2:07pm UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/9 "2019-05-27T14:07:48Z")

</div>

You can read this topic [How to find wall thickness of 3d models (STL) files?](https://discourse.threejs.org/t/how-to-find-wall-thickness-of-3d-models-stl-files/5719), it contains information about how to get a random point on a face.  
When you know how to get those coordinates, you need to convert it to world coordinates (see [this method](https://threejs.org/docs/#api/en/core/Object3D.localToWorld)), then you have to convert to world coordinates the normal of the face. Having point and normal in world coordinates (origin and direction) you can cast a ray.

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [May 27, 2019, 2:14pm UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/10 "2019-05-27T14:14:49Z")

</div>

Much thanks! I try to read this

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [May 29, 2019, 4:02am UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/11 "2019-05-29T04:02:03Z")

</div>

Hi! I set ray from faces on my cube, but how i can check intersection between two faces?

 ![%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%20(254)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/e/efc478fecc171dd83749e1a503cf6d44f51d5cb9.png)

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [May 29, 2019, 4:06am UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/12 "2019-05-29T04:06:00Z")

</div>

i just copied code from your link

```
function rayCast(mesh) {
                    
                      var minDist = 0.6;
                    
                      var raycaster = new THREE.Raycaster();
                      var intersects = [];
                    
                      var pos = mesh.geometry.attributes.position;
                    
                      var ori = new THREE.Vector3();
                      var dir = new THREE.Vector3();
                      var trc = new THREE.Vector3();
                      var a = new THREE.Vector3(),
                        b = new THREE.Vector3(),
                        c = new THREE.Vector3(),
                        midPoint = new THREE.Vector3(),
                        tri = new THREE.Triangle();
                      var closest = new THREE.Vector3();
                      var geom = new THREE.Geometry();
                      console.log(mesh);
                       
                      var faces = pos.count / 3;
                      for (let i = 0; i < faces; i++) {
                        a.fromBufferAttribute(pos, i * 3 + 0);
                        b.fromBufferAttribute(pos, i * 3 + 1);
                        c.fromBufferAttribute(pos, i * 3 + 2);
                        tri.set(a, b, c);
                        tri.getMidpoint(ori);
                        tri.getNormal(dir)
                        raycaster.set(ori, dir);
                        intersects = raycaster.intersectObject(mesh);
                        scene.add(new THREE.ArrowHelper(raycaster.ray.direction, raycaster.ray.origin, 300, 0xff0000) );
                     /* minDist = intersects[intersects.length > 1 ? 1 : 0].distance;
                         console.log(minDist);*/
                       
                    	//	minDist = Math.min(minDist, intersects[intersects.length > 1 ? 1 : 0].distance);
                      }

                    }
```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 29, 2019, 7:17am UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/13 "2019-05-29T07:17:36Z")

</div>

> [@Arkadiy\_Vinkovskiy](#):
>
> `tri.getMidpoint(ori);`

I used it for simplicity and to show the conception, but it’s not the ultimate solution. If you’ve read [How to find wall thickness of 3d models (STL) files?](https://discourse.threejs.org/t/how-to-find-wall-thickness-of-3d-models-stl-files/5719) carefully, then at the end of it you could find the link to the [SO answer](https://stackoverflow.com/a/55159041/4045502) with the solution of how to get a random point on a face (triangle).

You say, that you just copied a piece of code. But it’s irrelevant. It’s just a concept of how to get origin and direction for a raycaster. And in your case, you have to convert them from local coordinates to world coordinates. After that you have to find intersection with the cube that is opposite to the current one and use that concept with flags for sides. Thus, each cube you add to the scene already has to have `.userData.sides` property.

Please, read about [.intersectObjects](https://threejs.org/docs/#api/en/core/Raycaster.intersectObjects) method of raycaster.

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [May 29, 2019, 7:50am UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/14 "2019-05-29T07:50:59Z")

</div>

sorry, I don’t quite understand why i need a random point if i can take the middle one? and do not quite understand why convert to world coordinates? I thought that if I just cast a ray from one object to another, I could check the face. I’m sorry I’m really noob in this question

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [May 29, 2019, 8:08am UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/15 "2019-05-29T08:08:50Z")

</div>

And i’m not sure, that i shoul block only the opposite side

 ![%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9-1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c25335be2f2b1a004fa166edf8d51437ebeda310.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 29, 2019, 8:14am UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/16 "2019-05-29T08:14:54Z")

</div>

> [@Arkadiy\_Vinkovskiy](#):
>
> Thank you! I thought about that, but what i should do in this case?
> 
> ![Безымянный-1.png](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3d5affa04d085b20e1e07eead5e531f50bd1f172.png)

What do I have to think, looking at this? Which sides must be blocked? And sides of what?  
To be honest, I’m lost 🙂

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [May 29, 2019, 8:17am UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/17 "2019-05-29T08:17:04Z")

</div>

Sorry, my bad. Every occupied side must be blocked

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [May 31, 2019, 6:34am UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/18 "2019-05-31T06:34:48Z")

</div>

Hi again! I soppose i find a solutuion. I create a function, that will check intersections between objects. Raycaster will set from every face of objects and if ray intersects the face of nearest object it will disabled.  
But how i can set ray from every object that appears on the scene? And how i can find intersection between them?

I use this code to set ray from faces of object

```
function rayCast( mesh ) {
                    
      
                        var raycaster = new THREE.Raycaster();
                        var intersects = [];
                        
                        var pos = mesh.geometry.attributes.position;  
                        
                        var ori = new THREE.Vector3();
                        var dir = new THREE.Vector3();
                        var trc = new THREE.Vector3();
                        var a = new THREE.Vector3(),
                        b = new THREE.Vector3(),
                        c = new THREE.Vector3(),
                        midPoint = new THREE.Vector3(),
                        tri = new THREE.Triangle();
                        var closest = new THREE.Vector3();
                        
               
                        
                        var faces = pos.count / 3;
                        for (let i = 0; i < faces; i++) {
                            a.fromBufferAttribute(pos, i * 3 + 0);
                            b.fromBufferAttribute(pos, i * 3 + 1);
                            c.fromBufferAttribute(pos, i * 3 + 2);
                            tri.set(a, b, c);
                            tri.getMidpoint(ori);
                            tri.getNormal(dir)
                            
                            raycaster.set(ori, dir);
                            intersects = raycaster.intersectObject(mesh, true);
                            if ( intersects.length > 0 ) {
                            console.log(Math.floor(intersects[0].faceIndex / 6));
                          
                        }
                    
                        }
                    
                    }
```

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [May 31, 2019, 7:00am UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/19 "2019-05-31T07:00:26Z")

</div>

Ok. I push all my objects in a group. And in the function where my object is created, I insert this code

```
 var raycaster = new THREE.Raycaster();
                var intersects = [];
                
                var pos = box.geometry.attributes.position;  
                
                var ori = new THREE.Vector3();
                var dir = new THREE.Vector3();
                var trc = new THREE.Vector3();
                var a = new THREE.Vector3(),
                b = new THREE.Vector3(),
                c = new THREE.Vector3(),
                midPoint = new THREE.Vector3(),
                tri = new THREE.Triangle();
                var closest = new THREE.Vector3();
                
                // console.log(mesh);
                
                var faces = pos.count / 3;
                for (let i = 0; i < faces; i++) {
                    a.fromBufferAttribute(pos, i * 3 + 0);
                    b.fromBufferAttribute(pos, i * 3 + 1);
                    c.fromBufferAttribute(pos, i * 3 + 2);
                    tri.set(a, b, c);
                    tri.getMidpoint(ori);
                    tri.getNormal(dir)
                    
                    raycaster.set(ori, dir);
                    intersects = raycaster.intersectObject(group, true);
                    if ( intersects.length > 0 ) {
                        console.log(Math.floor(intersects[0].faceIndex / 6));
                        console.log(intersects[0]);
                    }
              
                }

```

Intersections works fine, but faceIndex number and number of face (a,b,c) is too large. Its can be 30 or 1800. Is this code correct?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 31, 2019, 7:09am UTC](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761/20 "2019-05-31T07:09:57Z")

</div>

> [@Arkadiy\_Vinkovskiy](#):
>
> `Math.floor(intersects[0].faceIndex / 6)`

Just out of curiousity, why 6?

[Next page](https://discourse.threejs.org/t/how-to-detect-intersections-of-two-faces-of-two-buffergeometrybox/7761.md?page=2)