Introduction to Open BIM Components
Open BIM Components is a powerful library specifically designed for developing Building Information Modeling (BIM) applications right in your web browser. The library is crafted using Three.js and other supportive libraries, enabling users to create sophisticated, interactive 3D environments with relative ease. This library offers a wide array of pre-built tools and features tailored for building browser-based 3D BIM applications, such as advanced post-production effects, dimensioning, intuitive floorplan navigation, DXF export capabilities, and much more.
Library Packages
The library is divided into two main packages:
-
@thatopen/components: This is the core package that contains the fundamental functionalities. It is designed to function seamlessly in both browser and Node.js environments, providing flexibility and versatility to developers.
-
@thatopen/components-front: This package is dedicated to features that are exclusive to browser environments, enhancing the interactivity and capabilities of web-based applications.
Getting Started with Open BIM Components
To effectively utilize Open BIM Components, a basic understanding of the Three.js API is beneficial. With this knowledge, developers can create and manipulate 3D scenes effortlessly. Below is a simplified overview of how one might create a navigable cube within a 3D environment using this library.
import * as THREE from "three";
import * as OBC from "../..";
const container = document.getElementById("container")!;
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const world = worlds.create<
OBC.SimpleScene,
OBC.SimpleCamera,
OBC.SimpleRenderer
>();
world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);
components.init();
const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
const geometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh(geometry, material);
world.scene.three.add(cube);
world.scene.setup();
world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
In this example, developers set up a basic 3D scene consisting of a cube. Using mouse or touch events, users can explore the cube from various perspectives, thanks to the navigational capabilities provided by the library.
Conclusion
Open BIM Components is a comprehensive, robust solution for developers aiming to build sophisticated 3D BIM applications. With its seamless integration with Three.js and support for both browser and Node.js environments, it offers developers the tools needed to bring complex 3D architectural designs to life directly in the web browser. Whether you're aiming to create a detailed floorplan, visualize architectural dimensions, or export designs in DXF format, Open BIM Components equips you with the resources to innovate and expand your digital architectural capabilities. For more information and resources, consider exploring further through its documentation or check out a demo to experience its potential firsthand.