-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
51 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,81 +1,86 @@ | ||
| <p align="center"> | ||
| <a href="https://ifcjs.io/">ifc.js</a> | ||
| <a href="https://thatopen.com/">TOC</a> | ||
| | | ||
| <a href="https://ifcjs.github.io/components/docs/index.html">documentation</a> | ||
| <a href="https://platform.thatopen.com/documentation">documentation</a> | ||
| | | ||
| <a href="https://ifcjs.github.io/components/examples/fragment-hello-world.html">demo</a> | ||
| <a href="https://platform.thatopen.com/app">demo</a> | ||
| | | ||
| <a href="https://discord.gg/FXfyR4XrKT">discord</a> | ||
| <a href="https://people.thatopen.com/">community</a> | ||
| | | ||
| <a href="https://www.npmjs.com/package/openbim-components">npm package</a> | ||
| | | ||
| <a href="https://airtable.com/shrP82Kgb9Q1LEgbU">roadmap</a> | ||
| <a href="https://airtable.com/appolsrsBWel2m6wr/shr4ybI6JOeHJEqkG">roadmap</a> | ||
| </p> | ||
|
|
||
|  | ||
|  | ||
|
|
||
| <h1>Open BIM Components <img src="https://ifcjs.github.io/info/img/logo.svg" width="32"></h1> | ||
| <h1>Clay <img src="https://ifcjs.github.io/components/resources/favicon.ico" width="32"></h1> | ||
|
|
||
| [![NPM Package][npm]][npm-url] | ||
| [![NPM Package][npm-downloads]][npm-url] | ||
| [![NPM Package][oc-contributors]][oc] | ||
| [![Discord][discord]][discord-url] | ||
| [](https://github.com/IFCjs/components/actions/workflows/tests.yaml) | ||
| [](https://github.com/IFCjs/components/actions/workflows/tests.yaml) | ||
|
|
||
| This library is a collection of BIM tools based on [Three.js](https://github.com/mrdoob/three.js/) and other libraries. It includes pre-made features to easily build browser-based 3D BIM applications, such as postproduction, dimensions, floorplan navigation, DXF export and much more. | ||
| This library is a geometric system to efficiently display 3D BIM data built on top of [Three.js](https://github.com/mrdoob/three.js/). Specifically, it uses [InstancedMeshes](https://threejs.org/docs/#api/en/objects/InstancedMesh) to draw each set of repeated geometries (which are abundant in BIM models) using a single draw call. | ||
|
|
||
| - It uses [flatbuffers](https://flatbuffers.dev/) to persist data as a binary format efficiently. | ||
| - It prevents [memory leaks](https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects) exposing a `dispose()` method. | ||
|
|
||
| You generally won't need to interact with this library direclty. Instead, you can use [components](https://github.com/ifcjs/components), which provides an abstraction layer of tools that use this format and make the creation of BIM tools very easy. | ||
|
|
||
| ### Usage | ||
|
|
||
| You need to be familiar with [Three.js API](https://github.com/mrdoob/three.js/) to be able to use this library effectively. In the following example, we will create a cube in a 3D scene that can be navigated with the mouse or touch events. You can see the full example [here](https://github.com/IFCjs/components/blob/main/examples/hello-world.html) and the deployed app [here](https://ifcjs.github.io/components/src/core/SimpleScene/index.html). | ||
| You need to be familiar with [Three.js API](https://github.com/mrdoob/three.js/) to be able to use this library effectively. In the following example, we will create a cube in a 3D scene that can be navigated with the mouse or touch events. You can see the full example [here](https://github.com/IFCjs/components/blob/main/src/core/SimpleScene/index.html) and the deployed app [here](https://ifcjs.github.io/components/src/core/SimpleScene/index.html). | ||
|
|
||
| ```js | ||
| import * as THREE from "three"; | ||
| import * as OBC from "openbim-components"; | ||
|
|
||
| // Get the <div> element where the scene will be displayed | ||
| import * as FRAGS from 'bim-fragment'; | ||
|
|
||
| const container = document.getElementById('container'); | ||
| const canvas = document.getElementById('container'); | ||
|
|
||
| // Initialize the basic components needed to use this library | ||
| // Simple three.js scene: check the resources folder of this repo | ||
| const threeScene = new SimpleThreeScene(canvas); | ||
|
|
||
| const components = new OBC.Components(); | ||
| let chairs; | ||
|
|
||
| components.scene = new OBC.SimpleScene(components); | ||
| components._renderer = new OBC.SimpleRenderer(components, container); | ||
| components.camera = new OBC.SimpleCamera(components); | ||
| components.raycaster = new OBC.SimpleRaycaster(components); | ||
| const serializer = new FRAGS.Serializer(); | ||
|
|
||
| components.init(); | ||
| async function importChairsBinary() { | ||
| if (chairs !== undefined) return; | ||
| const fetched = await fetch("../resources/chairs.frag"); | ||
| const rawData = await fetched.arrayBuffer(); | ||
| const buffer = new Uint8Array(rawData); | ||
| chairs = serializer.import(buffer); | ||
|
|
||
| // Add some elements to the scene | ||
| for(const frag of chairs) { | ||
| threeScene.scene.add(frag.mesh); | ||
| } | ||
| } | ||
|
|
||
| const scene = components.scene.get(); | ||
| function deleteChairs() { | ||
| if (!chairs) return; | ||
| for(const frag of chairs) { | ||
| frag.dispose(true); | ||
| } | ||
| chairs = undefined; | ||
| } | ||
|
|
||
| const geometry = new new THREE.BoxGeometry(3, 3, 3); | ||
| const material = new THREE.MeshStandardMaterial({ color: "red" }); | ||
| const cube = THREE.Mesh(geometry, material); | ||
| cube.position.set(0, 1.5, 0); | ||
| scene.add(cube); | ||
| async function exportChairsBinary() { | ||
| if (!chairs) return; | ||
|
|
||
| components.meshes.push(cube); | ||
| const buffer = serializer.export(chairs); | ||
| const file = new File([new Blob([buffer])], "chairs.frag"); | ||
| const link = document.createElement('a'); | ||
| document.body.appendChild(link); | ||
|
|
||
| const directionalLight = new THREE.DirectionalLight(); | ||
| directionalLight.position.set(5, 10, 3); | ||
| directionalLight.intensity = 0.5; | ||
| scene.add(directionalLight); | ||
| link.download = 'chairs.frag'; | ||
| link.href = URL.createObjectURL(file); | ||
| link.click(); | ||
|
|
||
| const ambientLight = new THREE.AmbientLight(); | ||
| ambientLight.intensity = 0.5; | ||
| scene.add(ambientLight); | ||
| link.remove(); | ||
| } | ||
| ``` | ||
|
|
||
|
|
||
|
|
||
| [ifcjs]: https://ifcjs.io/ | ||
| [npm]: https://img.shields.io/npm/v/openbim-components | ||
| [npm-url]: https://www.npmjs.com/package/openbim-components | ||
| [npm-downloads]: https://img.shields.io/npm/dw/openbim-components | ||
| [discord]: https://img.shields.io/discord/799990228336115742 | ||
| [discord-url]: https://discord.gg/FXfyR4XrKT | ||
| [oc]: https://opencollective.com/ifcjs | ||
| [oc-contributors]: https://opencollective.com/ifcjs/tiers/badge.svg | ||
| [npm-url]: https://www.npmjs.com/package/bim-fragment | ||
| [npm-downloads]: https://img.shields.io/npm/dw/bim-fragment |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.