react-three-gui
A graphical user interface for changing variable states in React.
Examples
https://codesandbox.io/s/react-three-fiber-gui-62pvp
Usage
Basic example
import { Controls, useControl } from 'react-three-gui';
export const App = () => {
const rotationX = useControl('Rotation X', { type: 'number' });
return (
<Controls.Provider>
<Controls.Canvas>
<mesh rotation-x={rotationX} />
</Controls.Canvas>
<Controls />
</Controls.Provider>
);
};
Use the spring option to return a react-spring value:
useControl('My ctrl', {
type: 'number',
spring: true,
});
useControl('My ctrl', {
type: 'number',
spring: { mass: 5, tension: 280, friction: 50 },
});
Also possible to pass in your own state:
const [value, set] = useState(0);
useControl('Adjust value', {
type: 'number',
state: [value, set],
});
Also you can pass your own control component:
const MyControl = ({ value, setValue }) => (
<input
type="number"
onChange={e => setValue(e.currentTarget.value)}
value={value}
/>
);
useControl('Test', {
type: 'custom',
value: 2,
component: MyControl,
});
Use your own Canvas
import { Canvas } from 'react-three-fiber';
import { withControls } from 'react-three-gui';
const YourCanvas = withControls(Canvas);
const Scene = () => (
<YourCanvas>
<mesh rotation-x={rotationX} />
</YourCanvas>
);
const App = () => {
const rotationX = useControl('Rotation X', { type: 'number' });
return (
<Controls.Provider>
<Scene />
<Controls />
</Controls.Provider>
);
};
API
import { useControl, Controls } from 'react-three-gui';
useControl(name: string, {
type: 'number' | 'xypad' | 'boolean' | 'button' | 'color' | 'select' | 'string' | 'file' | 'custom';
value: any;
spring: boolean | SpringConfig;
group: string;
state: [any, Dispatch<SetStateAction<any>>];
onChange(value: any): void;
min: number;
max: number;
distance: number;
scrub: boolean;
items: string[];
onClick(): void;
loader?: THREE.TextureLoader | THREE.FileLoader | etc;
component?: React.Component;
});
<Controls
title="react-three-gui"
collapsed={true}
defaultClosedGroups={['Other', 'Stuff']}
width={300} // default 300
anchor={'top_left' | 'bottom_left' | 'top_right' | 'bottom_right'} // see ControlsAnchor enum
style={{ ... }} // pass any kind of styles here. Supports @react-spring/web styles.
/>
Supported controls
- number
- xypad
- Returns
{ x: number, y: number }
object
- boolean
- button
- color
- Returns
string
(as hex: #ffffff)
- select
- file
- Returns
new THREE.FileLoader
- string
Future plans