@thatopen/components 3.4.0 → 3.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,81 +1,85 @@
1
- <p align="center">
2
- <a href="https://thatopen.com/">TOC</a>
3
- |
4
- <a href="https://docs.thatopen.com/intro">documentation</a>
5
- |
6
- <a href="https://thatopen.github.io/engine_components/examples/IfcLoader/index.html">demo</a>
7
- |
8
- <a href="https://people.thatopen.com/">community</a>
9
- |
10
- <a href="https://www.npmjs.com/org/thatopen">npm package</a>
11
- </p>
12
-
13
- ![cover](https://thatopen.github.io/engine_components/resources/cover.png)
14
-
15
- <h1>Open BIM Components <img src="https://thatopen.github.io/engine_components/resources/favicon.ico" width="32"/></h1>
16
-
17
- [![Components NPM Package][npm]][npm-url]
18
- [![Components NPM Package][npm-downloads]][npm-url]
19
- [![Components Front NPM Package][npm-front]][npm-url-front]
20
- [![Components Front NPM Package][npm-downloads-front]][npm-url-front]
21
-
22
- 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.
23
-
24
-
25
- ## 🤝 Want our help?
26
- Are you developing a project with our technology and would like our help?
27
- Apply now to join [That Open Accelerator Program](https://thatopen.com/accelerator)!
28
-
29
- ## Packages
30
-
31
- This library contains 2 packages:
32
-
33
- `@thatopen/components` - The core functionality. Compatible both with browser and Node.js environments.
34
-
35
- `@thatopen/components-front` - Features exclusive for browser environments.
36
-
37
- ## Usage
38
-
39
- 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/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).
40
-
41
- ```js
42
- /* eslint import/no-extraneous-dependencies: 0 */
43
-
44
- import * as THREE from "three";
45
- import * as OBC from "../..";
46
-
47
- const container = document.getElementById("container")!;
48
-
49
- const components = new OBC.Components();
50
-
51
- const worlds = components.get(OBC.Worlds);
52
-
53
- const world = worlds.create<
54
- OBC.SimpleScene,
55
- OBC.SimpleCamera,
56
- OBC.SimpleRenderer
57
- >();
58
-
59
- world.scene = new OBC.SimpleScene(components);
60
- world.renderer = new OBC.SimpleRenderer(components, container);
61
- world.camera = new OBC.SimpleCamera(components);
62
-
63
- components.init();
64
-
65
- const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
66
- const geometry = new THREE.BoxGeometry();
67
- const cube = new THREE.Mesh(geometry, material);
68
- world.scene.three.add(cube);
69
-
70
- world.scene.setup();
71
-
72
- world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
73
- ```
74
-
75
-
76
- [npm]: https://img.shields.io/npm/v/@thatopen/components
77
- [npm-url]: https://www.npmjs.com/package/@thatopen/components
78
- [npm-downloads]: https://img.shields.io/npm/dw/@thatopen/components
79
- [npm-front]: https://img.shields.io/npm/v/@thatopen/components-front
80
- [npm-url-front]: https://www.npmjs.com/package/@thatopen/components-front
81
- [npm-downloads-front]: https://img.shields.io/npm/dw/@thatopen/components-front
1
+ <p align="center">
2
+ <a href="https://thatopen.com/">TOC</a>
3
+ |
4
+ <a href="https://docs.thatopen.com/intro">documentation</a>
5
+ |
6
+ <a href="https://thatopen.github.io/engine_components/examples/IfcLoader/index.html">demo</a>
7
+ |
8
+ <a href="https://people.thatopen.com/">community</a>
9
+ |
10
+ <a href="https://www.npmjs.com/org/thatopen">npm package</a>
11
+ </p>
12
+
13
+ ![cover](https://thatopen.github.io/engine_components/resources/cover.png)
14
+
15
+ <h1>Open BIM Components <img src="https://thatopen.github.io/engine_components/resources/favicon.ico" width="32"/></h1>
16
+
17
+ [![Components NPM Package][npm]][npm-url]
18
+ [![Components NPM Package][npm-downloads]][npm-url]
19
+ [![Components Front NPM Package][npm-front]][npm-url-front]
20
+ [![Components Front NPM Package][npm-downloads-front]][npm-url-front]
21
+
22
+ 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.
23
+
24
+
25
+ ## 🤝 Want our help?
26
+ Are you developing a project with our technology and would like our help?
27
+ Apply now to join [That Open Accelerator Program](https://thatopen.com/accelerator)!
28
+
29
+ ## Packages
30
+
31
+ This library contains 2 packages:
32
+
33
+ `@thatopen/components` - The core functionality. Compatible both with browser and Node.js environments.
34
+
35
+ `@thatopen/components-front` - Features exclusive for browser environments.
36
+
37
+ ## Usage
38
+
39
+ 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/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).
40
+
41
+ ```js
42
+ /* eslint import/no-extraneous-dependencies: 0 */
43
+
44
+ import * as THREE from "three";
45
+ import * as OBC from "../..";
46
+
47
+ const container = document.getElementById("container")!;
48
+
49
+ const components = new OBC.Components();
50
+
51
+ const worlds = components.get(OBC.Worlds);
52
+
53
+ const world = worlds.create<
54
+ OBC.SimpleScene,
55
+ OBC.SimpleCamera,
56
+ OBC.SimpleRenderer
57
+ >();
58
+
59
+ world.scene = new OBC.SimpleScene(components);
60
+ world.renderer = new OBC.SimpleRenderer(components, container);
61
+ world.camera = new OBC.SimpleCamera(components);
62
+
63
+ components.init();
64
+
65
+ const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
66
+ const geometry = new THREE.BoxGeometry();
67
+ const cube = new THREE.Mesh(geometry, material);
68
+ world.scene.three.add(cube);
69
+
70
+ world.scene.setup();
71
+
72
+ world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
73
+ ```
74
+
75
+ ## 🤝 Contributing
76
+
77
+ Thinking of sending a PR? Awesome! Please read our [contributing guide](https://docs.thatopen.com/contributing) first — it covers the code conventions we follow (JSDoc, examples, resources, etc.) so your changes sail through review.
78
+
79
+
80
+ [npm]: https://img.shields.io/npm/v/@thatopen/components
81
+ [npm-url]: https://www.npmjs.com/package/@thatopen/components
82
+ [npm-downloads]: https://img.shields.io/npm/dw/@thatopen/components
83
+ [npm-front]: https://img.shields.io/npm/v/@thatopen/components-front
84
+ [npm-url-front]: https://www.npmjs.com/package/@thatopen/components-front
85
+ [npm-downloads-front]: https://img.shields.io/npm/dw/@thatopen/components-front