You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/core/src/core/ShadowedScene/example.ts
+76-60Lines changed: 76 additions & 60 deletions
Original file line number
Diff line number
Diff line change
@@ -1,18 +1,26 @@
1
1
/* MD
2
-
### 😎 Adding some cool shadows
2
+
### 🚀 Handling BIM models like a boss
3
3
---
4
4
5
-
In this tutorial, you'll learn how to add some nice looking (yet performant) shadows to your scene.
5
+
In this tutorial, you'll learn how to load your BIM models in Fragment format. Fragment is an [open source geometry system](https://github.com/ThatOpen/engine_fragment/) that we created on top of [Three.js](https://threejs.org/) to display BIM models fast, while keeping control over the individual items of the model. The idea is simple: a BIM model is a FragmentsGroup, which is (like the name implies) a collection of fragments. A fragment is a set of identical geometries instantiated around the scene.
6
+
7
+
:::tip How do I get a BIM model in Fragment format?
8
+
9
+
The IfcLoader component does exactly that! It converts IFC models to Fragments. Check out that tutorial if you are starting out with IFC files. Of course, you can just use the IfcLoader in your app, but loading fragments is more than x10 faster than loading IFC files. Our recommendation is to convert your IFC files to fragments just once, store the fragment somewhere (frontent of backend) and then load the fragments instead of teh IFC models directly.
10
+
11
+
:::
6
12
7
13
In this tutorial, we will import:
8
14
9
15
- `Three.js` to get some 3D entities for our app.
16
+
- `@thatopen/ui` to add some simple and cool UI menus.
10
17
- `@thatopen/components` to set up the barebone of our app.
11
18
- `Stats.js` (optional) to measure the performance of our app.
12
19
*/
13
20
14
21
import*asTHREEfrom"three";
15
22
importStatsfrom"stats.js";
23
+
import*asBUIfrom"@thatopen/ui";
16
24
// You have to import * as OBC from "@thatopen/components"
Now we will add shadows. We will start by enabling the shadows in the three.js renderer.
94
+
We will use the `@thatopen/ui` library to add some simple and cool UI elements to our app. First, we need to call the `init` method of the `BUI.Manager` class to initialize the library:
Now we will create a simple panel with a set of buttons that call the previously defined functions. For more information about the UI library, you can check the specific documentation for it!
And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.
Next, we'll set up the scene and exclude the grid from the shadows. The shadows take into account the distance to the farthest visible object to decide a resolution for the shadows. The grid is infinite, so we don't want to take it into account.
140
+
### 🎉 Wrap up
141
+
---
142
+
143
+
That's it! Now you know how to load, export and dispose Fragments in your app. Fragments are much faster than raw IFC models, so you should definitely store them in your app if you want your users to have a fast loading experience. For bigger models you can use streaming, but that's another tutorial!
We'll use the [Stats.js](https://github.com/mrdoob/stats.js) to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.
That's it! Now you know how to add some nice looking shadows to your scene. Congratulations! Keep exploring more tutorials in the documentation to keep learning.
0 commit comments