githubdragonfly / dotbim.three.js

Convert dotbim file to three.js object

dotbim.three.js

Test dotbim with three.js using release version r147.

Here is an Online Preview page where you can drop your BIM file. See the Example section below for additional info.

dotbim

Move and test colors for each face using in the mesh object.

meshes

• mesh_id - number
• coordinates - [x1,y1,z1,x2,y2,z2...]
• indices - [i1,i2,i3,j1,j2,j3...]
• colors - [ir,ig,ib,ia,jr,jg,jb,ja...] (optional not official)

colors could have one default color or one color for each face (indices.length / 3).

elements

• mesh_id - number
• vector - {x,y,z} - if undefined use {0,0,0}
• rotation - {qx,qy,qz,qw} - if undefined use {0,0,0,1}
• color - {r,g,b,a} - if undefined use colors default mesh
• face_colors - [ir,ig,ib,ia,jr,jg,jb,ja...] if undefined use colors default mesh

In this example the color in the element is blending with the color in the mesh, face_colors and color from element are optional and in the mesh colors is optional (colors does not exist in the oficial dotbim schema.)

Example

The index.html has a simple implementation with the following features.

• Load .bim files using Drag-and-Drop
• Press Keyboard 1 - Dark Background
• Press Keyboard 2 - Light Background
• Press Keyboard c - Clear Scene
• Press Keyboard n - Create dotbim_faces sample
• Press Keyboard m - Create dotbim_cubes sample

Usage ( dotbim files )

Download either dotbim.three.js or dotbim.three.min.js file. Use it directly in your browser application:

<script src="./path-to-dotbim-file/dotbim.three.min.js"></script>

Then call the function dotbim_CreateMeshes to convert a dotbim_text_content to THREE.Object3D array as in the following example:

dotbim_CreateMeshes(dotbim_text_content).forEach(bim_mesh => {
    scene.add(bim_mesh);
});

Or use the THREE.FileLoader function as in the following example:

function loadBIM() {
  // previously created: var scene = new THREE.Scene(), mesh = new THREE.Object3D();
  // selected_bim_file in this case would represent an actual URL to the BIM model
  // for local file browsing it would have to be replaced with:
  //    URL.createObjectURL( selected_bim_file )
  // and eventually revoked with:
  //    URL.revokeObjectURL( selected_bim_file )

  new THREE.FileLoader().load( selected_bim_file, async function( text ) {

    // the following is the actual function from the dotbim.three.js file
    // which exports group of meshes that can be added directly to the scene
    // or passed to the user created mesh object for easier manipulation

    mesh = dotbim_CreateMeshes( text );

    scene.add( mesh );

  });
}

Practical usage example can be seen in the mobile STEP Viewer with the code available here.

Usage ( BIMLoader.js )

Download non-module version of BIMLoader.js. Use it directly in your browser application:

<script src="./path-to-loader-file/BIMLoader.js"></script>

Then use the three.js standard approach to load a model:

new BIMLoader().load( 'models/house.bim', bim => scene.add( bim ) );

Practical usage example can be seen in the STEP Viewer with the code available here.

With the module version of BIMLoader.js process the import:

import { BIMLoader } from './path-to-loader-file/BIMLoader.js';

License

This package is licensed under the MIT Licence.

---

Do you like this package? Please star this project on GitHub!

---

Copyright © ricaun 2023