Add throttling to terrain update

package.json

@@ -15,6 +15,7 @@
     "dat.gui": "^0.7.7",
     "debounce": "^1.2.0",
     "jest": "^26.4.2",
+    "lodash": "^4.17.20",
     "three": "^0.121.1",
     "tweakpane": "^1.5.5",
     "vue": "^2.6.11",

src/components/ThreeViewer.vue

@@ -35,6 +35,8 @@ import {
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { SSAOPass } from 'three/examples/jsm/postprocessing/SSAOPass.js';
+import debounce from 'debounce';
+import throttle from 'lodash/throttle';
 
 const Tweakpane = require('tweakpane');
 
@@ -565,6 +567,14 @@ export default {
       this.needsRerender = 1;
 
     },
+    updateTerrain: throttle( function() {
+
+      const transform = this.tiles.root.cached.transform;
+      const sceneTransform = new Vector2( transform.elements[12], transform.elements[13] );
+      
+      this.terrainTiles.update( sceneTransform, this.camera );
+      
+    }, 200 ),
     renderScene() {
 
       requestAnimationFrame( this.renderScene );
@@ -597,11 +607,8 @@ export default {
         this.tiles.update();
 
         if ( this.tiles.root ) {
-
-          const transform = this.tiles.root.cached.transform;
-          const sceneTransform = new Vector2( transform.elements[12], transform.elements[13] );
   
-          this.terrainTiles.update( sceneTransform, this.camera );
+          this.updateTerrain();
           
         }
   

src/terrain-tiles/base/TilesRenderer.js

@@ -49,6 +49,8 @@ export class TilesRenderer {
 
 			if ( ! this.activeTiles.includes( ti.getId() ) ) {
 
+				this.activeTiles.push( ti.getId() );
+
 				this.createTile( ti, sceneCenter );
 
 			}
@@ -103,8 +105,6 @@ export class TilesRenderer {
 		mesh.position.y = scenePosition.y;
 		mesh.updateMatrix();
 
-		this.activeTiles.push( tile.getId() );
-
 	}
 
 }