setting the position and direction of meshPortalMaterial

Questions
,
1

Hi All,

I’m trying to create a ‘window’ effect using meshPortalMaterial. I want to be able to move around Scene A and look through a portal to scene B however meshPortalMaterial seems to default to rendering from the origin in scene B. I want to view scene B from a camera view outside the origin. Whilst still maintaining the 3D paralax style effect bought by meshRenderMaterial.

Here’s a drawing that may better explain what i mean:

meshportalmaterial
meshportalmaterial700×700 13.1 KB

this is the simple code I have so far:

import { Canvas } from "@react-three/fiber";
import "./App.css";
import {
  MeshPortalMaterial,
  OrbitControls,
  PerspectiveCamera,
  RoundedBox,
  Sphere,
} from "@react-three/drei";
import { DoubleSide, MeshNormalMaterial } from "three";

function App() {
  return (
    <Canvas>
      <PerspectiveCamera
        makeDefault
        far={1000}
        near={0.1}
        fov={60}
        position={[5, 5, 5]}
      />
      <OrbitControls makeDefault />
      <RoundedBox
        args={[20, 30, 0.1]}
        position={[0, 0, -0.2]}
        material={new MeshNormalMaterial()}
      />

      <RoundedBox args={[2, 3, 0.1]}>
        <MeshPortalMaterial side={DoubleSide}>
          <PerspectiveCamera position={[0, 0, 50]} />
          <Sphere args={[1, 32, 32]} position={[0, 0, 0]}>
            <meshNormalMaterial />
          </Sphere>
        </MeshPortalMaterial>
      </RoundedBox>
    </Canvas>
  );
}

export default App;

The portal appears to render ‘on top’ of the sphere.

Is this possible with meshPortalMaterial or do i need to dive into a deeper level of abstraction?