react-three-gui
TypeScript icon, indicating that this package has built-in type declarations

0.4.2 • Public • Published

react-three-gui

A graphical user interface for changing variable states in React.

Examples

https://codesandbox.io/s/react-three-fiber-gui-62pvp

Example

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,
});
 
// or pass a react-spring configuration value
 
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';
 
// Wrap the <Canvas> with `withControls`
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';
 
// All the possible options
useControl(namestring, {
  // General
  type: 'number' | 'xypad' | 'boolean' | 'button' | 'color' | 'select' | 'string' | 'file' | 'custom';
  valueany// Initial value
  springboolean | SpringConfig// Use spring
  groupstring// Group name
  state[any, Dispatch<SetStateAction<any>>]; // Use your own state
  onChange(value: any): void; // onChange callback
 
  // number | xypad
  min: number; // Minimum value (default: 0)
  max: number; // Maximum value (default: 1)
  distance: number; // The end-to-end slider distance (default: 1)
  scrub: boolean; // When slider is released it will reset to the center but keep its value
 
  // select
  items: string[];
 
  // button
  onClick(): void;
 
  // file
  loader?: THREE.TextureLoader | THREE.FileLoader | etc;
 
  // custom
  component?: React.Component;
});
 
// Controls 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
    • Returns number
  • xypad
    • Returns { x: number, y: number } object
  • boolean
    • Returns boolean
  • button
    • Returns void
  • color
    • Returns string (as hex: #ffffff)
  • select
    • Returns string
  • file
    • Returns new THREE.FileLoader
  • string
    • Returns string

Future plans

  • Support custom control components
  • File upload loader control
  • Groups
  • Draggable Widget
  • Collapsable widget
  • Persist state localstorage
  • Multi platform?

Readme

Keywords

none

Package Sidebar

Install

npm i react-three-gui

Weekly Downloads

171

Version

0.4.2

License

MIT

Unpacked Size

288 kB

Total Files

28

Last publish

Collaborators

  • birkir