As quads faces are no longer supported in three.js. I am having trouble Raycast picking segments between 4 vertices points as a square as they are now made up of triangle faces.

So my picking returns triangle shape not square:

                var faces = 10;
                var myplane = new THREE.Mesh(
                new THREE.PlaneGeometry(1000, 1000, faces, faces),
                new THREE.MeshNormalMaterial({
                color: 0x993333,
                wireframe: false
                }));

                objects.push(myplane);
                scene.add(myplane); 

                //raycast code


                if ( intersects.length > 0 ) {

                    _controls.noRotate = true;
                    var face = intersects[0].face;
                    var temp = intersects[0].object;
                    var geo = temp.geometry;

                    geo.vertices[face.a].z -= 20;
                    geo.vertices[face.b].z -= 20;
                    geo.vertices[face.c].z -= 20;
                    //want other face verts below basically
                    geo.vertices[face.d].z -= 20;
                    geo.vertices[face.e].z -= 20;
                    geo.vertices[face.f].z -= 20;   
                    geo.verticesNeedUpdate = true;

                    if(intersects[ 0 ].faceIndex % 2 == 0){
                        // geo.vertices[intersects[0].faceIndex + 1].z = 40;     
                       // console.log("Even face Index: " + intersects[ 0 ].faceIndex);

                     }else{
                        // console.log("Odd face Index: " + intersects[ 0 ].faceIndex -1);
                       //geo.vertices[intersects[0].faceIndex - 1].z = 40, of course doest work
                     }

                    }   

Below is a 2d example for a better vsual... Currently I get the red out-e , but I'm wanting to pick like the green example:

As quads faces are no longer supported in three.js. I am having trouble Raycast picking segments between 4 vertices points as a square as they are now made up of triangle faces.

So my picking returns triangle shape not square:

                var faces = 10;
                var myplane = new THREE.Mesh(
                new THREE.PlaneGeometry(1000, 1000, faces, faces),
                new THREE.MeshNormalMaterial({
                color: 0x993333,
                wireframe: false
                }));

                objects.push(myplane);
                scene.add(myplane); 

                //raycast code


                if ( intersects.length > 0 ) {

                    _controls.noRotate = true;
                    var face = intersects[0].face;
                    var temp = intersects[0].object;
                    var geo = temp.geometry;

                    geo.vertices[face.a].z -= 20;
                    geo.vertices[face.b].z -= 20;
                    geo.vertices[face.c].z -= 20;
                    //want other face verts below basically
                    geo.vertices[face.d].z -= 20;
                    geo.vertices[face.e].z -= 20;
                    geo.vertices[face.f].z -= 20;   
                    geo.verticesNeedUpdate = true;

                    if(intersects[ 0 ].faceIndex % 2 == 0){
                        // geo.vertices[intersects[0].faceIndex + 1].z = 40;     
                       // console.log("Even face Index: " + intersects[ 0 ].faceIndex);

                     }else{
                        // console.log("Odd face Index: " + intersects[ 0 ].faceIndex -1);
                       //geo.vertices[intersects[0].faceIndex - 1].z = 40, of course doest work
                     }

                    }   

Below is a 2d example for a better vsual... Currently I get the red out-e , but I'm wanting to pick like the green example:

• javascript
• three.js

Share Improve this question Follow edited Mar 29, 2015 at 23:06 Careen asked Mar 26, 2015 at 9:15 CareenCareen 56711 gold badge66 silver badges2828 bronze badges 7

• This problem is definitely not trivial. Without information to associate 2 triangles, on what criteria would you choose quads? You may want to consider a different approach depending on the actual problem you are trying to solve. – Alexander O'Mara Commented Mar 28, 2015 at 16:15
• Simply you have a plane and you want to raycast a face, the raycast returns one triangle , as opposed to a square / two triangle face. I was thinking that i could create a plane and store each face in pairs then in a loop then access them via reference...But i was hoping there an easy solution, Im sure the answer would help many as they start updating thier three.js versions in time – Careen Commented Mar 28, 2015 at 16:23
• 1 If you are raycasting against a plane, and the geometry is of type THREE.Geometry, intersects[ 0 ].faceIndex tells you the face index of the selected face. If faceIndex is even, then add 1 to get the face index of the 2nd face of the quad. If faceIndex is odd, then subtract 1. – WestLangley Commented Mar 28, 2015 at 18:49
• Find the longest edge in the intersected triangle, loop over all other faces and find the one that has same edge (point to vertices that make that edge). – meirm Commented Mar 28, 2015 at 21:38
• geo.vertices[intersects[0].faceIndex + 1].z = 40; im missing something here, the vertex are different to current face selection... – Careen Commented Mar 29, 2015 at 12:53

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 7 +50

try this code to get intersection faces

if ( intersects.length > 0 )
{
    var faceIndex = intersects[0].faceIndex;
    var obj = intersects[0].object;
    var geom = obj.geometry;
    var faces = obj.geometry.faces;
    var facesIndices = ["a","b","c"];
    facesIndices.forEach(function(indices){
        geom.vertices[faces[faceIndex][indices]].setZ(-10);
    });
    if(faceIndex%2 == 0){
        faceIndex = faceIndex+1;
    }else{
        faceIndex = faceIndex-1;
    }
    facesIndices.forEach(function(indices){
        geom.vertices[faces[faceIndex][indices]].setZ(-10);
    }); 
    geom.verticesNeedUpdate = true;                               
}

In the general case, getting and changing the geometry of a raycast to mesh triangle intersection is just:

var face = intersects[0].face;
var obj = intersects[0].object;
var geom = obj.geometry; 

var vertA = geom.vertices[face.a];
var vertB = geom.vertices[face.b];
var vertC = geom.vertices[face.c];

vertA.setY(100);
vertB.setY(110);
vertC.setY(105);

geom.verticesNeedUpdate = true;

No need to iterate through the faces array, or build a contrived face vertex array just to loop through it in the next step.