JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/DDSLoader.js"></script>

<div id="out"></div>

JavaScript

var scene, camera, renderer;

init();
animate();

function init() {
    
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.y = 500;
    camera.lookAt(new THREE.Vector3(0,0,0));
    
    var ambient = new THREE.AmbientLight(0xffffff);    
    scene.add(ambient);    
    
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor( 0xffffff, 1 );
    
    document.body.appendChild( renderer.domElement );
    
    loadFloor();
    
}

function loadFloor(){
    
    var materials = [];
    
    var ddsLoader = new THREE.DDSLoader();
    
	var tex1 = ddsLoader.load('http://206.225.83.48/utils.php?task=getWorldTexture&id=14');    
    var tex2 = ddsLoader.load('http://206.225.83.48/utils.php?task=getWorldTexture&id=11'); 
    
    materials.push(new THREE.MeshBasicMaterial({map:tex1}) );
    materials.push(new THREE.MeshBasicMaterial({map:tex2}) );    
 
    var geo = new THREE.PlaneGeometry(500,500,12,12);
    
    console.log(renderer.info);
    
    for( var i = 0, len = geo.faces.length; i < len; i++ ){
        
        geo.faces[i].materialIndex = i < 72 || i > 119 ? 1 : 0;
        
    }
    
    geo.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
    
    geo.sortFacesByMaterialIndex(); // happy performance, sad textures

    var terrain = new THREE.Mesh( geo, new THREE.MeshFaceMaterial(materials) );
    
    scene.add(terrain);
    
}

function animate() {
    
    requestAnimationFrame( animate );
    
    document.getElementById('out').innerHTML = renderer.info.render.calls;
    
    renderer.render( scene, camera );
    
}