@cofrico/3d-objects

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)