Software Versions
THREE.ObjectLoader2: 2.4.1
THREE.LoaderSupport.MeshBuilder: 1.2.1
THREE.LoaderSupport.WorkerSupport: 2.2.0
THREE.WebGLRenderer: 93
THREE.REVISION: 93
Anomalies Discovered
During a raycast operation on objects within my scene, I encountered precise results down to the pixel level until the object was moved. As part of my program's functionality, the scene is exploded, causing all objects and their child elements to move away from the center of the scene.
To better understand the issue, instead of casting rays on single points with mouse clicks, I decided to raycast the entire screen, resulting in the observations shown in Figure 1:
https://i.sstatic.net/3mlo4.png
(Figure 1) The gaps observed are due to the processing time involved in raycasting every pixel. Instead, only every fourth pixel was raycasted. The gap in the middle occurred as a result of zooming away from the original position.
Further analysis was conducted after exploding the object (Figure 2):
https://i.sstatic.net/iQIi9.png
(Figure 2) As illustrated, an almost circular pattern emerged. The reason for this phenomenon remains uncertain.
Investigation Efforts
I have attempted various methods sourced from online platforms but have not been able to resolve the issue.
Extensive tests were carried out using different models, each showing unique behaviors. Notably, the 'lamborghini-aventador' model created in Blender showcased unusual characteristics.
To rule out problems in the explosion code, the object was simply moved to the right, revealing intriguing outcomes (Figure 3):
https://i.sstatic.net/ORA1O.png
(Figure 3) It seems that the outlines applied to the object (generated by EdgesGeometry) appeared behind it, while the actual object shifted towards the middle, creating discrepancies in the raycasts.
Hypothesized Causes
A scaling-related issue is suspected, prompting the removal of all scaling operations from the code, albeit with no change in results.
If this turns out to be a rookie mistake, I would gladly welcome the revelation :)
Code Analysis
Brave souls willing to venture into my flawed codebase can access it here (demo.js):
Functional Testing
Press G to initiate raycasts (may experience brief delays), press X to explode, and press S to unexplode. Standard orbit controls apply.
Documentation Reviewed
The following resources were consulted in attempts to address this issue:
Three.js Raycaster API Documentation
Stack Overflow Discussion on Three.js Raycaster Issues
Three.js GitHub Issue #1325 (Matrix Update Problems)
Tutorial on Projecting Mouse Clicks in Three.js Scenes
... and many more ...
Any insights or suggestions?