JSFiddle - React, Tailwind, and code Playground

by Morgan Gilroy

HTML

<script src="https://rawgit.com/josephg/noisejs/master/perlin.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/shaders/CopyShader.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/shaders/SSAOShader.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/EffectComposer.js"></script>
<script src="http://threejs.org/examples/js/controls/FirstPersonControls.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="http://threejs.org/examples/js/math/Lut.js"></script>
<script src="http://threejs.org/examples/js/Detector.js"></script>
<script src="http://threejs.org/examples/js/Detector.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/RenderPass.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/MaskPass.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/ShaderPass.js"></script>
<body>
    <div id="container2d"></div>
    <div id="container3d"></div>
    <div id="footer">
        <div class="c">camera: <span class="h">Move mouse to look, click to fly.</span></div>
        <div class="c">Full: <span class="h">1</span></div>
        <div class="c">Only SSAO: <span class="h">3</span></div>
        <div class="c">No SSAO: <span class="h">3</span></div>
        <div class="c">Input: <span class="h" id="state-msg"></span></div>
        </div>
</body>

CSS

body {
    color: #61443e;
    font-family:Monospace;
    font-size:13px;
    text-align:center;
    background-color: #bfd1e5;
    margin: 0px;
    overflow: hidden;
}
#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 5px;
}
a {
    color: #a06851;
}
#container2d {
    float: right;
    position: absolute;
    background-color: #000000;
    right: 0;
}
#footer {
    width: 100%;
    margin: 2em auto;
    text-align: center;
    position: absolute;
    bottom: 0
}
.h {
    color: skyblue
}
.c {
    display: inline;
    margin-left: 1em
}

JavaScript

// Scale of the noise used
var noiseScale = 200;
// Levels of factal noise
var perlinCloudOctaves = 8;
// Octave persistance
var perlinCloudPersistence = 0.5;
// Cloud distort factor
var perlinCloudDistortFactor = 2;

var seed = Math.floor(Math.random() * 10000),
    miniMapWidth = 128,
    miniMapHeight = 128,
    seaLevel = -0.25,
    worldWidth = 512,
    worldDepth = 512,
    meshScale = 25,
    worldHeight = 1024,
    worldHalfWidth = worldWidth / 2,
    worldHalfDepth = worldDepth / 2,
    meshLod = 1, //must be power of 2, must be >= 1, higher numbers = lower poly count
    sunDistance = 9000,
    shadow = false,
    useNormalMap = false;

//normalise the lut entry to 0-1
var sll = (seaLevel + 1) / 2;
// Colours to blend between
var lutColors = [
    [0.0, '0x000099'], //dark water
    [sll - 0.15, '0x0066FF'], //dark water
    [sll - 0.01, '0x33CCFF'], //water
    [sll - 0.005, '0x85E0FF'], //seaLevel sand
    [sll - 0.001, '0xFFFF99'], //seaLevel sand
    [sll, '0xFFFF99'], //sand
    [sll + 0.05, '0x009900'], //grass
    [sll + 0.1, '0x005C00'], //grass
    [sll + 0.15, '0x2e5c00'], //grass
    [0.7, '0xA2A2A2'], //grey
    [0.9, '0xFFFFFF'], //white
    [1.0, '0xFFFFFF'] //white
    ];

// Steap slopes are tinted this colour
var cliffColor = new THREE.Color(0x9F9F7C);
var MARGIN, SCREEN_WIDTH, SCREEN_HEIGHT, MARGIN, SCALE;

var container2d, container3d, container, stats;
var controls, mesh, sun, directionalLight, ambientLight, pintLight;
var lut;
var camera, scene, renderer;
var group;
var material, normalMap, specMap, depthMaterial, depthTarget, texture, composer;
var effectSSAO, renderEffectSSAO = true,
    renderMaterials = true;

var clock = new THREE.Clock();
// Store the height data
var heightData;
// Start/End time to prevent infinite loops
var startTime = (new Date).getTime();
var endTime = startTime + 5000;
var noise = this.noise;
noise.seed(seed);


$(document).ready(function(){
	init();
	animate();
});

// Util - Clamp numbers between...