# State.pointer not working correctly inside R3F renderTexture / useAspect

**URL:** <https://discourse.threejs.org/t/state-pointer-not-working-correctly-inside-r3f-rendertexture-useaspect/60308>\
**Category:** Questions\
**Tags:** r3f, mousemove, camera\
**Created:** [January 14, 2024, 5:07pm UTC](https://discourse.threejs.org/t/state-pointer-not-working-correctly-inside-r3f-rendertexture-useaspect/60308 "2024-01-14T17:07:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gandarufuuu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gandarufuuu/32/42473_2.png) [@Gandarufuuu](https://discourse.threejs.org/u/Gandarufuuu)\
**Post date:** [January 14, 2024, 5:07pm UTC](https://discourse.threejs.org/t/state-pointer-not-working-correctly-inside-r3f-rendertexture-useaspect/60308/1 "2024-01-14T17:07:03Z")

</div>

Hi all,  
to achieve a Cover-Effect similar to CSS, my main Scene consists of a full-screen plane, onto which I’m rendering another scene (SceneA). The plane’s scale is set via drei’s useAspect.

```javascript
      <mesh scale={scale}>
        <planeGeometry />
        <sceneMaterial>
          <RenderTexture attach="tex0">
            <SceneA />
          </RenderTexture>
        </sceneMaterial>
      </mesh>

```

Inside SceneA.jsx I’m trying to implement a subtle camera movement inside useFrame().

```javascript
  // Camera Movement
  const target = new THREE.Vector2();

  useFrame((state) => {
    target.x = 1 - state.pointer.x * 0.01 * 5;
    target.y = state.pointer.y * 0.07 * 5;
    camera.position.x = THREE.MathUtils.lerp(
      camera.position.x,
      -target.x - camera.position.x,
      0.05
    );
    camera.position.y = THREE.MathUtils.lerp(
      camera.position.y,
      target.y - camera.position.y,
      0.05
    );
  });

```

However, the mouse movement is only registered on the plane in the MainScene. Although the plane stays visible and shows my SceneA, it’s as if the movement only get’s tracked on the initial viewport, as soon as i scroll down and the initial viewport ist out of sight, the movement doesn’t update any more.

Any idea why this is happening, or how I could implement this better?

I could just directly put everything into my MainScene and scrap the plane and rendertexture approach, but then I lose the CSS-Cover effect…

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [January 14, 2024, 5:30pm UTC](https://discourse.threejs.org/t/state-pointer-not-working-correctly-inside-r3f-rendertexture-useaspect/60308/2 "2024-01-14T17:30:24Z")

</div>

would you make a small codesandbox? are you saying that pointer.x/y is always 0 inside the portal?

btw there is another css cover in drei [GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber](https://github.com/pmndrs/drei?tab=readme-ov-file#image)

> **[Cards - CodeSandbox](https://codesandbox.io/s/cards-dc5fjy)**
>
> Cards by drcmda using @pmndrs/assets, @react-three/drei, @react-three/fiber, @react-three/postprocessing, @types/three, random-words, react, react-dom, react-scripts

---

<div class="post-metadata">

**Author:** ![Gandarufuuu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gandarufuuu/32/42473_2.png) [@Gandarufuuu](https://discourse.threejs.org/u/Gandarufuuu)\
**Post date:** [January 14, 2024, 6:59pm UTC](https://discourse.threejs.org/t/state-pointer-not-working-correctly-inside-r3f-rendertexture-useaspect/60308/3 "2024-01-14T18:59:25Z")

</div>

The pointer values only get updated as long as I stay inside the initial viewport. I had the eventSource on the canvas set to ‘root’, but that doesn’t seem to affect it. If I delete this, the pointer values don’t update at all…

I think I’ll scrap the idea of rendering to a plane, just to keep the aspect ratio / fov consistent.

Without it, the state.pointer values update across the whole page, but the y-value just keeps increasing. I guess what I’m looking for, is an easy way to control mouseMovement just inside the window.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [January 14, 2024, 9:06pm UTC](https://discourse.threejs.org/t/state-pointer-not-working-correctly-inside-r3f-rendertexture-useaspect/60308/4 "2024-01-14T21:06:32Z")

</div>

yes it’s most likely the event target, event.clientXY and offsetXY also behave differently on scroll/non scroll applications. but can’t say for sure without seeing it.

---

<div class="post-metadata">

**Author:** ![rinzexe](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rinzexe/32/47090_2.png) [@rinzexe](https://discourse.threejs.org/u/rinzexe)\
**Post date:** [May 21, 2024, 3:43pm UTC](https://discourse.threejs.org/t/state-pointer-not-working-correctly-inside-r3f-rendertexture-useaspect/60308/5 "2024-05-21T15:43:28Z")

</div>

did you manage to solve it? i ran into the same issue + onhover events are not working either

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [May 21, 2024, 6:04pm UTC](https://discourse.threejs.org/t/state-pointer-not-working-correctly-inside-r3f-rendertexture-useaspect/60308/6 "2024-05-21T18:04:04Z")

</div>

do you have a sandbox i can look into? better if it’s very small and exposes the problem directly without too much weight.