/bim-viewer

BIM Model Viewer

Primary LanguageTypeScript

bim viewer

BIM Viewer is a WebGL based front-end project that I created in my spare time. It is aimed to display BIM (Building Information Modeling) models, it supports gltf, obj, fbx, ifc, dae, etc. Since it is build on top of three.js, you can easily extend it to support any format that three.js support.

This project is not mature yet, it's more like a demostration. There are many TODOs as you can see below. It is unfortunate that I could not continue work on it, that's why I make it open source, and I hope it could benifit others who is in BIM/AEC field.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Docker run

docker-compose -f docker-compose.dev.yml up --build

Features

  • Orthographic camera ortho.gif

  • Distance measurement measure_dist.gif

  • Area measurement measure_area.gif

  • Angle measurement measure_angle.gif

  • Section plane section_plane.gif

  • Section box section_box.gif

  • Component selection select.gif

  • Display outline outline.gif

  • Transparent mode transparent.gif

Add your own projects

You can add your own projects or models by editing projects.json. Add following to projects.json, and put your models under public/projects/my_project folder.

{
    "id": "my_project",
    "name": "my project",
    "thumbnail": "projects/my_project/thumbnail.png",
    "camera": {
      "eye": [20, 10, 20],
      "look": [0, 1, 0]
    },
    "models": [{
      "name": "my_project",
      "src": "projects/my_project/my_model.gltf",
      "position": [0, 0, 0],
      "rotation": [-90, 0, 0],
      "scale": [1, 1, 1],
      "instantiate": false,
      "merge": false,
      "edges": true
    }]
  }

TODOs

There are so many features to be implemented, many bugs to be fixed, as well as enhancements:

  • Annotation manager
  • Viewpoint manager
  • Roaming
  • Model Exploder
  • Object property dialog
  • Toolbar
  • Project Setting
  • Navigation cube
  • Post-processing
  • GIS data (OGC services, GIS files, etc.)
  • ...

three.js