Pointer in useFrame hook in view doesn't work

Questions
, ,
1

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)
Here is the code I referenced.: drcmda/views (github.com)

  1. Creating a ‘Scene’ component
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
export const SampleView = () => {

  return (
      <View className="h-full w-full">
        <PointerLighting />
        <MyText />
        <BackGroundPlane />
      </View>
  )
};
  1. Creating PointerLighting
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
function App() {
  return (
    <div className="h-screen w-screen">
      <SampleView />
      <Scene children={undefined} />
    </div>
  )
}
  1. Result (gif)
    not working pointer tracking
    search
2

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.

2 Likes
3

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)