Three.js Raycaster not intersecting my custom mesh

Question

I'm new to Three.js. Raycaster works find for imported objects, but it doesn't work when I create a custom mesh as follows:

        var geom = new THREE.Geometry(); 
        var v1 = new THREE.Vector3(0,0,0);
        var v2 = new THREE.Vector3(0,500,0);
        var v3 = new THREE.Vector3(-400,-500,50);

        geom.vertices.push(v1);
        geom.vertices.push(v2);
        geom.vertices.push(v3);

        geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
        geom.computeFaceNormals();

        meshFrame = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );

        meshFrame.position.z = 20;
        meshFrame.rotation.y = 0;
        meshFrame.verticesNeedUpdate = true;
        scene.add(meshFrame);

What do do you think problem could be? Rays are passing by in the triangle, but still intersectObjects return empty. Here, my raycasting code:

        var ever = bver.clone();

        ever.setComponent(2,ever.z+150);

        var geometryF = new THREE.Geometry();
        geometryF.vertices.push(
            bver,
            ever
        );

        var bray = new THREE.Ray(bver, new THREE.Vector3(0 ,0, 0));
        bray.lookAt(ever);

        var raycaster = new THREE.Raycaster();
        raycaster.set( bray.origin, bray.direction);            

        var intersects = raycaster.intersectObjects( [meshFrame] );

        var x = [scene.getObjectByName( "meshFrame" )];
        print(meshFrame.geometry.vertices);

        console.log(intersects);

        var lineF = new THREE.Line( geometryF, materialF );
        scene.add( lineF );

Thank you very much for your help.

On a side note, you should update a mesh's geometry's vertices, like so : meshFrame.geometry.verticesNeedUpdate = true, or even geom.verticesNeedUpdate = true. Preferably once right after you're finished pushing new vertices/modifying them. — Console-buche

Sam Sam · Accepted Answer · 2016-11-22T12:58:26

Okay I solved the problem. Apparently the face orientation was the problem. When I reversed it, it started to work.

Three.js Raycaster not intersecting my custom mesh

1 Answers