Change FOV by onWheel and onPinch #1248

takerfume · 2021-04-16T07:39:44Z

takerfume
Apr 16, 2021

Hello,
I would like to change FOV of camera by onWheel and onPinch to zoom texture of scene.background.
However, in my code, when the amount of the change of wheel (I use trackpad of macbook) is large, zoom of the whole screen of browser occurs instead of zoom of scene.background.

Here is my code.
https://codesandbox.io/s/r3f-ibl-envmap-simple-forked-mzju6?file=/src/App.js

I have 2 questions.

How can I prevent whole screen from zooming?
In addition, How can I use onPinch by using react-use-gesture?

drcmda · 2021-04-16T13:08:32Z

drcmda
Apr 16, 2021
Maintainer

when you change fov of your main camera then it will affect everything it's rendering, that's how it works. how the hdri map is zoomed i don't know, i think you will have better chances getting this answered quickly on threes discourse since it's not so much react related. same for use-gesture in use-gestures own channels.

3 replies

takerfume Apr 16, 2021
Author

@drcmda
I mean that the event of wheel affects not only fov of the main camera but also other components.

Here is the example.

Before zoom

Zoom succeeded when I move my fingers slowly on my trackpad. Just scene.background is zoomed.

Zoom failed when I move my fingers slowly on my trackpad. Other components not related to r3f are also zoomed

I would like to zoom only components of r3f.
Could you please tell me how I catch the event of wheel and let it affect only components of r3f?

Here is how I catch the event of wheel.
(whole code is here https://codesandbox.io/s/r3f-ibl-envmap-simple-forked-mzju6?file=/src/App.js
If you move your fingers slowly, only fov is changed.
However if you move fast, entire screen of browser is zoomed, which means wheel move affects outside of r3f components.
)

  return (
    <>
      <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>
      <style jsx global>
        {`
          .canvas {
            touch-action: none;
          }

          .r3fCanvas {
            height: 100%;
            touch-action: none;
          }
        `}
      </style>
    </>
  )

drcmda Apr 16, 2021
Maintainer

that has to do with the browsers default behaviour. you need to google how to switch it off. i quickly tried preventDefault but that doesn't work. i think react-use-gesture can handle that otherwise but imo there is nothing that r3f can do for you here.

takerfume Apr 17, 2021
Author

okay I will ask in the discussion of react-use-gesture.
Thank you.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Change FOV by onWheel and onPinch #1248

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Change FOV by onWheel and onPinch #1248

Uh oh!

Uh oh!

takerfume Apr 16, 2021

Replies: 1 comment · 3 replies

Uh oh!

Uh oh!

drcmda Apr 16, 2021 Maintainer

Uh oh!

Uh oh!

takerfume Apr 16, 2021 Author

Uh oh!

drcmda Apr 16, 2021 Maintainer

Uh oh!

takerfume Apr 17, 2021 Author

takerfume
Apr 16, 2021

Replies: 1 comment 3 replies

drcmda
Apr 16, 2021
Maintainer

takerfume Apr 16, 2021
Author

drcmda Apr 16, 2021
Maintainer

takerfume Apr 17, 2021
Author