# Pointer in useFrame hook in view doesn't work

**URL:** <https://discourse.threejs.org/t/pointer-in-useframe-hook-in-view-doesnt-work/61844>\
**Category:** Questions\
**Tags:** drei, r3f, react-threedrei\
**Created:** [February 23, 2024, 6:34am UTC](https://discourse.threejs.org/t/pointer-in-useframe-hook-in-view-doesnt-work/61844 "2024-02-23T06:34:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ShoOsaka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shoosaka/32/33293_2.png) [@ShoOsaka](https://discourse.threejs.org/u/ShoOsaka)\
**Post date:** [February 23, 2024, 6:34am UTC](https://discourse.threejs.org/t/pointer-in-useframe-hook-in-view-doesnt-work/61844/1 "2024-02-23T06:34:15Z")

</div>

I am investigating Issue of pointer become `(0, 0)` of useFrame Hook’s in @react-three/drei’s View Component

Recently, the ‘View’ has been renewed, and I’ve been experimenting with various things, and when I was making a movement that moves the position of the PointerLight depending on the position of the mouse, I encountered that the Pointer does not move.

I’ve created the smallest project I can reproduce to do this research.

If anyone knows, I would appreciate your guidance.

I still have a shallow understanding of r3f and drei, and I don’t understand them in depth,  
but, I reproduced it as below.

※: all code: [foasho/r3f-view-search (github.com)](https://github.com/foasho/r3f-view-search)  
Here is the code I referenced.: [drcmda/views (github.com)](https://github.com/drcmda/views)

1. Creating a ‘Scene’ component

```javascript
import React from "react";
import { Canvas, CanvasProps, addEffect } from "@react-three/fiber";
import { Preload, View } from "@react-three/drei";
import Lenis from "@studio-freight/lenis";

const lenis = new Lenis({ syncTouch: true });
addEffect((t) => lenis.raf(t));

export const Scene = ({ style, ...props }: SceneProps) => {
  return (
    <Canvas
      shadows
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        width: "100vw",
        height: "100vh",
        pointerEvents: "none",
        ...style,
      }}
      eventSource={document.body}
      eventPrefix="client"
      {...props}
    >
      <Preload all />
      <View.Port />
    </Canvas>
  );
};

```

1. Creating `SampleView`

```javascript
export const SampleView = () => {

  return (
      <View className="h-full w-full">
        <PointerLighting />
        <MyText />
        <BackGroundPlane />
      </View>
  )
};

```

1. Creating `PointerLighting`

```javascript
import { useRef } from "react";
import { useFrame } from "@react-three/fiber";
import type { PointLight } from "three";

/**
 * A light that follows the pointer.
 */
export const PointerLighting = () => {
  const ref = useRef<PointLight>(null);

  useFrame(({ viewport, pointer }) => {
    if (ref.current) {
      // not working pointer.x and pointer.y
      // always (0, 0)
      console.log(pointer.x, pointer.y);

      ref.current.position.set(
        (pointer.x * viewport.width) / 2,
        (pointer.y * viewport.height) / 2,
        5.5
      );
    }
  });

  return <pointLight ref={ref} intensity={20} />;
};

```

1. Call from `App`

```javascript
function App() {
  return (
    <div className="h-screen w-screen">
      <SampleView />
      <Scene children={undefined} />
    </div>
  )
}

```

1. Result (gif)  
not working pointer tracking  
 ![search](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/0/50d035784b33a2dd8c439914b0282900c7b5625b.gif)

---

<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:** [February 23, 2024, 10:30am UTC](https://discourse.threejs.org/t/pointer-in-useframe-hook-in-view-doesnt-work/61844/2 "2024-02-23T10:30:04Z")

</div>

it needs something with events inside the portal or it assumes there are none and hence doesn’t run into the branch which calculates the pointer. most portals in drei have an empty group with onPointerOver=() =\> null or something like that to trick it. i’ve added it to view, will be live in 5 minutes. update and it should be fine.

---

<div class="post-metadata">

**Author:** ![ShoOsaka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shoosaka/32/33293_2.png) [@ShoOsaka](https://discourse.threejs.org/u/ShoOsaka)\
**Post date:** [February 23, 2024, 12:13pm UTC](https://discourse.threejs.org/t/pointer-in-useframe-hook-in-view-doesnt-work/61844/3 "2024-02-23T12:13:13Z")

</div>

Mr. drcmda

Always, Thank you for your continued updates of the wonderful library and for your prompt reply.

I have confirmed that the issues I had with this change are gone.

thank you this update.  
[fix: view pointer · pmndrs/drei@639301c (github.com)](https://github.com/pmndrs/drei/commit/639301c612e5c5ee4dabd534bb2392b491586147)