\r\n\r\n[![Components NPM Package][npm]][npm-url]\r\n[![Components NPM Package][npm-downloads]][npm-url]\r\n[![Components Front NPM Package][npm-front]][npm-url-front]\r\n[![Components Front NPM Package][npm-downloads-front]][npm-url-front]\r\n\r\nThis 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. \r\n\r\n\r\n## 🤝 Want our help?\r\nAre you developing a project with our technology and would like our help?\r\nApply now to join [That Open Accelerator Program](https://thatopen.com/accelerator)!\r\n\r\n## Packages\r\n\r\nThis library contains 2 packages:\r\n\r\n`@thatopen/components` - The core functionality. Compatible both with browser and Node.js environments.\r\n\r\n`@thatopen/components-front` - Features exclusive for browser environments.\r\n\r\n## Usage\r\n\r\nYou 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/ThatOpen/engine_components/blob/main/packages/core/src/core/Worlds/example.ts) and the deployed app [here](https://thatopen.github.io/engine_components/examples/Worlds/index.html).\r\n\r\n```js\r\n/* eslint import/no-extraneous-dependencies: 0 */\r\n\r\nimport * as THREE from \"three\";\r\nimport * as OBC from \"../..\";\r\n\r\nconst container = document.getElementById(\"container\")!;\r\n\r\nconst components = new OBC.Components();\r\n\r\nconst worlds = components.get(OBC.Worlds);\r\n\r\nconst world = worlds.create<\r\n OBC.SimpleScene,\r\n OBC.SimpleCamera,\r\n OBC.SimpleRenderer\r\n>();\r\n\r\nworld.scene = new OBC.SimpleScene(components);\r\nworld.renderer = new OBC.SimpleRenderer(components, container);\r\nworld.camera = new OBC.SimpleCamera(components);\r\n\r\ncomponents.init();\r\n\r\nconst material = new THREE.MeshLambertMaterial({ color: \"#6528D7\" });\r\nconst geometry = new THREE.BoxGeometry();\r\nconst cube = new THREE.Mesh(geometry, material);\r\nworld.scene.three.add(cube);\r\n\r\nworld.scene.setup();\r\n\r\nworld.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);\r\n```\r\n\r\n\r\n[npm]: https://img.shields.io/npm/v/@thatopen/components\r\n[npm-url]: https://www.npmjs.com/package/@thatopen/components\r\n[npm-downloads]: https://img.shields.io/npm/dw/@thatopen/components\r\n[npm-front]: https://img.shields.io/npm/v/@thatopen/components-front\r\n[npm-url-front]: https://www.npmjs.com/package/@thatopen/components-front\r\n[npm-downloads-front]: https://img.shields.io/npm/dw/@thatopen/components-front","users":{}}