Within my Three.js project, there is a 3D scene featuring a floor and an orthographic camera.
I have successfully enabled the user to navigate the scene using their mouse. However, I am facing a challenge in restricting the camera's movement within the boundaries of the floor.
Currently, everything works fine when the camera is oriented at -90 degrees on the x-axis, providing a top-down view of the floor.
The problem arises when I adjust the camera to a different angle, such as -40 degrees, which leads to issues with the restrictions. This results in unintended visibility beyond what should be visible from that perspective.
Is there a way for me to incorporate the camera's rotation into the solution outlined below?
// Setting up the orthographic camera
this.camera = new THREE.OrthographicCamera(...);
this.camera.rotation.x = THREE.MathUtils.degToRad(-90);
// Dimensions of the floor
const modelBoundingBoxWidth = 14;
const modelBoundingBoxHeight = 14;
// Camera movement constraints in world units
const cameraLimits = {
left: -modelBoundingBoxWidth / 2,
right: modelBoundingBoxWidth / 2,
top: -modelBoundingBoxHeight / 2,
bottom: modelBoundingBoxHeight / 2,
};
// Calculating the new camera position based on mouse input
// (...)
// Enforcing the camera limits on the updated position
if ((cameraPosNew.x - cameraHalfWidth) < cameraLimits.left) {
cameraPosNew.x = cameraLimits.left + cameraHalfWidth;
}
else if ((cameraPosNew.x + cameraHalfWidth) > cameraLimits.right) {
cameraPosNew.x = cameraLimits.right - cameraHalfWidth;
}
if ((cameraPosNew.z - cameraHalfHeight) < cameraLimits.top) {
cameraPosNew.z = cameraLimits.top + cameraHalfHeight;
}
else if ((cameraPosNew.z + cameraHalfHeight) > cameraLimits.bottom) {
cameraPosNew.z = cameraLimits.bottom - cameraHalfHeight;
}
// Applying the new position to the camera
this.camera.position.set(
cameraPosNew.x,
cameraPosNew.y,
cameraPosNew.z
);
My hypothesis is that I need to project the vertical length of the floor onto the vertical length seen by the camera while considering its rotation angle. However, I'm struggling with the mathematical aspect of this task. Various attempts involving dot product and vector projection haven't yielded any progress.
Additionally, at an angle of -40, I've observed an inequality in the space above and below the floor. This suggests the need for potential adjustments to either the top and bottom clamp limits or altering the camera's position due to rotation effects.
It's worth noting that at -40 degrees, more of the scene becomes visible compared to the -90-degree orientation.
Update: Following further consideration, it seems like my original question may have introduced unnecessary complexities related to panning. Therefore, I believe it would be prudent to focus on understanding how camera rotation impacts visibility first. For this specific query, I've created a separate post: How does rotation influence an orthographic camera in Three.js