React-three-fiber scrolling and responsiveness

Questions
, ,
1

Hello,

After many tries, I couldn’t add scrolling and responsiveness (using camera fov) that will work on every device. Can someone help me with this drei example?

Thank you.

2

could you be a little more detailed in the description? the box you posted has ground reflections, doesn’t seem related. for scroll we have a new component: GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber and r3f is responsive by default. you can pick up the viewport size and scale meshes accordingly:

const { width, height } = useThree(state => state.viewport)
return (
  <mesh scale={[width, height, 1]}>

would fill the entire page for instance.

you can also calculate viewport by giving it a position and a camera (any fov)

const { getCurrentViewport } = useThree(state => state.viewport)
...
const { width, height } = getCurrentViewport(camera, [0, 0, -10])
2 Likes