JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<canvas id="renderCanvas"></canvas>

CSS

html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }

JavaScript

function erodeTerrain(groundMesh,smoothing,yThreshold,xPressure,zPressure){

	var positions = groundMesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
  var indices = groundMesh.getIndices();
	var normals = [];
      
  console.log("DONE",positions);
  
  var last = 0;
  var next = 0;
  var lastX = 0;
  var nextX = 0;
  var lastZ = 0;
  var nextZ = 0;
  
   for(var p=0;p<positions.length;p+=3){
    
    	if(p && p < positions.length-3){

        last = positions[(p-3)+1];
        next = positions[(p-+3)+1];
				
        if(smoothing){
        
        	positions[p+1] = (last+next+positions[p+1])/3;
        
        }
        
        if(positions[p+1] > yThreshold){
        
        	positions[p] += (positions[p+1]-yThreshold)*xPressure;
          positions[p+2] += (positions[p+1]-yThreshold)*zPressure;
        
        }
        
      }
  
  	}
  
  BABYLON.VertexData.ComputeNormals(positions, indices, normals);
  
  groundMesh.setVerticesData(BABYLON.VertexBuffer.NormalKind,normals);
  groundMesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions);

}

const canvas = document.getElementById("renderCanvas"); // Get the canvas element
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
const createScene = function () {
  // Creates a basic Babylon Scene object
const scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0,0,0);
  // Creates and positions a free camera
const camera = new BABYLON.FreeCamera("camera1", 
                                        new BABYLON.Vector3(20, 8, -5), scene);
  // Targets the camera to scene origin
  // This attaches the camera to the canvas
  camera.attachControl(canvas, true);
  // Creates a light, aiming 0,1,0 - to the sky
  //const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
  
  
  
  
  var light = new BABYLON.PointLight("PointLight", new BABYLON.Vector3(50, 15, 50), scene);
  light.range = 920;
  light.intensity =...