Up until now, I've successfully utilized the THREE.Raycaster in my game engine for testing collisions across various elements. It has been reliable and effective.
However, a puzzling issue has recently arisen that has left me stumped. Despite believing that my logic and code are correct, the expected outcomes are not aligning as they should. This discrepancy has prompted me to seek assistance, as there may be something obvious that I am overlooking.
The current scenario involves casting rays from the central point at the top of a group of meshes, individually in a circular arc. These meshes all belong to a parent Object3D, with the objective being to assess collisions between the main mesh and other child meshes of the parent element. To visualize these rays, I am employing the THREE.ArrowHelper.
An image illustrating the output of my code can be viewed here - https://i.sstatic.net/DjW0f.jpg
While the positioning of the ArrowHelper objects appears accurate (origin:direction), there is an underlying issue with this depiction generated by the following code:
var degree = Math.PI / 16,
tiles = this.tilesContainer.children,
tilesNum = tiles.length,
raycaster = new THREE.Raycaster(),
rayDirections, rayDirectionsNum, rayOrigin, rayDirection, collisions,
tile, i, j, k;
for (i = 0; i < tilesNum; i++) {
tile = tiles[i];
rayOrigin = new THREE.Vector3(
tile.position.x,
tile.geometry.boundingBox.max.y,
tile.position.z
);
rayDirections = [];
for (j = 0; j < Math.PI * 2; j += degree) {
rayDirections.push(new THREE.Vector3(Math.sin(j), 0, Math.cos(j)).normalize());
}
rayDirectionsNum = rayDirections.length;
for (k = 0; k < rayDirectionsNum; k++) {
rayDirection = rayDirections[k];
raycaster.set(rayOrigin, rayDirection);
collisions = raycaster.intersectObjects(tiles);
this.testRay(rayOrigin, rayDirection, collisions);
}
}
The testRay function is structured as follows:
testRay: function (origin, direction, collisions) {
var arrowHelper = new THREE.ArrowHelper(
direction,
origin,
1,
(collisions.length === 0) ? 0xFF0000 : 0x0000FF
);
this.scene.add(arrowHelper);
}
Evidently, the rendering depicts some inconsistencies. Rays that intersect with other meshes should display in blue, while those without collision should appear red. The current image reveals significant discrepancies, with multiple blue intersections on certain rays and inconsistent results in general.
This situation presents a perplexing challenge - why are numerous expected blue collisions manifesting as red? How are rays from edge tiles registering blue collisions with non-existent elements?
This conundrum has me scratching my head (figuratively and literally), and any insights or assistance would be immensely appreciated!