JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.142/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.142/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var scene, camera, renderer;

scene = new THREE.Scene();
scene.background = new THREE.Color(0x00aaff);

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 20, 20);

let simplex = new SimplexNoise();

const light = new THREE.DirectionalLight(0xffffff, 1.3);
light.position.set(0, 1, 0);
scene.add(light);

renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const clock = new THREE.Clock();

const controls = new THREE.OrbitControls(camera, renderer.domElement);

const size = 32;
const flatShading = false;

const geometry = new THREE.PlaneGeometry(size, size, size, size).toNonIndexed();

//Add code here

const v1 = new THREE.Vector3();
const v2 = new THREE.Vector3();
const v3 = new THREE.Vector3();

const uv = new THREE.Vector2();

for (let i = 0; i < geometry.attributes.position.count; i++) {
  let an = v2.fromBufferAttribute(geometry.attributes.uv, i);
  let v = layeredNoise(v2.x, v2.y, 8);
  let z = map(v, 0, 1, -10, 10);
  z *= z < 0 ? 0 : z > 2.5 ? 1.3 : 1;
  geometry.attributes.position.setZ(i, z);
}

const colors = [];

const c1 = new THREE.Color(0xffffff);
const c2 = new THREE.Color(0x44ccff);
const c3 = new THREE.Color(0x228800);
const c4 = new THREE.Color(0xeecc44);

for (let i = 0; i < geometry.attributes.position.count; i += 3) {
  v1.fromBufferAttribute(geometry.attributes.position, i + 0);
  v2.fromBufferAttribute(geometry.attributes.position, i + 1);
  v3.fromBufferAttribute(geometry.attributes.position, i + 2);

  const max = Math.max(v1.z, Math.max(v2.z, v3.z));

  let color = c1;

  if (max <= 0) {

    color = c2;
  } else if (max <= 1.5) {
    color = c3;
  } else if (max <= 3.5) {
    color = c4;
  }

  colors.push(color.r, color.g, color.b);
  colors.push(color.r, color.g, color.b);
  colors.push(color.r, color.g, color.b);

}

geometry.setAttribute('color', new...