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/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, GLTFLoader;
var terrain, water, geometries=[], loaded=0, levels=2, splatMaterials=[], meshList=[];

var zoneSize = 5000;

var detail = 512;

var anisotropy = 2;

var loadSplat = true;

var charCanAnimate = true;

init();
animate();

function init() {
    
    clock = new THREE.Clock();
    
    imageLoader = new THREE.TextureLoader(); 
    
    GLTFLoader = new THREE.GLTFLoader().setPath( 'https://www.titansoftime.com/models/' );
    
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000000 );
    camera.position.set(0, 10, -20);
    
    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 );
    
    //anisotropy = renderer.capabilities.getMaxAnisotropy();
    
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    
    document.body.appendChild( renderer.domElement );
    
    loadTerrain();
    
    loadWater();
    
    loadMesh();
    
}

function loadSplatMaterial(ext){

  ext = ext || '';

  var maps = [
  	{id: 11, repeat: 150, ext: 'jpg', name: 'Base'},
    {id: 13, repeat: 100, ext: 'jpg', name: 'Tile1'},
    {id: 10, repeat: 100, ext: 'jpg', name: 'Tile2'},
    {id: 28, repeat: 32, ext: 'jpg', name: 'Tile3'}    
  ];

  if( maps.length ){

    var blendTexture = imageLoader.load('https://www.titansoftime.com/img/zones/70/splatmap_'+ext+'.png');

    var tex;

    var diffuse = [];

    for( var i=0,len=maps.length; i<len; i++ ){

      tex =...