building-editor

The goal of this project is to provide base implementation of web 3D editor for building/architecture which can be used easily. The codes are based on three.js editor fork, as we respect the great work of three.js.

Note: This project is under development. Please remember that there would be breaking changes. Or you can join us to make this project better for users.

Installation

npm install building-editor

Usage

Sample code

import { Editor } from 'building-editor';

const editor = new Editor();
document.body.appendChild(editor.renderer.domElement);

const init = () => {
  const width = window.innerWidth;
  const height = window.innerHeight;
  editor.renderer.setPixelRatio(window.devicePixelRatio);
  editor.renderer.setSize(width, height);
  editor.render();
}

init();

API

Editor

The main API of this library to create web 3D editor. This includes properties and actions. Note that you need to implement user interactions such as selected, hovered etc., using addEventListener since Editor itself does not provide it.

Constructor

Editor(config:Config,settings:Settings).

This creates a new Editor.

config - configuration data to specify cotrolability of editor (e.g. undo/redo, delete etc).
settings - setting data which summarize view setting such as renderer, camera, scene etc.

Properties

.config:Config.

configuration data to specify cotrolability of editor (e.g. undo/redo, delete etc).

.settings:Settings.

setting data which summarize view setting such as renderer, camera, scene etc.

.editorControls:EditorControls.

extension of THREE.EventDispatcher

.renderer:THREE.WebGLRenderer.

.DEFAULT_CAMERA:THREE.Camera.

.history:History.

Manage undo/redo history

.exporter:Exporter.

Utility class to export geometry in different format (e.g. obj, stl, dae etc)

.loader:Loader.

Utility class to load geometry file into editor

.camera:THREE.Camera.

.scene:THREE.Scene.

.sceneHelpers:THREE.Scene.

.objects:THREE.Object3D[].

.INITIAL_OBJECTS:THREE.Object3D[].

.INITIAL_HELPERS:THREE.Object3D[].

.geometries:{[index:string]:THREE.BufferGeometry}

.materials:{[index:string]:THREE.Material}

.textures:{[index:string]:THREE.Texture}

.materialsRefCounter: Map<THREE.Material,number>

aminations: {[index:string]:THREE.AnimationClip[]}

mixer: THREE.AnimationMixer

selected: THREE.Object3D | null

selected object in editor

hovered: THREE.Object3D | null

hovered object in editor

helpers: {[index:string]: Helper}

summarize following three helpers

• THREE.CameraHelper
• THREE.PointLightHelper
• THREE.DirectionalLightHelper
• THREE.SpotLightHelper
• THREE.HemisphereLightHelper
• THREE.SkeltonHelper

cameras: {[index:string]: THREE.Camera}

viewportCameras:THREE.Camera

orbitControls: THREE.OrbitControls

viewCubeControls:

gridHelper: THREE.GridHelper

axesHelper: THREE.AxesHelper

planeHelper: THREE.PlaneHelper

stencilPlane:

box:THREE.box3

selectionBox:THREE.BoxHelper

transformControls:TransformControls

raycaster:THREE.Raycaster

mouse:THREE.Vector2

contextMenu:

event:Event

Methods.

setConfig(config):void

objectChanged(object):void

showGridChanged(showGrid:boolean):void

render():void

setScene(scene):void

changeTransformModel(mode):void

addObject(object,parent,index):void

addObjectAsHelper(object):void

moveObject(object,parent,before):void

nameObject(object,name):void

removeObject(object):void

addGeometry(geometry):void

setGeometryName(geometry,name):void

addMaterial(material):void

addMaterialToRefCounter(material):void

removeMaterial(material):void

removeMaterialFromRefCounter(material):void

getMaterialById(id):THREE.Material | undefined

setMaterialName(material,name):void

addTexture(texture):void

addAnimation(object,animations):void

addCamera(camera):void

removeCamera(camera):void

addHelper(object):void

removeHelper(object):void

updateGridHelper(gridHelper):void

updateAxesHelper(axesHelper):void

updatePlaneHelper(planeHelper):void

clip(enabled):void

setDefaultCamera():void

setViewportCamera(uuid):void

select(object|null):void

selectNyId(id):void

selectByUuid(uuid):void

setHovered(object|null):void

focus(object):void

focusById(id):void

clear():void

fromJSON(json):void

toJSON():EditorJson

objectByUuid(uuid):THREE.Object3d|undefined

execute(cmd):void

undo():void

redo():void

Config(config?:BuildingEditorConfig).

BuildingEditorConfig.

Editor has many properties and methods. Please check Editor class to find them. The documents will be prepared later.