Pmndrs from React-three-fiber Repository

MIT License

Closed
Replicate canvas.requestFullscreen() #2513

Issue Opened
Jgcarrillo Opened Issue On Sep 22nd 2022, 9:25

Jgcarrillo

Discussed in https://github.com/pmndrs/react-three-fiber/discussions/972

Originally posted by KabirMaan January 27, 2021 I am trying to replicate the following code in react-three-fiber but cannot seem to find the requestFullScreen() function

 window.addEventListener('dblclick', () => {
    if (!document.fullscreenElement) {
      canvas.requestFullScreen();
    } else {
      console.log('leave full screen');
    }
  }); 

Any help would be much appreciated. Thanks :)

Hi! I'm trying to recreate the example below. I just tried with e.target.requestFullscreen() but every time I want to go back to non-fullscreen mode, my <Canvas > just disappears. Here is my code:

const onFullScreenMode = (e) => {
  const fullscreenElement = document.fullscreenElement || document.webkitFullscreen;

  if (!fullscreenElement) {
    if (e.target.requestFullscreen) {
      e.target.requestFullscreen();
    } else if (e.webkitFullscreen) {
      e.target.webkitFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

const BasicScene = () => {
  return (
    <Canvas onDoubleClick={onFullScreen}>
      // ...
    <Canvas />
  )
} 

Thanks in advance 😃

Comment
Jgcarrillo commented on 2 months ago

Jgcarrillo

Maybe it's better to discussed in Discussions, sorry.

About Repository

🇨🇭 A React renderer for Three.js
Language: TypeScript
Star: 20562
Fork: 1164
Watchers: 20562
Open Issues: 37
https://github.com/pmndrs/react-three-fiber
MIT License
Last updated: 05 Dec 2022
Tropics: