feat: implement grid

ThatOpen · Apr 20, 2024 · bf4a18c · bf4a18c
1 parent 6506e94
commit bf4a18c
Show file tree

Hide file tree

Showing 13 changed files with 152 additions and 568 deletions.
diff --git a/packages/components/src/core/Grids/example.html b/packages/components/src/core/Grids/example.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="../../../resources/styles.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="icon" type="image/x-icon" href="../../../resources/favicon.ico">
+  <title>Simple 2D Scene</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    .full-screen {
+      width: 100vw;
+      height: 100vh;
+      position: relative;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="full-screen" id="container"></div>
+  <script type="module" src="./example.ts"></script>
+</body>
+
+</html>
diff --git a/packages/components/src/core/Grids/example.ts b/packages/components/src/core/Grids/example.ts
@@ -0,0 +1,27 @@
+import * as THREE from "three";
+import * as OBC from "../..";
+
+const container = document.getElementById("container")!;
+
+const components = new OBC.Components();
+
+const worlds = components.get(OBC.Worlds);
+const world = new OBC.SimpleWorld<
+  OBC.SimpleScene,
+  OBC.SimpleCamera,
+  OBC.SimpleRenderer
+>(components);
+
+world.scene = new OBC.SimpleScene(components);
+world.renderer = new OBC.SimpleRenderer(components, container);
+world.camera = new OBC.SimpleCamera(components);
+
+worlds.add(world);
+
+components.init();
+
+const cube = new THREE.Mesh(new THREE.BoxGeometry());
+world.scene.three.add(cube);
+
+const grids = components.get(OBC.Grids);
+grids.create(world);
diff --git a/packages/components/src/core/Grids/index.ts b/packages/components/src/core/Grids/index.ts
@@ -0,0 +1,48 @@
+import * as THREE from "three";
+import { Component, Disposable, World, Event } from "../Types";
+import { GridConfig, SimpleGrid } from "./src";
+
+export class Grids extends Component implements Disposable {
+  static readonly uuid = "d1e814d5-b81c-4452-87a2-f039375e0489" as const;
+
+  list = new Map<string, SimpleGrid>();
+
+  onDisposed = new Event();
+
+  config: Required<GridConfig> = {
+    color: new THREE.Color(0xbbbbbb),
+    size1: 1,
+    size2: 10,
+    distance: 500,
+  };
+
+  /** {@link Component.enabled} */
+  enabled = true;
+
+  create(world: World) {
+    if (this.list.has(world.uuid)) {
+      throw new Error("This world already has a grid!");
+    }
+    const grid = new SimpleGrid(this.components, world, this.config);
+    this.list.set(world.uuid, grid);
+    world.onDisposed.add(() => {
+      this.delete(world);
+    });
+  }
+
+  delete(world: World) {
+    const grid = this.list.get(world.uuid);
+    if (grid) {
+      grid.dispose();
+    }
+    this.list.delete(world.uuid);
+  }
+
+  dispose() {
+    for (const [_id, grid] of this.list) {
+      grid.dispose();
+    }
+    this.list.clear();
+    this.onDisposed.trigger();
+  }
+}
diff --git a/packages/components/src/core/Grids/src/index.ts b/packages/components/src/core/Grids/src/index.ts
@@ -0,0 +1 @@
+export * from "./simple-grid";
diff --git a/temp/core/SimpleGrid/index.ts → ...ponents/src/core/Grids/src/simple-grid.ts b/temp/core/SimpleGrid/index.ts → ...ponents/src/core/Grids/src/simple-grid.ts
@@ -1,27 +1,29 @@
 import * as THREE from "three";
-import { Component, Disposable, Hideable, Event } from "../../base-types";
-import { Disposer } from "../Disposer";
-import { Components } from "../Components";
-import { SimpleCamera } from "../SimpleCamera";
-import { ToolComponent } from "../ToolsComponent";
+import { Component, Hideable, Event, World } from "../../Types";
+import { Components } from "../../Components";
+import { Disposer } from "../../Disposer";
+import { SimpleCamera } from "../../Worlds";
+
+export interface GridConfig {
+  color: THREE.Color;
+  size1: number;
+  size2: number;
+  distance: number;
+}
 
 /**
  * An infinite grid. Created by
  * [fyrestar](https://github.com/Fyrestar/THREE.InfiniteGridHelper)
  * and translated to typescript by
  * [dkaraush](https://github.com/dkaraush/THREE.InfiniteGridHelper/blob/master/InfiniteGridHelper.ts).
  */
-export class SimpleGrid
-  extends Component<THREE.Mesh>
-  implements Hideable, Disposable
-{
-  static readonly uuid = "d1e814d5-b81c-4452-87a2-f039375e0489" as const;
-
+export class SimpleGrid implements Hideable, Disposable {
   /** {@link Disposable.onDisposed} */
-  readonly onDisposed = new Event<string>();
+  readonly onDisposed = new Event();
+
+  world: World;
 
-  /** {@link Component.enabled} */
-  enabled = true;
+  components: Components;
 
   /** {@link Hideable.visible} */
   get visible() {
@@ -31,7 +33,7 @@ export class SimpleGrid
   /** {@link Hideable.visible} */
   set visible(visible: boolean) {
     if (visible) {
-      const scene = this.components.scene.get();
+      const scene = this.world.scene.three;
       scene.add(this._grid);
     } else {
       this._grid.removeFromParent();
@@ -63,19 +65,16 @@ export class SimpleGrid
   private readonly _grid: THREE.Mesh;
   private _fade = 3;
 
-  constructor(
-    components: Components,
-    color = new THREE.Color(0xbbbbbb),
-    size1: number = 1,
-    size2: number = 10,
-    distance: number = 500
-  ) {
-    super(components);
-    this.components.tools.add(SimpleGrid.uuid, this);
-
+  constructor(components: Components, world: World, config: GridConfig) {
     // Source: https://github.com/dkaraush/THREE.InfiniteGridHelper/blob/master/InfiniteGridHelper.ts
     // Author: Fyrestar https://mevedia.com (https://github.com/Fyrestar/THREE.InfiniteGridHelper)
 
+    this.world = world;
+
+    const { color, size1, size2, distance } = config;
+
+    this.components = components;
+
     const geometry = new THREE.PlaneGeometry(2, 2, 1, 1);
 
     const material = new THREE.ShaderMaterial({
@@ -174,29 +173,36 @@ export class SimpleGrid
 
     this._grid = new THREE.Mesh(geometry, material);
     this._grid.frustumCulled = false;
-    const scene = components.scene.get();
-    scene.add(this._grid);
+    world.scene.three.add(this._grid);
 
     this.setupEvents(true);
   }
 
+  [Symbol.dispose](): void {
+    throw new Error("Method not implemented.");
+  }
+
   /** {@link Component.get} */
   get() {
     return this._grid;
   }
 
   /** {@link Disposable.dispose} */
-  async dispose() {
+  dispose() {
     this.setupEvents(false);
-    const disposer = this.components.tools.get(Disposer);
+    const disposer = this.components.get(Disposer);
     disposer.destroy(this._grid);
-    await this.onDisposed.trigger(SimpleGrid.uuid);
+    this.onDisposed.trigger();
     this.onDisposed.reset();
+    this.world = null as any;
+    this.components = null as any;
   }
 
   private setupEvents(active: boolean) {
-    const camera = this.components.camera as SimpleCamera;
-    const controls = camera.controls;
+    if (!(this.world.camera instanceof SimpleCamera)) {
+      return;
+    }
+    const controls = this.world.camera.controls;
     if (active) {
       controls.addEventListener("update", this.updateZoom);
     } else {
@@ -205,9 +211,9 @@ export class SimpleGrid
   }
 
   private updateZoom = () => {
-    const camera = this.components.camera as SimpleCamera;
-    this.material.uniforms.uZoom.value = camera.get().zoom;
+    if (!(this.world.camera instanceof SimpleCamera)) {
+      return;
+    }
+    this.material.uniforms.uZoom.value = this.world.camera.three.zoom;
   };
 }
-
-ToolComponent.libraryUUIDs.add(SimpleGrid.uuid);
diff --git a/packages/components/src/core/index.ts b/packages/components/src/core/index.ts
@@ -4,3 +4,4 @@ export * from "./UUID";
 export * from "./Raycasters";
 export * from "./Types";
 export * from "./Worlds";
+export * from "./Grids";
diff --git a/temp/base-types/base-raycaster.ts b/temp/base-types/base-raycaster.ts
diff --git a/temp/base-types/base-renderer.ts b/temp/base-types/base-renderer.ts