Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

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

Ralph

3 months ago

This video is a waste of time. Nothing works with Three GUI. Looking for a solution.

Brad

10 months ago

The slider isn't appearing for me--even when using the course code. Should this be updated to use Leva (https://github.com/pmndrs/leva)?

Thanks

James

almost 2 years ago

@Raul Thanks!

User avatar

Raul

almost 2 years ago [edited]

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

James

almost 2 years ago

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

Mike

almost 2 years ago

Thanks all for the ControlsProvider tip!

Nick

almost 2 years ago

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

Joey

almost 2 years ago

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

CJ

almost 2 years ago

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

Francis

about 2 years ago

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

Want to join the conversation?

Become a Pro member today!