CODEWITHSUNDEEP
webglthree.js
gotohales
gotohales

Reputation: 3695

intersectObjects is not a function

I've been working with the Google WebGL Globe and trying to get some rudimentary interactions in place, one of which includes clicking on the bars that are generated by latitude, longitude, etc.

From what I have seen looking through loads of three.js examples, the answer lies in a projector and ray to find intersections. The problem I am running into is with the code below, which has been slightly tweaked from a couple other sources: 

var projector = new THREE.Projector();

if (event.target == renderer.domElement) {
    var x = event.clientX;
    var y = event.clientY;
    var v = new THREE.Vector3((x/w)*2-1, -(y/h)*2+1, 0.5);
    projector.unprojectVector(v, camera);
    var ray = new THREE.Ray(camera.position, v.subSelf(camera.position).normalize());
    var intersects = ray.intersectObjects(scene.children);
    if (intersects.length > 0) {
      console.log("success");
    }
}

"ray.intersectObjects is not a function" is the error, specifically.

Any ideas? Thanks in advance.

Upvotes: 1

Views: 3529

Answers (3)

dansch
dansch

Reputation: 6267

This wasn't answered... the solution is to use new THREE.Raycaster -- not THREE.Ray

Upvotes: 16

WestLangley
WestLangley

Reputation: 104803

It appears you are using an old version of the library. Update to r.52.

Upvotes: 2

Valay
Valay

Reputation: 1999

Please try to add scene objects in an array and try below code.

function onDocumentMouseDown( event ) {
            event.preventDefault();             
            var vector = new THREE.Vector3( 
                    ( event.clientX / window.innerWidth ) * 2 - 1, 
                    - ( event.clientY / window.innerHeight ) * 2 + 1, 
                    0.5 );

                projector.unprojectVector( vector, camera );
                var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

                var intersects = ray.intersectObjects( objects );                                   

                if ( intersects.length > 0 ) {              
                    console.log("success");                 
                }                          

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'mouseup', onDocumentMouseUp, false );
                document.addEventListener( 'mouseout', onDocumentMouseOut, false );


            mouseXOnMouseDown = event.clientX - windowHalfX;
            targetRotationOnMouseDown = targetRotation;
        }

Upvotes: 0

Related Questions