Sign Up
Go Pro Sign Up Login

Buy Now and unlock this series

$

49

.99

$

39

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

React Three GUI

In this video, we will talk about another helper plugin for React Three Fiber called React Three GUI. This plugin will allow us to overlay controls over our 3D model and control things such as rotation and position within an interface. npm install react-three-gui

Downloads

Become a pro to download code and videos

Comments

James

11 months ago

@Raul Thanks!

User avatar

Raul

11 months ago [edited]

@James Controls also needs to be wrapped by ControlsProvider https://github.com/birkir/react-three-gui#usage

James

11 months ago

@Mike How did you get it to show? I have:

  return (
    <>

    <ControlsProvider>
      <Canvas shadowMap={true}>
        <Scene />
      </Canvas>
      </ControlsProvider>
      <Controls />
    </>
  );
}

Mike

11 months ago

Thanks all for the ControlsProvider tip!

Nick

12 months ago

Xypad is fixed! And can confirm, have to use ControlsProvider wrapper around the canvas in order to get the GUI to work.

Joey

about 1 year ago

Had to wrap canvas with ControlsProvider to get the GUI to work.

CJ

about 1 year ago

Yeah! this xypad till broken! 💩 LOL let's see if they fixed it soon, it looks legit!

Francis

about 1 year ago

Hi, you should delete the 'xypad' out of this video, kind of confusing!

Want to join the conversation?

Become a Pro member today!