Three.js Raycaster not detecting scene mesh

3
votes

I am using three.js r67 in Chrome Version 35.0.1916.153 m

I am attempting to intersect some custom meshes that I have created in my scene. The raycaster does not appear to be registering the meshes although they exist within scene.children .

Mesh creation code:

if (modelVertices != null && modelVertices.length >= 3) {
            triangles = THREE.Shape.Utils.triangulateShape ( modelVertices, holes );

            for( var i = 0; i < triangles.length; i++ ){

               modelGeometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][2], triangles[i][2] ));

                }

            modelGeometry.computeFaceNormals();
            var modelMesh = new THREE.Mesh(modelGeometry, material);
            modelMesh.material.side = THREE.DoubleSide;
            polyhedralzGroup.add(modelMesh)
    }

Raycasting code:

                var projector = new THREE.Projector();
                projector.unprojectVector( vector, camera );

                var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
                //console.log("Work");
                // See if the ray from the camera into the world hits one of our meshes

                var intersects = raycaster.intersectObjects( scene.children, true );
                helper.position.set( 0, 0, 0 );
                //console.log(intersects.length);
                if ( intersects.length > 0 ) {  
                    if (intersects[ 0 ].face != null) {
                    helper.lookAt( intersects[ 0 ].face.normal );
                    helper.position.copy( intersects[ 0 ].point ); 
}

As in the code, I am using computeFaceNormals(); so this isn't the issue (see here). Oddly the scene seems to be intersecting other geometries that I constructed using simple triangles (i.e. not using THREE.Shape.Utils.triangulateShape ; just pushing triangle vertices and faces manually) perfectly fine which means this can't be an issue with not taking into account the canvas offset for intersecting. I have examined both geometries and there doesn't seem to be any fundamental differences between the two.

Example of object not being intersected

Does anyone have any ideas as to what the issue may be?

2
javascriptthree.jsmeshraycasting

2 Answers

5
votes

The issue was to do with the fact with the way the vertices had been constructed: using strings. Although three.js allows you to construct the vertices (and therefore the geometry and the mesh) and in turn display the geometry using strings, it does not allow you to use those vertices for raycasting. More succinctly the issue could be reduced to:

changing this:

aVertex = new THREE.Vector3( part[0], part[1] , part[2] );

to this:

aVertex = new THREE.Vector3( parseFloat(part[0]), parseFloat(part[1]) , parseFloat(part[2]) );

I'm not really sure if this is a bug or a feature, as it seems that no errors are thrown when using vertices in string format, although you can't raycast on objects with string vertex geometries (possibly because the normals can't be computed?).

4
votes

your Problem is you pass the scene.children to the raycaster.

 var intersects = raycaster.intersectObjects( scene.children, true );

solution 1. Load your model in a object 

var objects = [];

objects.push(mesh);

and then 

var intersects = raycaster.intersectObjects( objects, true );

solution 1.

pass your object in a second scene and pass this to your raycaster

var scene_2

scene_2 = new THREE.Scene();
scene.add(scene_2);
scene_2.add(mesh);

var intersects = raycaster.intersectObjects( scene_2, true );