How can I integrate react-use-gesture into r3f to fix zoom problem? #289

takerfume · 2021-04-17T02:07:29Z

takerfume
Apr 17, 2021

When I try to catch event of wheel by using onWheel of div tag,
I encounter a problem.

The event of wheel affects not only component in which event should be caught but also other components.
Especially when I move my fingers fast on my trackpad of Macbook Air, the problem occurs.
I think I can fix this problem by using react-use-gesture into my code, but I don't know how I can do it.
Is it possible to fix it by react- use gesture?
Could you please tell me how to do?

This is the example of my problem (You can experience in https://codesandbox.io/s/r3f-ibl-envmap-simple-forked-mzju6?file=/src/App.js ).

Before zoom

zoom succeeded. When I move fingers slowly, only component made by r3f is zoomed. Other component is not zoomed.

zoom failed. When I move fingers fast, not only components made by r3f but also other component (and even the entire screen of browser) is zoomed.
Here is my code.
https://codesandbox.io/s/r3f-ibl-envmap-simple-forked-mzju6?file=/src/App.js

I am trying to catch wheel event like <div className="r3fCanvas" onWheel={onMouseWheel}>.

      <div className="componentNotZoom">
        <img src={'https://storage.googleapis.com/sekokan-dev/8955f3f6-bdeb-4afd-8624-3e0056dc64c7'} />
      </div>
      <div className="r3fCanvas" onWheel={onMouseWheel}>
        <Canvas
          className="canvas"
          camera={{ position: [0, 0, 2.75], fov: fov }}
          // pixelRatio={[1, 2]}
        >
          <OrbitControls enableDamping enableZoom={false} enablePan={false} dampingFactor={0.05} rotateSpeed={-1.1} />
          <Suspense fallback={<Html>loading..</Html>}>
            <Environment />
            <Warp xpos={30} zpos={0} />
          </Suspense>
        </Canvas>
      </div>

Here is the discussion I asked the same problem on r3f discussion.
Change FOV by onWheel and onPinch react-three-fiber#1248

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I integrate react-use-gesture into r3f to fix zoom problem? #289

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

How can I integrate react-use-gesture into r3f to fix zoom problem? #289

takerfume Apr 17, 2021

Replies: 0 comments

takerfume
Apr 17, 2021