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/loaders/DDSLoader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/utils/BufferGeometryUtils.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/utils/SkeletonUtils.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>

CSS

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

#info{
 position:absolute;
}

#info div{
  
  float:right;
  width:100px;
  height:40px;
  line-height:40px;
  background:#888;
  opacity:0.8;
  border-radius:8px;
  text-align:center;
  margin-right:20px;
  padding:3px;  
  
}

#info div a{
  
  color:#fff;
  text-decoration:none;
  display:block;
  height:100%;
  width:100%;
  
}

JavaScript

var scene, camera, renderer, ambient, directional, controls, stats, clock, imageLoader;
var terrain, water, ball, group;

var downVector = new THREE.Vector3(0,-1,0);

var originVector = new THREE.Vector3();

var emptyVector = new THREE.Vector3();

var intersectRay = new THREE.Ray();

var intersectPlane = new THREE.Plane();

var zoneSize = 5000;

var ball_offset = 500; // bad
//var ball_offset = 1000; // good

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, 10000000 );
    camera.position.set(0, 2000, -2000);
    
    ambient = new THREE.AmbientLight(0xffffff);    
    scene.add(ambient);
    
    directional = new THREE.DirectionalLight(0xffffff,1);
    directional.position.set(1,1,0);
    scene.add(directional);    
    
    stats = new Stats();
		stats.showPanel( 1 );
		document.body.appendChild( stats.dom );    
    
    renderer = new THREE.WebGLRenderer({antialias:false});
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor( 0x87ceeb, 1 );
    
    controls = new THREE.OrbitControls( camera, renderer.domElement );    
    
    document.body.appendChild( renderer.domElement );
    
    loadTerrain();
    
    loadWater();
    
}

function intersectTerrain(pos){

	var y = 0;

  var cpos = pos.clone();

	var idx = getMapIndexFromPosition(cpos.x,cpos.z);

  var intersectVectors = getIndexedVerticesFromMapIndex(idx);

  intersectPlane.setFromCoplanarPoints(intersectVectors[0], intersectVectors[1], intersectVectors[2]);	
  
  return intersectPlane.distanceToPoint( pos );

}

function getMapIndexFromPosition(x,z){

  var _x = Math.ceil((x / (zoneSize / 128)) + (128 / 2));
  var _y = Math.ceil((z / (zoneSize / 128)) + (128 / 2));

  _x = Math.max(1,_x);
  _y = Math.max(1,_y);

  var idx = _x + ( (_y-1) * 128) - 1;

  return...