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/dev/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>

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

init();
animate();

function init() {
    
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set(500, 50, 0);
    //camera.lookAt(scene.position);    
    //camera.lookAt(new THREE.Vector3(200,50,0));
    
    ambient = new THREE.AmbientLight(0xffffff);    
    scene.add(ambient);
    
    scene.fog = new THREE.FogExp2(0x333333,0.002);
    
    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,precision:'mediump'});
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor( 0x87ceeb, 1 );
    
    controls = new THREE.OrbitControls( camera, renderer.domElement );   
    controls.target.set(0,50,0);
    
    document.body.appendChild( renderer.domElement );
    
    loadFloor();

   // loadGeometry(53);
    
}

function loadMaterial(id){
    
	//var map = ddsLoader.load('https://www.titansoftime.com/textures/'+id+'_1024.dds');
  var map = tex = imageLoader.load('https://www.titansoftime.com/textures/'+id+'_1024.png');
    
	return new THREE.MeshPhongMaterial({map:map,side:THREE.DoubleSide,alphaTest:0.5,fog:true}); 

}

function loadGeometry(id){	

		jsLoader.load('https://www.titansoftime.com/models/'+id+'.js',function(geo){
  
			var bgeo = new THREE.BufferGeometry().fromGeometry(geo);

			geo.dispose();
        
     ...