Raycasting works only on one half of an object

Questions
, ,
1

Update: a solution has been found, in case anyone may find themselves with the same problem.
Two things need to be done:

  1. After adding the model to the scene we need to update the MatrixWorld:

scene.updateMatrixWorld();

  1. The vectors the raycaster uses have to be normalized. So we have to change two lines of code to:

geometry.vertices.push(v1.normalize());
geometry.vertices.push(v2.normalize());

__

The goal of is to trace the inner outline of an obj. and extrude that outline into a new shape. The raycasting starts in the middle of the world (0,0,0) with the obj. placed around it.

file:///D:/Mach%20Parat/raycasting/raycast_stackoverflow/raycast.html

The red lines are the visualized directions of the rays. Everytime the rays intersect with the object, the coordinates are put into an array - based on that array, the yellow extrude-object is generated.

Problem is that only half of the rays seem to register hitting the obj.

The obj. is a teapot generated in Blender - The cup is half-full I guess.

Using a simple object like a sphere (default object in Blender) works fine:

dcz4o2r-19c407a3-7b1d-458c-b39a-61189839a044.png733×621 11.8 KB

But only so long as the object is centered (0,0,0). Move it a few pixels and the same problem occurs:

dcz4o2l-2c6a17f8-e3a4-464e-a022-151839581355.png717×483 11.9 KB

it’s up for download here, if you want to check for yourself: http://download.mach-parat.de/raycast.zip

//////////////////////// Model
var model= “models/teapot.obj”;

        addObject(model);

    }


    function addObject (model){

        var loader = new THREE.OBJLoader();

            loader.load( model, function ( object ) {
            console.log("load");
            console.log(object);
            var material = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide  } );

            scene.add( object );

            object.traverse( function ( child ) {
                   if ( child instanceof THREE.Mesh ) {
                      child.material = material;

                        child.updateMatrix(); // as needed
                    child.updateMatrixWorld(); // as needed
                      objects.push(child);
                   }
            } );

            setupRaycaster();


        });

    } 

    /////////////////////////////////// RAYCASTER AND RED LINE VISUALISATION
    function setupRaycaster(){

        var material = new THREE.LineBasicMaterial({color: 0xff0000});
        var raylength=100;
        var count=90;

        var angle=360/count;


        for (var i=0; i<count; i++){ 

            var x=0;
            var y=0;
            var z=0;


            var v1=new THREE.Vector3( x, y, z);
            var v2=new THREE.Vector3( x+raylength*Math.cos(i*angle*Math.PI/180), y+raylength*Math.sin(i*angle*Math.PI/180), z);

            var geometry = new THREE.Geometry();
            geometry.vertices.push(v1); 
            geometry.vertices.push(v2);

            var line = new THREE.Line( geometry, material );
            scene.add( line );

            var raycaster = new THREE.Raycaster();
            raycaster.set ( v1, v2 );


            var intersects = raycaster.intersectObjects( objects , true);
            console.log(i,intersects);
            if(intersects[0]){
                cutOutPoints.push(intersects[0].point);
            }

        }

        console.log(cutOutPoints);



        /////////////////////////////////// YELLOW EXTRUDE GEOMETRY
        var cutOutShape = new THREE.Shape();

        if(cutOutPoints.length){// wenn cutpoints in Array
            cutOutShape.moveTo(cutOutPoints[0].x, cutOutPoints[0].y);

            for (var i=1; i<cutOutPoints.length; i++){ 
                cutOutShape.lineTo(cutOutPoints[i].x, cutOutPoints[i].y);
            }

            var cutOutMaterial = new THREE.LineBasicMaterial({color: 0xffcc00});

            var extrudeSettings = { amount: 60, bevelEnabled: false};

            var geometry = new THREE.ExtrudeGeometry( cutOutShape, extrudeSettings );

            var cutOutMesh = new THREE.Mesh( geometry, cutOutMaterial );
            scene.add( cutOutMesh );
        }

    }
2

/cc