Git Product home page Git Product logo

dotbim.three.js's Introduction

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.

Online Preview

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 oficial)

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

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(), edges = new THREE.Group();
  // 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 ) {

    let mesh_count = 1;

    // the following is the actual function from the dotbim.three.js file

    dotbim_CreateMeshes( text ).forEach( bim_mesh => {

      // name the mesh if required for any later code

      if (bim_mesh.name) {
        if (bim_mesh.name === '') {
          bim_mesh.name = 'mesh_' + mesh_count;
          mesh_count += 1;
        }
      } else {
        bim_mesh[ 'name' ] = 'mesh_' + mesh_count;
        mesh_count += 1;
      }

      // store the internally created edges if required

      if ( bim_mesh.edges ) edges.add( bim_mesh.edges );

      // add the bim_mesh to the model that will be displayed

      mesh.add( bim_mesh );
    });

    scene.add( mesh );
  });
}

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

License

This package is licensed under the MIT Licence.


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


Copyright © ricaun 2023

dotbim.three.js's People

Contributors

ricaun avatar githubdragonfly avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.