[Enhancement] Fix Orthographic Camera Viewport Clipping 📐 #13
Description
Goal: Correct the initial setup and behavior of the THREE.OrthographicCamera to prevent the 3D scene (the block stack) from being clipped, especially the base of the stack and the moving block, which are currently cut off on certain screen sizes.
Tasks & Expected Changes:
Adjust Initial Camera Position (init function):
Find the camera.position.set(3, 3, 3); in the original script.js.
Action: Modify the initial X, Y, and Z positions to pull the view back slightly and ensure the entire base block is visible at startup. Suggested adjustment: camera.position.set(4, 4, 4);
Recalculate Camera Frustum on Resize (window.addEventListener("resize")):
The existing resize event listener correctly calculates the new top and bottom of the camera.
Action: Ensure the function calls camera.updateProjectionMatrix(); after updating the top and bottom properties. This crucial step recomputes the camera's projection matrix with the new values, making the view correctly resize without clipping.
Adjust Camera Viewport for Clipping:
The init function sets the camera's near and far planes to 0 and 100. This is generally okay, but the view volume itself may need to be slightly larger to accommodate the entire base without the edges clipping.
Action: Review and slightly increase the initial width variable (currently const width = 10; around line 71) to ensure more space is visible on the screen, moving the clipping plane further out. Suggested adjustment: Increase width to 12 or 14 to allow for wider viewing on desktops.
Confirm Mobile Responsiveness:
Test the deployed solution on a narrow mobile viewport to ensure the blocks remain visible and correctly scaled (not too tiny or completely clipped off the screen).