Objects-3d
Object-3d is build on top of react-three-fiber, a react reconciler for ThreeJS. Provides an abstraction for manage 3d objects easily
Install
npm install @cofrico/3d-objects
Usage
import React from 'react'
import { Layout } from '@cofrico/layout-3d'
import { Object3d, Room } from '@cofrico/layout-3d'
const FBXLoader = __CLIENT__ && require('three/examples/jsm/loaders/FBXLoader').FBXLoader
const App = () => {
return {
<Layout>
<Object3D
id="123"
type="type1"
objectURL="/evaporador.fbx"
loader={FBXLoader}
position={[10, 0, 1]}
/>
<Room
nodes={[[-5, 5], [5, 5], [5, -5], [-5, -5]]}
height={5}
doors={[{ width: 2, height: 4, offset: 3, roomFaceIndex: 1 }]}
>
<Object3D
id="456"
type="type1"
objectURL="/evaporador.fbx"
loader={FBXLoader}
position={[0, 0, 0]}
/>
</Room>
</Layout>
}
}
Object3D Options
A wrapper to create objects from 3d object file without pain
Name | Type | Description | Default | Required |
---|---|---|---|---|
objectURL | string | path to object file | true | |
loader | object | Can be FBXLoader, OBJLoader or any other ThreeJs loader | true | |
position | array | Array of 3d coordinates | [0, 0, 0] | false |
rotation | array | Array of 3d coordinates | [0, 0, 0] | false |
selected | bool | Set object as selected or not | false | false |
selectedColor | string | Color used when the object is selected. Can be a hex, or other css color type | 'red' | false |
userData | object | An object that can be used to store custom data | { } | false |
Room Options
A wrapper to create rooms (extrude structures) from parameters. Rooms can have childs like other Rooms or Object3D
Name | Type | Description | Default | Required |
---|---|---|---|---|
nodes | array | Array of 2d array coordinates | true | |
heigh | number | The room height | true | |
children | node | React children node | false | |
doors | array | Array of objects. Each object represents a door. See Door options | [ ] | false |
userData | object | An object that can be used to store custom data | { } | false |
color | string | Color used when the object is selected. Can be a hex, or other css color type | '#009b7f' | false |
disabled | bool | Set the object disabled or not, it only changes the color and opacity | false | false |
selected | bool | Set object as selected or not | false | false |
###Door options A room can have many doors. Each one can be defined with this options
Name | Type | Description | Default | Required |
---|---|---|---|---|
roomFaceIndex | number | An index representing a room face, in the same order than room nodes | true | |
width | number | Door with | true | |
heigh | number | Door height | true | |
offset | number | Offset from right corner of the room to position the door | 0 | false |
color | string | Color used when the object is selected. Can be a hex, or other css color type | '#dcdcdcf' | false |
opacity | number | The opacity of the door | 0.5 | false |
Example
You have a simple playground to show the objects usage 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)