# @cofrico/layout-3d

> Layout for 3D applications

Latest version **1.3.2** (published 2021-01-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cofrico/layout-3d
pnpm add @cofrico/layout-3d
yarn add @cofrico/layout-3d
bun add @cofrico/layout-3d
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2021-01-18 |
| First published | 2020-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 5 |
| Unpacked size | 308.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Glue Digital |
| Maintainers | thedrumz, mancontr |

## Links

- npm: https://www.npmjs.com/package/@cofrico/layout-3d
- Repository: https://gitlab.com/glue-gl/cofrico/layout-3d
- Homepage: https://gitlab.com/glue-gl/cofrico/layout-3d#readme
- Issues: https://gitlab.com/glue-gl/cofrico/layout-3d/issues
- npm.io page: https://npm.io/package/@cofrico/layout-3d

## Dependencies (5)

- [drei](https://npm.io/package/drei.md) ^2.2.17
- [sass](https://npm.io/package/sass.md) ^1.26.10
- [three](https://npm.io/package/three.md) ^0.124.0
- [react-three-fiber](https://npm.io/package/react-three-fiber.md) ^5.3.14
- [@gluedigital/threejs-orbit-controls](https://npm.io/package/@gluedigital/threejs-orbit-controls.md) ^1.2.1

## Recent versions

- 1.3.2 (latest) — 2021-01-18
- 1.3.1 — 2021-01-18
- 1.3.0 — 2021-01-18
- 1.2.1 — 2020-11-03
- 1.2.0 — 2020-11-03
- 1.1.0 — 2020-08-19
- 1.0.5 — 2020-08-10
- 1.0.4 — 2020-08-05
- 1.0.3 — 2020-08-05
- 1.0.2 — 2020-08-04
- 1.0.1 — 2020-07-31
- 1.0.0 — 2020-07-30

## README

# 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...

[![NPM](https://img.shields.io/npm/v/@cofrico/layout-3d.svg)](https://www.npmjs.com/package/layout-3d) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install
```bash
npm install @cofrico/layout-3d
```

## Usage
```jsx
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)

---
_Source: https://npm.io/package/@cofrico/layout-3d · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._