如何用PlaneGeometry在Three.js中精确填充视口并支持变换？

我尝试用Three.js的PlaneGeometry创建一个填满视口的白色平面，要求这个平面能设置指定的尺寸、旋转和位置属性，但两次实现都没成功，以下是我的两段失败代码：

第一段代码：

function createFullScreenPlane() {
    const aspect = camera.aspect;
    const frustumHeight = 2 * Math.tan(THREE.MathUtils.degToRad(camera.fov) / 2) * camera.position.z;
    const frustumWidth = frustumHeight * aspect;

    const planeGeometry = new THREE.PlaneGeometry(frustumWidth, frustumHeight);
    const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
    const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);

    planeMesh.lookAt(camera.position);

    scene.add(planeMesh);
}

第二段代码：

function createFullScreenPlane() {

    const topLeft = new THREE.Vector3(-1, 1, -1);
    const bottomRight = new THREE.Vector3(1, -1, -1);

    topLeft.unproject(camera);
    bottomRight.unproject(camera);

    const width = bottomRight.x - topLeft.x;
    const height = topLeft.y - bottomRight.y;

    const planeGeometry = new THREE.PlaneGeometry(width, height);
    const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
    const plane = new THREE.Mesh(planeGeometry, planeMaterial);

    plane.position.copy(camera.position).add(camera.getWorldDirection(new THREE.Vector3()).multiplyScalar(1));

    const posCamera = new THREE.Vector3(0, 0, 0);
    posCamera.unproject(camera);
    console.log(topLeft, bottomRight, posCamera, camera.position);

    plane.lookAt(camera.position);

    scene.add(plane);
}

内容的提问来源于stack exchange，提问作者tres.14159