Skip to content
This repository has been archived by the owner on Jun 25, 2023. It is now read-only.

3D UI components for use with react-three-fiber. Includes WebXR support and Typescript driven documentation.

License

Notifications You must be signed in to change notification settings

ChristopherTrimboli/plant-fiber-ui

Repository files navigation

plant-fiber-ui

GitHub license PRs Welcome

3D UI components for use with react-three-fiber. Includes WebXR support and Typescript driven documentation.

The goal of this is to be like the Bootstrap of React threejs.

Open to contributions and feature requests.

IN EARLY DEVELOPMENT

Docs Site: https://chriseddy.github.io/plant-fiber-ui-docs/index.html

Demo Site: https://chriseddy.github.io/plant-fiber-ui-demo/index.html

Glitch Playground: https://glitch.com/edit/#!/plant-fiber-ui

Install

npm install plant-fiber-ui react react-dom react-three-fiber three react-xr

Get Started

Example App.js:

import React from 'react'
import ReactDOM from 'react-dom';
import { Canvas, XRControllers, Box } from 'plant-fiber-ui';

const App = (props) => {
  return (
      <Canvas webxr>
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        <Box />
        <XRControllers 
        onSelect={(e) => console.log(e)} 
        onSqueezeStart={(e) => console.log(e)} 
        onSelectEnd={(e) => console.log(e)} 
        onAxesChange={((axes, handedness) => console.log(axes, handedness))}
      />
      </Canvas>
  )
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

Components

<Canvas />

Example Usage

<Canvas webxr={true} />

<XRControllers />

Example Usage

  <XRControllers 
    onSelect={(e) => console.log(e)} 
    onSqueezeStart={(e) => console.log(e)} 
    onSelectEnd={(e) => console.log(e)} 
    onAxesChange={((axes, handedness) => console.log(axes, handedness))}
  />

onAxesChange: Function

onSelect: Function

onSelectEnd: Function

onSelectStart: Function

onSqueeze: Function

onSqueezeEnd: Function

onSqueezeStart: Function

<Box />

Example Usage

<Box color='red' position={[-0.5, 2, 1]} />

color: String

Example: color='#808080', color='purple'

position: Array (Vector3)

Example: position={[-0.5, 2, 1]}

onClick: Function

Example: onClick={(e) => yourFunction(e)}

Goals

  • Forms, Buttons, Inputs
  • WebXR
  • Controllers / Hands
  • Assets
  • Panels
  • Layout
  • Keyboard
  • more...