JSFiddle - React, Tailwind, and code Playground

by titansoftime

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 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, terrain;

function init() {
    
    clock = new THREE.Clock();
    
    imageLoader = new THREE.TextureLoader(); 
    
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set(0, 1500, 500);
    
    ambient = new THREE.AmbientLight(0xaaaaaa);    
    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();
    
}

function loadSplatMaterial(ext){

  var blendTexture = imageLoader.load('https://www.titansoftime.com/img/zones/35/stitchmap.png');

  var tex = imageLoader.load('https://www.titansoftime.com/materialmaptextures/stitch_1024.jpg');
  
  tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
  
  tex.anisotropy = 4;
  
  tex.magFilter = THREE.LinearFilter;
  tex.minFilter = THREE.LinearFilter;

  var mat = new THREE.MeshLambertMaterial({
    map: tex
  });

  mat.precision = 'highp';
  //mat.precision = 'mediump';								

  mat.onBeforeCompile = shader => {

    shader.uniforms.texBlendMap = { value: blendTexture };

    shader.uniforms['repeatTile1'] = { value: 3 };
    shader.uniforms['repeatTile2'] = { value: 3 };

    shader.fragmentShader = _SHADERLIB.terrainSplatTexture.tileblend_pars_fragment + "\n" + shader.fragmentShader;

    shader.fragmentShader = shader.fragmentShader.replace('#include...