feat: infinite grid

src/logic/managers/GridsManager.ts

@@ -0,0 +1,52 @@
+import * as THREE from 'three';
+
+export class GridManager {
+  scene: THREE.Scene;
+  grids: {
+    object: THREE.GridHelper;
+    position: THREE.Vector2;
+  }[] = [];
+  farPlane = 500;
+  size = 3000;
+  divisions = 160;
+
+  constructor(scene: THREE.Scene) {
+    this.scene = scene;
+  }
+
+  update(cameraPosition: THREE.Vector3) {
+    const currentGridX = Math.floor(cameraPosition.x / this.size);
+    const currentGridY = Math.floor(cameraPosition.z / this.size);
+
+    for (let x = currentGridX - 1; x <= currentGridX + 1; x++) {
+        for (let y = currentGridY - 1; y <= currentGridY + 1; y++) {
+            const position = new THREE.Vector2(x, y);
+            if (!this.grids.find(grid => grid.position.x === x && grid.position.y === y)) {
+                this.createGrid(position);
+            }
+        }
+    }
+
+    this.grids.forEach((grid, index) => {
+        if (Math.abs(grid.position.x - currentGridX) > 1 || Math.abs(grid.position.y - currentGridY) > 1) {
+            this.removeGrid(index);
+        }
+    });
+  }
+
+  private createGrid(position: THREE.Vector2) {
+    const gridHelper = new THREE.GridHelper(this.size, this.divisions);
+    gridHelper.position.set(position.x * this.size, 0, position.y * this.size);
+    gridHelper.material.color.setHex(0x404040);
+    gridHelper.material.opacity = 0.5;
+    gridHelper.material.transparent = true;
+
+    this.scene.add(gridHelper);
+    this.grids.push({ object: gridHelper, position });
+  }
+
+  private removeGrid(grid: number) {
+    this.scene.remove(this.grids[grid].object);
+    this.grids.splice(grid, 1);
+  }
+}

src/renderer.ts

@@ -4,6 +4,7 @@ import { TransformControls } from 'three/addons/controls/TransformControls.js';
 import { Sandbox } from '@/logic/physics/sandbox';
 import { selectManager } from '@/ui';
 import { ViewportGizmo } from 'three-viewport-gizmo';
+import { GridManager } from '@/logic/managers/GridsManager';
 
 let camera: THREE.PerspectiveCamera;
 let renderer: THREE.WebGLRenderer;
@@ -42,19 +43,11 @@ function init() {
   sandbox = new Sandbox(scene);
   sandbox.updateVisuals(camera.position);
 
+  const gridManager = new GridManager(scene);
+
   const light = new THREE.AmbientLight(0xffffff, 1);
   scene.add(light);
 
-  const size = 3000;
-  const divisions = 160;
-  const gridHelper = new THREE.GridHelper(size, divisions);
-  gridHelper.material.color.setHex(0x404040);
-  gridHelper.material.opacity = 0.6;
-  gridHelper.material.transparent = true;
-
-  const grid = gridHelper.clone();
-  scene.add(grid);
-
   camera.position.set(40, 40, 40);
   camera.lookAt(0, 0, 0);
 
@@ -91,9 +84,10 @@ function init() {
     lastTime = time;
 
     orbitControls.update();
-    renderer.render(scene, camera);
-    gizmo.render();
     sandbox.update(deltaTime);
+    gridManager.update(camera.position);
+    gizmo.render();
+    renderer.render(scene, camera);
   }
 
   animate(0);