I am trying to achieve a rotation effect where the cube stays flat but rotates towards the cursor in a top-down 2D fashion. I suspect that the issue might be related to how the mesh is centered against itself. Can anyone offer some assistance with this?
For reference, you can view the project here:
The code snippet I am working on can be found here: https://github.com/the-coop/coopwebsite/blob/89ca8909ed3fe28afd79b34c5305b63aabba8638/lib/conquest/ground/engine/setupGroundMovement.js#L35
Below is an excerpt from the code where I have been experimenting with different approaches in order to make the cube rotate correctly:
const plane = new Plane(new Vector3(0, 1, 0), 1);
const raycaster = new Raycaster();
const mouse = new Vector2();
const pointOfIntersection = new Vector3();
document.addEventListener('mousemove', ev => {
const { camera, me } = window.GROUND_LEVEL;
mouse.x = ( ev.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( ev.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
raycaster.ray.intersectPlane(plane, pointOfIntersection);
if (me.mesh) {
// Attempting to rotate the mesh to target position.
me.mesh.geometry.lookAt(pointOfIntersection);
}
});