I was creating a Rubik’s Cube simulation, where you can click on the subcubes to modify the corresponding faces. Here is the project
In the process, I need to determine which subcube the mouse is over, so that I can identify the faces that can be rotated.
To achieve this, I convert the mouse’s screen coordinates to world coordinates using the screenToWorld command of the camera component, and then perform a raycast with a depth range from nearClip to farClip.
const camera = this.cameraEntity.camera;
const fr = camera.screenToWorld(event.x, event.y, camera.nearClip);
const to = camera.screenToWorld(event.x, event.y, camera.farClip);
const result = this.app.systems.rigidbody.raycastFirst(fr, to);
cameraEntity is the camera entity passed as an attribute to the script.
The problem is that visually comparing the values, the world coordinates do not match the mouse coordinates in the camera plane, which is what I expect to see. This can be observed because the contact point with the subcube from the raycast does not correspond to the mouse cursor. As a result, in certain mouse positions, faces are rotated that do not correspond to the ones clicked.
What do you think could be the issue? It seems to be related to the resolution and the “Keep aspect ratio” setting in the rendering settings, but I’m not certain.
