3JS Web Editor for SBE Education

This is a web-based 3D building design tool developed for teaching and exploring computational sustainable design and urban building energy modelling.

The tool allows users to create and modify simple building models, work with surrounding context, explore different design options, and study things such as solar position and shadows. The intention is to give students a hands-on way of seeing how changes to a building affect the design and its surrounding environment.

The application is built with React, TypeScript and Three.js, with D3.js used for design exploration and Rhino3dm used for working with .3dm geometry.

Features

3D Building Design

• Draw building footprints directly in the 3D view
• Extrude footprints into buildings
• Change the number and height of floors
• Generate and configure windows
• Change building materials and colours
• Edit buildings interactively in the scene

3D View

• Real-time Three.js rendering
• Perspective and orthographic camera views
• Camera navigation and controls
• Optional grid
• Snap-to-grid
• Dynamic lighting and shadows
• Dark and light themes

Context Models

HEATH can be used together with surrounding building geometry to provide context for the design.

• Import .3dm models
• Work with surrounding buildings
• Use grid and snapping when positioning geometry

Sun and Shadow Analysis

The sun controller provides a simple way of exploring how the sun moves around a building and how this affects shadows.

This is intended primarily as a visual and educational tool for investigating orientation, massing and surrounding context.

Design Exploration

The design exploration tools allow different building configurations to be created and compared.

Design alternatives are represented as a graph, making it possible to see how one design develops into another and return to earlier configurations.

D3.js is used for the graph visualisation.

---

Getting Started

Requirements

• Node.js 16 or later
• npm or Yarn
• A modern browser with WebGL support

Installation

git clone https://github.com/SB-Chalmers/threejsEditor.git
cd threejsEditor
npm install

Run the development version

npm run dev

The application will normally be available at:

http://localhost:5173

Build

npm run build

Preview the production build

npm run preview

Lint

npm run lint

Controls

Mouse

Input	Action
Left click	Place a point / select an element
Right click	Finish or cancel drawing
Mouse wheel	Zoom
Middle mouse drag	Pan

Drawing and building

Shortcut	Action
D	Start/restart drawing mode
U	Undo the last point
Escape	Cancel the current action
Ctrl + C	Open building configuration

View

Shortcut	Action
G	Toggle grid
S	Toggle snap to grid
F	Toggle FPS counter
T	Toggle theme
R	Toggle sun controller

Files

Shortcut	Action
Ctrl + S	Save configuration
I	Import configuration
Ctrl + E	Export scene

Other

Shortcut	Action
Delete / Backspace	Clear buildings
Ctrl + Shift + D	Open theme debugger

Creating a Building

1. Select the drawing tool.
2. Click on the ground plane to place the building corners.
3. Right-click to finish the footprint.
4. Open the building configuration.
5. Adjust the number of floors, floor height, windows and materials.
6. Continue editing the building or create another design variation.

Design Exploration

The design exploration tools are used to investigate different versions of a building.

A design can be changed and saved as a new configuration, allowing different options to be compared. The design graph shows the relationship between the different configurations and can be used to return to an earlier version.

The exact performance metrics and analysis tools are still under development.

Project Structure

The main parts of the application are organised roughly as follows:

Core

• ThreeJSCore — central Three.js setup
• CameraManager — camera and navigation
• SceneManager — scene and object management
• LightingManager — lighting and shadows
• EnvironmentManager — ground, sky and environment

Services

• BuildingService — building creation and modification
• DrawingService — drawing and geometry creation
• WindowService — window generation
• DesignExplorationService — design variations and exploration

Components

• SimpleBuildingCreator — main application
• LeftToolbar — main design tools
• BottomToolbar — viewport controls
• BuildingConfigPanel — building settings
• SunController — sun and shadow controls

Technologies

• React 18
• TypeScript
• Three.js
• D3.js
• Rhino3dm
• Tailwind CSS
• Vite
• Lucide React

Project Team

Alexander Hollberg Course Examiner / Principal Investigator

Toivo Säwén Course Incharge / Developer, HEATH 1.0

Isac Mjörnell Developer

Jieming Yan Testing

Sanjay Somanath HEATH Web Tool Developer

About HEATH

HEATH is being developed as part of teaching and research around sustainable built environments and computational design.

The web tool is intended to make it easier for students to experiment with building design and understand the connection between geometry, context and environmental performance.

The project is under active development, so parts of the application and documentation may change.

License

TBA.