JSFiddle - React, Tailwind, and code Playground

by realhunts

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://www.titansoftime.com/webgl/OrbitalControlsOriginal.js"></script>
<script src="https://www.titansoftime.com/webgl/Stats.min.js"></script>

        <script type="x-shader/x-vertex" id="grassVertexShader">

        precision mediump float;
        uniform float globalTime;
        uniform float magnitude;
        uniform vec2 uvScale;
        uniform vec3 lightPos;
        varying vec2 vUv;
        varying vec3 vNormal;
        varying vec4 vLightPos;
        varying vec4 vecPos;
        attribute float height;

        float random (in vec2 st) {
            return fract(sin(dot(st.xy,
                                vec2(12.9898,78.233)))
                * 43758.5453123);
        }


        // 2D Noise based on Morgan McGuire @morgan3d
        // https://www.shadertoy.com/view/4dS3Wd
        float noise (in vec2 st) {
            vec2 i = floor(st);
            vec2 f = fract(st);

            // Four corners in 2D of a tile
            float a = random(i);
            float b = random(i + vec2(1.0, 0.0));
            float c = random(i + vec2(0.0, 1.0));
            float d = random(i + vec2(1.0, 1.0));

            // Smooth Interpolation

            // Cubic Hermine Curve.  Same as SmoothStep()
            vec2 u = f*f*(3.0-2.0*f);
            // u = smoothstep(0.,1.,f);

            // Mix 4 coorners porcentages
            return mix(a, b, u.x) +
            (c - a)* u.y * (1.0 - u.x) +
            (d - b) * u.x * u.y;
        }


        void main() {
            vNormal =  (modelMatrix * vec4(normal, 0.0)).xyz;
            vec3 pos = position;
            // animate only the pixels that are upon the ground
            if (pos.y > 1.0 + height ) {
                float noised = noise(pos.xy);
                pos.y += sin(globalTime * magnitude * noised);
    ...

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, grass;
var meshes=[], geoCache={}, matCache={}, loadingQueue={};
var clock, jsLoader, ddsLoader, imageLoader;
var zoneSize = 500;

init();
animate();

function init() {
    
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set(50, 10, 0);
    //camera.lookAt(scene.position);    
    //camera.lookAt(new THREE.Vector3(200,50,0));
    
    ambient = new THREE.AmbientLight(0xffffff);    
    scene.add(ambient);
    
    stats = new Stats();
		stats.showPanel( 1 );
		document.body.appendChild( stats.dom );    
    
    directional = new THREE.DirectionalLight(0xffffff,1);
    directional.position.set(1,1,0);
    scene.add(directional);
     
    clock = new THREE.Clock();
    
    jsLoader = new THREE.JSONLoader();    
    ddsLoader = new THREE.DDSLoader();
    imageLoader = new THREE.TextureLoader();
    
    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,10,0);
    
    document.body.appendChild( renderer.domElement );
    
    loadFloor();

    loadGrass(500);
    
}

function loadGrass(n_planes){

		var geo = loadGeometry(n_planes);
		
		var mat = loadMaterial();
		
		grass = new THREE.Mesh(geo, mat);
		
		//mesh.position.set(0, 200, 0);
		
		grass.matrixAutoUpdate = false;
		
		scene.add(grass);		

}

function loadMaterial(){
    
		var texture = imageLoader.load('https://cdn.glitch.com/b099dace-d22a-45a3-9218-04b3f1c930da%2F580b585b2edbce24c47b26b8.png?1553047165825');
		
		texture.wrapS = THREE.RepeatWrapping;
		texture.anisotropy = 4;		
		
		var uniforms = {
			
			lightPos:   { type: "v3", value: new THREE.Vector3(1,1,0) },
			lightColor: { type: "c", value: new...