How to use ShapeGeometry and portals?

[philcon93]

I see how you use a standard plane geometry to use as a portal, but what if I want a custom shape for that scene to be rendered on, ie a panel or a window? How do you get the texture to render without being warped like it is here:

• https://codesandbox.io/s/magic-mirror-forked-ri3mx9?file=/src/App.js

And why doesn't the farm render on the first two portals but the heli does? If you remove the third portal and load the app, then the farm only shows on the second (last) portal. Are portals really independent? Is this because the farm model is a primitive and the heli is a group mesh?

[mwmwmw]

You need to recalculate the UVs for the shape.

You can do that by getting a ref to the mesh geometry, and updating geometry.attributes.uv with setUV

Here I use the min and max of the geometry bounding box to determine the correct UV space.
https://codesandbox.io/s/magic-mirror-recalc-uvs-op04ns?file=/src/App.js

[philcon93]

Thank you for the reply! I really need to spend more time just on threejs docs to know about stuff like this.

[mwmwmw]

The more you practice 3D stuff, you'll get a good intuition for what the problems are. Just keep making stuff.

I recognized the stretching artifact as a UV issue.

I had to look up how to calc UVs in Three. You almost never need to do it.