Repository: three.js
Issue: Can't use Reflector.js with webgl_portal example
Labels: Addons,Needs Investigation

### Description

Hi,

I've been trying to use the portal approach found at [](https://threejs.org/examples/webgl_portal.html) with a [Reflector](https://github.com/mrdoob/three.js/blob/e5426b0514a1347d7aafca69aa34117503c1be88/examples/jsm/objects/Reflector.js) in the destination scene.

I encounter an issue with texture stretching when the camera is at certain positions. This issue seems to go away if I update the camera projection matrix after I use the CameraUtils `frameCorners` method; I know this projection matrix update call is wrong, as the CameraUtils JS file explains so in the comments and the projection is visibly wrong, but I was looking to discover where the origins of the texture stretching artefact might lie, and tried this.

I wondered if perhaps the `textureMatrix` in the Reflector `beforeRender` calculations isn't resolving correctly, but I can't see why.

I've also posted about my issue on the threeJS forums, with the issue manifesting in own project but with a very similar setup to the webgl_portal example: [](https://discourse.threejs.org/t/camerautils-framecorners-causing-reflector-texture-stretching/54632)

Perhaps Reflector and the `frameCorners` approach for constructing a projection matrix aren't meant to be compatible. It would be good to know if there's a mathematical reason for this, or whether I might be missing a step that would be required to ensure this stretching doesn't occur.

### Reproduction steps

In the webgl_portal example in threeJS examples suite
1. Modify `planeBottom` so that it's an instance of Reflector (its options probably don't matter; I only set resolution and color)
2. Observe that, at certain OrbitCamera angles, the texture on the Reflector plane is stretched - most noticeably when the icosahedron bounces past certain points - and at other angles, the texture can appear black.

### Code

```
//const planeBottom = new THREE.Mesh(planeGeo, new THREE.MeshPhongMaterial({ color: 0xffffff }));

const planeBottom = new Reflector(planeGeo, { color: 0x7f7f7f, textureWidth: 2048, textureHeight: 2048 });
planeBottom.rotateX(-Math.PI / 2);
scene.add(planeBottom);
```

### Live example

Video of webgl_portal with Reflector addition: [https://www.dropbox.com/scl/fi/rx898e4cx9i2scoa55yf1/portal-demo-stretching.mov?rlkey=ev61m4mzpf7enmola5owd59pe&dl=0)](https://www.dropbox.com/scl/fi/rx898e4cx9i2scoa55yf1/portal-demo-stretching.mov?rlkey=ev61m4mzpf7enmola5owd59pe&dl=0)

Video of the same issue in a separate project, with a FPS-controller camera pointing at a portal plane, showing a separate scene: [https://www.dropbox.com/s/xfpsp9t0uwhcc3a/reflector-stretching.mov?dl=0](https://www.dropbox.com/s/xfpsp9t0uwhcc3a/reflector-stretching.mov?dl=0)

### Screenshots

<img width="2133" alt="Screenshot 2023-08-08 at 13 56 45" src="https://github.com/mrdoob/three.js/assets/339603/f299d48d-213f-4cb4-914f-79d3385866f6">
<img width="1201" alt="Screenshot 2023-08-08 at 13 57 10" src="https://github.com/mrdoob/three.js/assets/339603/9e2157a3-116e-4b8e-89ae-5831ee55bea0">


### Version

r149

### Device

Desktop, Mobile

### Browser

Chrome, Safari

### OS

MacOS, iOS