Visitar URL original
feat(core): add grids config · ThatOpen/engine_components@f99e137 · GitHub
Skip to content

Commit f99e137

Browse files
agviegasagviegas
committed
feat(core): add grids config
1 parent fde9faa commit f99e137

6 files changed

Lines changed: 264 additions & 46 deletions

File tree

‎packages/core/src/core/Clipper/src/clipper-config.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// eslint-disable-next-line max-classes-per-file
21
import * as THREE from "three";
32
import {
43
BooleanSettingsControl,

‎packages/core/src/core/Grids/example.ts‎

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ In this tutorial, we will import:
1919
*/
2020

2121
import * as THREE from "three";
22+
import Stats from "stats.js";
2223
import * as OBC from "@thatopen/components";
24+
import * as BUI from "@thatopen/ui";
2325

2426
/* MD
2527
### 🌎 Setting up a simple scene
@@ -46,7 +48,10 @@ world.camera = new OBC.SimpleCamera(components);
4648

4749
components.init();
4850

49-
const cube = new THREE.Mesh(new THREE.BoxGeometry());
51+
const cube = new THREE.Mesh(
52+
new THREE.BoxGeometry(),
53+
new THREE.MeshBasicMaterial({ color: "red" }),
54+
);
5055
world.scene.three.add(cube);
5156

5257
/* MD
@@ -69,6 +74,80 @@ const grids = components.get(OBC.Grids);
6974
const grid = grids.create(world);
7075
console.log(grid);
7176

77+
/* MD
78+
### 🧩 Adding some UI
79+
---
80+
81+
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:
82+
83+
*/
84+
85+
BUI.Manager.init();
86+
87+
/* MD
88+
Now we will create some UI elements and bind them to some of the controls of the clipper, like activation, visibility, size, color, etc. For more information about the UI library, you can check the specific documentation for it!
89+
*/
90+
91+
const panel = BUI.Component.create<BUI.PanelSection>(() => {
92+
return BUI.html`
93+
<bim-panel label="Grids Tutorial" class="options-menu">
94+
95+
<bim-panel-section collapsed label="Controls"">
96+
97+
<bim-checkbox label="Grid visible" checked
98+
@change="${({ target }: { target: BUI.Checkbox }) => {
99+
grid.config.visible = target.value;
100+
}}">
101+
</bim-checkbox>
102+
103+
<bim-color-input
104+
label="Grid Color" color="#bbbbbb"
105+
@input="${({ target }: { target: BUI.ColorInput }) => {
106+
grid.config.color = new THREE.Color(target.color);
107+
}}">
108+
</bim-color-input>
109+
110+
<bim-number-input
111+
slider step="0.1" label="Grid primary size" value="1" min="0" max="10"
112+
@change="${({ target }: { target: BUI.NumberInput }) => {
113+
grid.config.primarySize = target.value;
114+
}}">
115+
</bim-number-input>
116+
117+
<bim-number-input
118+
slider step="0.1" label="Grid secondary size" value="10" min="0" max="20"
119+
@change="${({ target }: { target: BUI.NumberInput }) => {
120+
grid.config.secondarySize = target.value;
121+
}}">
122+
</bim-number-input>
123+
124+
</bim-panel-section>
125+
</bim-panel>
126+
`;
127+
});
128+
129+
document.body.append(panel);
130+
131+
/* MD
132+
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.
133+
*/
134+
135+
const button = BUI.Component.create<BUI.PanelSection>(() => {
136+
return BUI.html`
137+
<bim-button class="phone-menu-toggler" icon="solar:settings-bold"
138+
@click="${() => {
139+
if (panel.classList.contains("options-menu-visible")) {
140+
panel.classList.remove("options-menu-visible");
141+
} else {
142+
panel.classList.add("options-menu-visible");
143+
}
144+
}}">
145+
</bim-button>
146+
`;
147+
});
148+
149+
document.body.append(button);
150+
72151
/* MD
73152
### ⏱️ Measuring the performance (optional)
74153
---

‎packages/core/src/core/Grids/index.ts‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import * as THREE from "three";
21
import { Component, Disposable, World, Event } from "../Types";
3-
import { GridConfig, SimpleGrid } from "./src";
2+
import { SimpleGrid } from "./src";
43
import { Components } from "../Components";
54

65
export * from "./src";
@@ -20,16 +19,6 @@ export class Grids extends Component implements Disposable {
2019
*/
2120
list = new Map<string, SimpleGrid>();
2221

23-
/**
24-
* The default configuration for grid creation.
25-
*/
26-
config: Required<GridConfig> = {
27-
color: new THREE.Color(0xbbbbbb),
28-
size1: 1,
29-
size2: 10,
30-
distance: 500,
31-
};
32-
3322
/** {@link Disposable.onDisposed} */
3423
readonly onDisposed = new Event();
3524

@@ -54,7 +43,7 @@ export class Grids extends Component implements Disposable {
5443
if (this.list.has(world.uuid)) {
5544
throw new Error("This world already has a grid!");
5645
}
57-
const grid = new SimpleGrid(this.components, world, this.config);
46+
const grid = new SimpleGrid(this.components, world);
5847
this.list.set(world.uuid, grid);
5948
world.onDisposed.add(() => {
6049
this.delete(world);

‎packages/core/src/core/Grids/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from "./simple-grid";
2+
export * from "./simple-grid-config";

‎packages/core/src/core/Grids/src/simple-grid-config.ts‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import * as THREE from "three";
2+
import {
3+
BooleanSettingsControl,
4+
ColorSettingsControl,
5+
NumberSettingControl,
6+
} from "../../Types";
7+
import { Configurator } from "../../ConfigManager";
8+
import { SimpleGrid } from "./simple-grid";
9+
10+
type SimpleGridConfigType = {
11+
visible: BooleanSettingsControl;
12+
color: ColorSettingsControl;
13+
primarySize: NumberSettingControl;
14+
secondarySize: NumberSettingControl;
15+
distance: NumberSettingControl;
16+
};
17+
18+
/**
19+
* Configuration interface for the {@link SimpleGrid}.
20+
*/
21+
export interface SimpleGridConfig {
22+
/**
23+
* The color of the grid lines.
24+
*/
25+
color: THREE.Color;
26+
27+
/**
28+
* The size of the primary grid lines.
29+
*/
30+
primarySize: number;
31+
32+
/**
33+
* The size of the secondary grid lines.
34+
*/
35+
secondarySize: number;
36+
37+
/**
38+
* The distance at which the grid lines start to fade away.
39+
*/
40+
distance: number;
41+
}
42+
43+
export class SimpleGridConfigManager extends Configurator<
44+
SimpleGrid,
45+
SimpleGridConfigType
46+
> {
47+
protected _config: SimpleGridConfigType = {
48+
visible: {
49+
value: true,
50+
type: "Boolean" as const,
51+
},
52+
color: {
53+
value: new THREE.Color() as THREE.Color,
54+
type: "Color" as const,
55+
},
56+
primarySize: {
57+
type: "Number" as const,
58+
interpolable: true,
59+
value: 1,
60+
min: 0,
61+
max: 1000,
62+
},
63+
secondarySize: {
64+
type: "Number" as const,
65+
interpolable: true,
66+
value: 10,
67+
min: 0,
68+
max: 1000,
69+
},
70+
distance: {
71+
type: "Number" as const,
72+
interpolable: true,
73+
value: 500,
74+
min: 0,
75+
max: 500,
76+
},
77+
};
78+
79+
get visible() {
80+
return this._config.visible.value;
81+
}
82+
83+
set visible(value: boolean) {
84+
this._config.visible.value = value;
85+
this._component.visible = value;
86+
}
87+
88+
get color() {
89+
return this._config.color.value;
90+
}
91+
92+
set color(value: THREE.Color) {
93+
this._config.color.value = value;
94+
this._component.material.uniforms.uColor.value = value;
95+
this._component.material.uniformsNeedUpdate = true;
96+
}
97+
98+
get primarySize() {
99+
return this._config.primarySize.value;
100+
}
101+
102+
set primarySize(value: number) {
103+
this._config.primarySize.value = value;
104+
this._component.material.uniforms.uSize1.value = value;
105+
this._component.material.uniformsNeedUpdate = true;
106+
}
107+
108+
get secondarySize() {
109+
return this._config.secondarySize.value;
110+
}
111+
112+
set secondarySize(value: number) {
113+
this._config.secondarySize.value = value;
114+
this._component.material.uniforms.uSize2.value = value;
115+
this._component.material.uniformsNeedUpdate = true;
116+
}
117+
118+
get distance() {
119+
return this._config.distance.value;
120+
}
121+
122+
set distance(value: number) {
123+
this._config.distance.value = value;
124+
this._component.material.uniforms.uDistance.value = value;
125+
this._component.material.uniformsNeedUpdate = true;
126+
}
127+
}

0 commit comments

Comments
 (0)