Skip to content
card background pattern
Level 3

React 3D

Unlock Full Course

$49.99 $39.99

Or

$24.99/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

Comments

James
10 days ago

@Raul Thanks!

User photo avatar
Raul
Admin
updated 12 days ago

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

James
13 days ago

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

  return (
    <>

    <ControlsProvider>
      <Canvas shadowMap={true}>
        <Scene />
      </Canvas>
      </ControlsProvider>
      <Controls />
    </>
  );
}
Mike
13 days ago

Thanks all for the ControlsProvider tip!

Nick
23 days 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 2 months ago

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

CJ
2 months ago

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

Francis
3 months ago

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

Something to say?

Become a Pro