@cofrico/layout-3d NPM

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	arraywidth, 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