Having trouble with Three js intersection face vertex positions

0
votes

Hy! I'm working in three js. I'm loading modells by THREE.JSONLoader. Now I'm at the part to select these objects and their faces. It is working. But now I want to get the vertices of the selected face, check the code below:

intersections = raycaster.intersectObjects( objects );

if ( intersections.length > 0 ) {

            if ( intersected != intersections[ 0 ].object ) {

                intersected = intersections[ 0 ].object;

                /*HERE*/
                    console.log("Hit-face a @ " + intersections[0].face.a);
                    console.log("Hit-face b @ " + intersections[0].face.b);
                    console.log("Hit-face c @ " + intersections[0].face.c);

                    var faceColorMaterial = new THREE.MeshBasicMaterial( 
                    { color: 0xffffff, vertexColors: THREE.FaceColors } );

                    var sphereGeometry = new THREE.SphereGeometry( 0.1, 32, 16 );
                    var sphereGeometryf = new THREE.SphereGeometry( 3, 32, 16 );
                    var sphereGeometrys = new THREE.SphereGeometry( 3, 32, 16 );
                    var sphereGeometryt = new THREE.SphereGeometry( 3, 32, 16 );

                    var sphere = new THREE.Mesh( sphereGeometry, faceColorMaterial );
                    sphere.position.set(intersections[0].point.x, intersections[0].point.y, intersections[0].point.z);

                    var spheref = new THREE.Mesh( sphereGeometryf, faceColorMaterial );
                    spheref.position.set(intersections[0].object.geometry.vertices[intersections[0].face.a].x + intersections[0].object.position.x,
                    intersections[0].object.geometry.vertices[intersections[0].face.a].y + intersections[0].object.position.y,
                    intersections[0].object.geometry.vertices[intersections[0].face.a].z + intersections[0].object.position.z);

                    var spheres = new THREE.Mesh( sphereGeometrys, faceColorMaterial );
                    spheres.position.set(intersections[0].object.geometry.vertices[intersections[0].face.b].x + intersections[0].object.position.x,
                    intersections[0].object.geometry.vertices[intersections[0].face.b].y + intersections[0].object.position.y,
                    intersections[0].object.geometry.vertices[intersections[0].face.b].z + intersections[0].object.position.z);

                    var spheret = new THREE.Mesh( sphereGeometryt, faceColorMaterial );
                    spheret.position.set(intersections[0].object.geometry.vertices[intersections[0].face.c].x + intersections[0].object.position.x,
                    intersections[0].object.geometry.vertices[intersections[0].face.c].y + intersections[0].object.position.y,
                    intersections[0].object.geometry.vertices[intersections[0].face.c].z + intersections[0].object.position.z);



                    scene.add(sphere);
                    scene.add(spheref);
                    scene.add(spheres);
                    scene.add(spheret);
                /*HERE*/
            }
        }

So in this example code, the "sphere" is the intersection point where the Ray meets with the 1st object.

spheref-spheres-spheret are the vertices visualization, but when I add theese spheres to thoose vertices, they're somewhere else(visible).

The method above working with this example,by replacing the onDocumentMouseDown event with my code above: http://stemkoski.github.io/Three.js/Mouse-Click.html

But it is not working with the loaded objects.

2
javascriptthree.jsintersectionvertex

2 Answers

0
votes

OK I solved it ^^..., the problem was with the scale...

So the problem was I used this: myobject.scale.set( 3, 3, 3 );

But the vertices coordinates didn't change, so I commented out this line, and I'll export 3 times bigger modells. But on the other hand if you want to work with a scalled modell, then you should add the x,y,z values 3 times(x times according to your scale, where x is a number).

0
votes

You missed to apply the WorldMatrix of the object to your points.

Here is how it should work:

First you get the face Point of the original mesh as follows. 

PointA = intersections[0].object.geometry.vertices[intersections[0].face.a]

On this point there is no scaling, rotation, translation. So you need to add these to your point to get the right position. For that you just apply the WorldMatrix of the Object to the Point.

PointA.applyMatrix4(intersections[0].object.matrixWorld);

Now you have the real coordinates where you have to put you spheres. (PointA.x, PointA.y, PointA.z)