javascriptthree.jsray-picking

How to select objects when using the Orthographic camera in Three Js


I've got an isometric level going and I'm trying to select objects within the level.

I've looked at a few Stackoverflow answers including this one Orthographic camera and selecting objects with raycast but at the moment, nothing seems to be working. Something is off, perhaps it has something to do with my camera set up, so here is the relevant code I am using.

// set up camera
scope.camera = new THREE.OrthographicCamera( - scope.cameraDistance * aspect, scope.cameraDistance * aspect, scope.cameraDistance, - scope.cameraDistance, - height, 1000 );
scope.camera.position.set(0 , 0 , 0);
scope.camera.rotation.order = scope.rotationOrder; // = "YXZ"
scope.camera.rotation.y = - Math.PI / 4;
scope.camera.rotation.x = Math.atan(- 1 / Math.sqrt(2));

When I loop through my matrix and add the tiles, I add them all to a new THREE.Object3D() and then add that object to the scene. My onMouseMove event looks like this

onMouseMove:function(event) {
    event.preventDefault();

    var scope = Game.GSThree,
        $container = $(scope.container.element),
        width = $container.width(),
        height = $container.height(),
        vector,
        ray,
        intersects;

    scope.mouse.x = (event.clientX / width) * 2 - 1;
    scope.mouse.y = - (event.clientY / height) * 2 + 1;

    vector = new THREE.Vector3(scope.mouse.x , scope.mouse.y , 0.5);
    ray = scope.projector.pickingRay(vector , scope.camera);
    intersects = ray.intersectObjects(scope.tiles.children);

    if(intersects.length) {
        console.log(intersects[0]);
    }
}

Now the problem is that something is very off. The ray intersects with things when it is no where near them and also seems to intersect with multiple children of tiles at a time. If I log intersects.length it sometimes returns 3, 2 or 1 object(s). Just in case it is relevant; my material for each object mesh is a new new THREE.MeshFaceMaterial() with an array containing 6 new THREE.MeshBasicMaterial() passed in.

Any ideas?


Solution

  • It's always the stupidest thing; my container element had padding-left:250px; on it. Removed that and it works. Always correct for your offsets!