JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script>
/**
 * @author jbouny / https://github.com/jbouny
 *
 * Work based on :
 * @author Slayvin / http://slayvin.net : Flat mirror for three.js
 * @author Stemkoski / http://www.adelphi.edu/~stemkoski : An implementation of water shader based on the flat mirror
 * @author Jonas Wagner / http://29a.ch/ && http://29a.ch/slides/2012/webglwater/ : Water shader explanations in WebGL
 */

THREE.Water = function ( geometry, options ) {

	THREE.Mesh.call( this, geometry );

	var scope = this;

	options = options || {};

	var textureWidth = options.textureWidth !== undefined ? options.textureWidth : 512;
	var textureHeight = options.textureHeight !== undefined ? options.textureHeight : 512;

	var clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
	var alpha = options.alpha !== undefined ? options.alpha : 1.0;
	var time = options.time !== undefined ? options.time : 0.0;
	var normalSampler = options.waterNormals !== undefined ? options.waterNormals : null;
	var sunDirection = options.sunDirection !== undefined ? options.sunDirection : new THREE.Vector3( 0.70707, 0.70707, 0.0 );
	var sunColor = new THREE.Color( options.sunColor !== undefined ? options.sunColor : 0xffffff );
	var waterColor = new THREE.Color( options.waterColor !== undefined ? options.waterColor : 0x7F7F7F );
	var eye = options.eye !== undefined ? options.eye : new THREE.Vector3( 0, 0, 0 );
	var distortionScale = options.distortionScale !== undefined ? options.distortionScale : 20.0;
	var side = options.side !== undefined ? options.side : THREE.FrontSide;
	var fog = options.fog !== undefined ? options.fog : false;

	//

	var mirrorPlane = new THREE.Plane();
	var normal = new THREE.Vector3();
	var mirrorWorldPosition = new THREE.Vector3();
	var cameraWorldPosition = new THREE.Vector3();
	var rotationMatrix =...

CSS

html, body{
  margin:0;
  padding:0;
}

JavaScript

var scene, camera, renderer, ambient, directional, controls, stats, clock, imageLoader;

var terrain, water;

var zoneSize = 5000;

var spriteDepthWrite = false;

init();
animate();

function init() {
    
  clock = new THREE.Clock();

  imageLoader = new THREE.TextureLoader(); 

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20000 );
  
  camera.position.set(0, 130, 0);

  ambient = new THREE.AmbientLight(0xffffff);    
  scene.add(ambient);

  directional = new THREE.DirectionalLight(0xffffff,1);
  directional.position.set(0,-80000,0);
  scene.add(directional);       

  renderer = new THREE.WebGLRenderer({antialias:true});
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setClearColor( 0x87ceeb, 1 );

  controls = new THREE.OrbitControls( camera, renderer.domElement );    
  
  controls.target.set(0,120,-500);
  controls.update();

  document.body.appendChild( renderer.domElement );

  scene.fog = new THREE.FogExp2(0xdddddd,0.0003);

  loadTerrain();

  loadWater(); 
  
  loadSprite();
    
}

function loadTerrain(){

  var geo = new THREE.PlaneBufferGeometry( zoneSize, zoneSize, 128, 128 );
  
  var tex = imageLoader.load('https://www.titansoftime.com/materialmaptextures/11_1024.jpg');
  
	tex.wrapS = THREE.RepeatWrapping;
	tex.wrapT = THREE.RepeatWrapping;
  
  tex.repeat.set(16,16);
  
  tex.anisotropy = 4;
  
  var mat = new THREE.MeshLambertMaterial({map:tex, wireframe:false});

  geo.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));

 	var y=0;

  loadImageMapData('https://www.titansoftime.com/img/zones/69/heightmap.png', function (data){

    var vertices = geo.attributes.position.array;

    for ( var i = 0, j = 0, l = vertices.length; i < l/3; i ++, j += 3 ) {

      y = (data[i][0] + data[i][1] + data[i][2]) / 2;				

      vertices[ j + 1 ] = y;

    }

    terrain = new THREE.Mesh(geo,mat);

    terrain.matrixAutoUpdate = false;
   ...