Layout-3d

Layout-3d is build on top of react-three-fiber, a react reconciler for ThreeJS. Is a 3d-editor applications wrapper that helps with common initializations like plan setup, grid, cameras, themes, etc...

Install

npm install @cofrico/layout-3d

Usage

import  React  from  'react'
import { Layout } from  '@cofrico/layout-3d'

const  App = () => {
	return {

	<Layout
		dimensions={[70, 50]}
		theme="dark"
	>
		// Put here your 3d components
	</Layout>
	}
}

Options

| Name | Type | Description | Default | |--|--|--|--| | theme | string | "dark" or "light" | "dark" | camera | string | "perspective" or "orthographic" | "perspective" | grid | bool | whether or not the grid is visible | true | plan | bool | whether or not the plan is visible | true | dimensions | array[width, height] | define the plan dimensions (in meters) | [50, 50] | fileURL | string | url of the file used for plan background | ''

Hooks

useLayout

Returns the inner state object. It can only be used from <Layout /> children, since its a context who holds the state

Example

You have a simple playground to show the layout working in /example folder. To run it, simply install the dependencies with yarn or npm install and run it from /example directory with yarn start. Then you can go to localhost:3000 to see the example working

License

MIT © [Glue Digital](https://github.com/Glue Digital)