# setting the position and direction of meshPortalMaterial

**URL:** <https://discourse.threejs.org/t/setting-the-position-and-direction-of-meshportalmaterial/70291>\
**Category:** Questions\
**Tags:** materials, react-three-fiber\
**Created:** [September 4, 2024, 2:30pm UTC](https://discourse.threejs.org/t/setting-the-position-and-direction-of-meshportalmaterial/70291 "2024-09-04T14:30:36Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tom\_Moon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tom_moon/32/51380_2.png) [@Tom\_Moon](https://discourse.threejs.org/u/Tom_Moon)\
**Post date:** [September 4, 2024, 2:30pm UTC](https://discourse.threejs.org/t/setting-the-position-and-direction-of-meshportalmaterial/70291/1 "2024-09-04T14:30:36Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/5/6551b26de03e57502decef07eb3e3926b46de3d3.png)

this is the simple code I have so far:

```javascript
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?