State.pointer not working correctly inside R3F renderTexture / useAspect

Questions
, ,
1

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.

      <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().

  // 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…

2

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

3

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.

4

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.

5

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

6

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