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?
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!