Adjusting PlaneGeometry Dimensions and Camera Distance to Fill Screen width or height Without Exceeding Boundaries

I am trying to adjust a PlaneGeometry to match the screen dimensions and calculate the camera distance so that it fills the entire screen width or height without exceeding the screen boundaries. I have already added renderer.domElement to the page. However, I need to ensure that the PlaneGeometry dimensions match those of renderer.domElement and calculate the appropriate camera distance.

Requirements

1. Get the width and height of renderer.domElement.

2. Adjust the PlaneGeometry dimensions to match those of renderer.domElement.

3. Calculate the camera distance so that the PlaneGeometry fills the entire screen without exceeding the screen boundaries.

Expected Result

• The PlaneGeometry dimensions should match those of renderer.domElement.

• The camera distance should be calculated appropriately so that the PlaneGeometry fills the entire screen without exceeding the screen boundaries.

Code Example

import * as THREE from 'three';

// Create scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Get the width and height of renderer.domElement
const screenWidth = renderer.domElement.clientWidth;
const screenHeight = renderer.domElement.clientHeight;

// Create PlaneGeometry
const planeGeometry = new THREE.PlaneGeometry(20, 30);// Width and height 
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(planeMesh);

// `PlaneGeometry` 的宽度和高度
const planeWidth = planeGeometry.parameters.width;
const planeHeight = planeGeometry.parameters.height;

// Camera field of view (vertical)
const fovRadians = THREE.MathUtils.degToRad(camera.fov);

// Calculate camera distance
function calculateCameraDistance(screenWidth: number, screenHeight: number, planeWidth: number, planeHeight: number): number {
    const planeAspectRatio = planeWidth / planeHeight;
    const screenAspectRatio = screenWidth / screenHeight;

    if (planeAspectRatio > screenAspectRatio) {
        // Width fills screen width
        return (planeWidth / 2) / (Math.tan(fovRadians / 2) * (screenWidth / (2 * screenHeight)));
    } else {
        // Height fills screen height
        return planeHeight / (2 * Math.tan(fovRadians / 2));
    }
}

// Calculate camera distance
const cameraDistance = calculateCameraDistance(screenWidth, screenHeight, planeWidth , planeHeight );

// Set camera position
camera.position.z = cameraDistance;

console.log(`Camera Distance: ${cameraDistance}`);

// Render scene
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

Question

How can I ensure that the PlaneGeometry dimensions match screen width or height and calculate the appropriate camera distance so that the PlaneGeometry fills the entire screen without exceeding the screen boundaries?