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)