https://github.com/baues/building-editor-react

React wrapper for building-editor
https://github.com/baues/building-editor-react

bim building-editor react threejs webgl

Last synced: about 1 month ago
JSON representation

React wrapper for building-editor

• Host: GitHub
• URL: https://github.com/baues/building-editor-react
• Owner: baues
• License: mit
• Created: 2021-04-24T01:24:12.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-05-28T06:33:38.000Z (over 2 years ago)
• Last Synced: 2024-11-21T14:39:15.647Z (3 months ago)
• Topics: bim, building-editor, react, threejs, webgl
• Language: TypeScript
• Homepage:
• Size: 130 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# building-editor-react

[![npm version](https://badge.fury.io/js/building-editor-react.svg)](https://badge.fury.io/js/building-editor-react)

React wrapper for [building-editor](https://github.com/baues/building-editor)

## Installation

```

npm install building-editor-react

```

## Usage

[Sample code](https://codesandbox.io/s/sad-https-ms8ob)

At any parent component

```js

import { Provider } from 'building-editor-react';

function MyEditorParent() {

  return (

    

      Your children

    

  );

}

```

At any child component

```js

import { Editor, ViewCube, useEvents } from 'building-editor-react';

import MyMenu from './MyMenu'; // your menu component described below

function MyEditor() {

  useEvents(); // if you need

  return (

    <>

      } />

      

    >

  );

}

```

## API

### Editor

Editor component to make your editor. It takes `config` and `contextMenu` props.

### Provider

Editor context provider component which must be placed parent component of Editor.

### ContextMenu, ContextMenuItem, useContextMenuClose

Create your custom context menu component as below.

```js

import { ContextMenu, ContextMenuItem, useContextMenuClose } from 'building-editor-react';

function MyMenu() {

  const closeContextMenu = useContextMenuClose();

  return (

    

      Your Menu

      Your Menu2

    

  );

}

```

### ViewCube

Built-in ViewCube component. It's not able to be customized for now.

### useEditor, useEditorState

Editor instance of `building-editor` is accessible from this hooks. You can get whole editor instance with useEditor while curated properties are available with useEditorState.

```js

const { editor, setEditor } = useEditor();

const { renderer, scene, sceneHelpers, viewportCamera, raycaster, selected, hovered, gridHelper, axesHelper, planeHelper, stencilPlane } = useEditorState();

```

### useActions

Many actions are available from this hooks. Check [here](https://github.com/baues/building-editor-react/blob/main/src/hooks/useActions.ts) to use them.  

Followings are the actions available from hooks  

- render:()->void  

- setScreenSize  

- select  

- setHovered  

- focus  

- addGeometry  

- addMaterialToRefCounter  

- addMaterial  

- getObjectMaterial  

- setObjectMaterial  

- addCamera  

- addObject  

- removeObject  

- addObjectAsHelper  

- clipGlobal  

- setTransformControlsMode  

- updateGridHelper  

- updateAxesHelper  

- loadFile  

- loadFiles  

- loadFileFromLocal  

- loadFilesFromLocal  

- exportObject  

- exportScene  

- exportDAE  

- clearEditor  

### useEvents

This is built-in handler of `building-editor` events. It's not necessary to use this, but you can easily create editor behavior with `useEvent`.