Skip to content

Commit bf4a18c

Browse files
agviegasagviegas
committed
feat: implement grid
1 parent 6506e94 commit bf4a18c

13 files changed

Lines changed: 152 additions & 568 deletions

File tree

‎packages/components/src/core/Grids/example.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport"
7+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<link rel="stylesheet" href="../../../resources/styles.css">
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
11+
<link rel="icon" type="image/x-icon" href="../../../resources/favicon.ico">
12+
<title>Simple 2D Scene</title>
13+
<style>
14+
body {
15+
margin: 0;
16+
padding: 0;
17+
}
18+
19+
.full-screen {
20+
width: 100vw;
21+
height: 100vh;
22+
position: relative;
23+
overflow: hidden;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<div class="full-screen" id="container"></div>
30+
<script type="module" src="./example.ts"></script>
31+
</body>
32+
33+
</html>

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as THREE from "three";
2+
import * as OBC from "../..";
3+
4+
const container = document.getElementById("container")!;
5+
6+
const components = new OBC.Components();
7+
8+
const worlds = components.get(OBC.Worlds);
9+
const world = new OBC.SimpleWorld<
10+
OBC.SimpleScene,
11+
OBC.SimpleCamera,
12+
OBC.SimpleRenderer
13+
>(components);
14+
15+
world.scene = new OBC.SimpleScene(components);
16+
world.renderer = new OBC.SimpleRenderer(components, container);
17+
world.camera = new OBC.SimpleCamera(components);
18+
19+
worlds.add(world);
20+
21+
components.init();
22+
23+
const cube = new THREE.Mesh(new THREE.BoxGeometry());
24+
world.scene.three.add(cube);
25+
26+
const grids = components.get(OBC.Grids);
27+
grids.create(world);

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import * as THREE from "three";
2+
import { Component, Disposable, World, Event } from "../Types";
3+
import { GridConfig, SimpleGrid } from "./src";
4+
5+
export class Grids extends Component implements Disposable {
6+
static readonly uuid = "d1e814d5-b81c-4452-87a2-f039375e0489" as const;
7+
8+
list = new Map<string, SimpleGrid>();
9+
10+
onDisposed = new Event();
11+
12+
config: Required<GridConfig> = {
13+
color: new THREE.Color(0xbbbbbb),
14+
size1: 1,
15+
size2: 10,
16+
distance: 500,
17+
};
18+
19+
/** {@link Component.enabled} */
20+
enabled = true;
21+
22+
create(world: World) {
23+
if (this.list.has(world.uuid)) {
24+
throw new Error("This world already has a grid!");
25+
}
26+
const grid = new SimpleGrid(this.components, world, this.config);
27+
this.list.set(world.uuid, grid);
28+
world.onDisposed.add(() => {
29+
this.delete(world);
30+
});
31+
}
32+
33+
delete(world: World) {
34+
const grid = this.list.get(world.uuid);
35+
if (grid) {
36+
grid.dispose();
37+
}
38+
this.list.delete(world.uuid);
39+
}
40+
41+
dispose() {
42+
for (const [_id, grid] of this.list) {
43+
grid.dispose();
44+
}
45+
this.list.clear();
46+
this.onDisposed.trigger();
47+
}
48+
}

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

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

temp/core/SimpleGrid/index.ts renamed to packages/components/src/core/Grids/src/simple-grid.ts

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
11
import * as THREE from "three";
2-
import { Component, Disposable, Hideable, Event } from "../../base-types";
3-
import { Disposer } from "../Disposer";
4-
import { Components } from "../Components";
5-
import { SimpleCamera } from "../SimpleCamera";
6-
import { ToolComponent } from "../ToolsComponent";
2+
import { Component, Hideable, Event, World } from "../../Types";
3+
import { Components } from "../../Components";
4+
import { Disposer } from "../../Disposer";
5+
import { SimpleCamera } from "../../Worlds";
6+
7+
export interface GridConfig {
8+
color: THREE.Color;
9+
size1: number;
10+
size2: number;
11+
distance: number;
12+
}
713

814
/**
915
* An infinite grid. Created by
1016
* [fyrestar](https://github.com/Fyrestar/THREE.InfiniteGridHelper)
1117
* and translated to typescript by
1218
* [dkaraush](https://github.com/dkaraush/THREE.InfiniteGridHelper/blob/master/InfiniteGridHelper.ts).
1319
*/
14-
export class SimpleGrid
15-
extends Component<THREE.Mesh>
16-
implements Hideable, Disposable
17-
{
18-
static readonly uuid = "d1e814d5-b81c-4452-87a2-f039375e0489" as const;
19-
20+
export class SimpleGrid implements Hideable, Disposable {
2021
/** {@link Disposable.onDisposed} */
21-
readonly onDisposed = new Event<string>();
22+
readonly onDisposed = new Event();
23+
24+
world: World;
2225

23-
/** {@link Component.enabled} */
24-
enabled = true;
26+
components: Components;
2527

2628
/** {@link Hideable.visible} */
2729
get visible() {
@@ -31,7 +33,7 @@ export class SimpleGrid
3133
/** {@link Hideable.visible} */
3234
set visible(visible: boolean) {
3335
if (visible) {
34-
const scene = this.components.scene.get();
36+
const scene = this.world.scene.three;
3537
scene.add(this._grid);
3638
} else {
3739
this._grid.removeFromParent();
@@ -63,19 +65,16 @@ export class SimpleGrid
6365
private readonly _grid: THREE.Mesh;
6466
private _fade = 3;
6567

66-
constructor(
67-
components: Components,
68-
color = new THREE.Color(0xbbbbbb),
69-
size1: number = 1,
70-
size2: number = 10,
71-
distance: number = 500
72-
) {
73-
super(components);
74-
this.components.tools.add(SimpleGrid.uuid, this);
75-
68+
constructor(components: Components, world: World, config: GridConfig) {
7669
// Source: https://github.com/dkaraush/THREE.InfiniteGridHelper/blob/master/InfiniteGridHelper.ts
7770
// Author: Fyrestar https://mevedia.com (https://github.com/Fyrestar/THREE.InfiniteGridHelper)
7871

72+
this.world = world;
73+
74+
const { color, size1, size2, distance } = config;
75+
76+
this.components = components;
77+
7978
const geometry = new THREE.PlaneGeometry(2, 2, 1, 1);
8079

8180
const material = new THREE.ShaderMaterial({
@@ -174,29 +173,36 @@ export class SimpleGrid
174173

175174
this._grid = new THREE.Mesh(geometry, material);
176175
this._grid.frustumCulled = false;
177-
const scene = components.scene.get();
178-
scene.add(this._grid);
176+
world.scene.three.add(this._grid);
179177

180178
this.setupEvents(true);
181179
}
182180

181+
[Symbol.dispose](): void {
182+
throw new Error("Method not implemented.");
183+
}
184+
183185
/** {@link Component.get} */
184186
get() {
185187
return this._grid;
186188
}
187189

188190
/** {@link Disposable.dispose} */
189-
async dispose() {
191+
dispose() {
190192
this.setupEvents(false);
191-
const disposer = this.components.tools.get(Disposer);
193+
const disposer = this.components.get(Disposer);
192194
disposer.destroy(this._grid);
193-
await this.onDisposed.trigger(SimpleGrid.uuid);
195+
this.onDisposed.trigger();
194196
this.onDisposed.reset();
197+
this.world = null as any;
198+
this.components = null as any;
195199
}
196200

197201
private setupEvents(active: boolean) {
198-
const camera = this.components.camera as SimpleCamera;
199-
const controls = camera.controls;
202+
if (!(this.world.camera instanceof SimpleCamera)) {
203+
return;
204+
}
205+
const controls = this.world.camera.controls;
200206
if (active) {
201207
controls.addEventListener("update", this.updateZoom);
202208
} else {
@@ -205,9 +211,9 @@ export class SimpleGrid
205211
}
206212

207213
private updateZoom = () => {
208-
const camera = this.components.camera as SimpleCamera;
209-
this.material.uniforms.uZoom.value = camera.get().zoom;
214+
if (!(this.world.camera instanceof SimpleCamera)) {
215+
return;
216+
}
217+
this.material.uniforms.uZoom.value = this.world.camera.three.zoom;
210218
};
211219
}
212-
213-
ToolComponent.libraryUUIDs.add(SimpleGrid.uuid);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ export * from "./UUID";
44
export * from "./Raycasters";
55
export * from "./Types";
66
export * from "./Worlds";
7+
export * from "./Grids";

‎temp/base-types/base-raycaster.ts‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎temp/base-types/base-renderer.ts‎

Lines changed: 0 additions & 63 deletions
This file was deleted.

0 commit comments

Comments
 (0)