Currently, I am working on an isometric level and facing issues while trying to select objects within the level.
I have tried various solutions from Stackoverflow, such as this one Orthographic camera and selecting objects with raycast. However, none of them seem to be working for me. There might be a problem with my camera setup. Here is the relevant code snippet that I am using:
// setting up the 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));
While looping through my matrix and adding tiles, I add them all to a new THREE.Object3D() and then add that object to the scene. My onMouseMove event function 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]);
}
}
The issue I am facing is quite perplexing. The ray seems to intersect with objects even when it is not close to them and also intersects with multiple children of tiles simultaneously. Upon logging intersects.length, it sometimes returns 3, 2, or 1 object(s). Just in case it is pertinent information; the material for each object mesh consists of a new THREE.MeshFaceMaterial() with an array containing 6 new THREE.MeshBasicMaterial().
Any insights into what might be causing this?