JSFiddle - React, Tailwind, and code Playground

by titansoftime

HTML

<script src="http://www.titansoftime.com/webgl/Three72.full.js"></script>
<script src="http://www.titansoftime.com/webgl/BlendCharacter2.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/DDSLoader.js"></script>

<div id="info">

  <div><a id="melee" href="javascript:void(0);"><b>Melee Attack</b></a></div>

  <div><a id="magic" href="javascript:void(0);"><b>Magic Attack</b></a></div>

  <div><a id="run" href="javascript:void(0);"><b>Run</b></a></div>

  <div><a id="idle" href="javascript:void(0);"><b>Idle</b></a></div>

</div>

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;
var mesh, geoCache={};
var clock, jsLoader, ddsLoader;

init();
animate();

function init() {
    
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 20;
    camera.position.y = 10;
    
    ambient = new THREE.AmbientLight(0xffffff);    
    scene.add(ambient);
    
    directional = new THREE.DirectionalLight(0xffffff,1);
    directional.position.set(1,1,0);
    scene.add(directional);
     
    clock = new THREE.Clock();
    
    jsLoader = new THREE.JSONLoader(true);    
    ddsLoader = new THREE.DDSLoader();
    
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor( 0xffffff, 1 );
    
    document.getElementById('idle').onclick = function(e){
    	play('Idle',true);
    };

    document.getElementById('run').onclick = function(e){
    	play('Run',true);
    };
    
    document.getElementById('melee').onclick = function(e){
    	play('MelleAttack');
    };
    
    document.getElementById('magic').onclick = function(e){
    	play('MagicAttack');
    };    
    
    document.body.appendChild( renderer.domElement );
    
    loadFloor();
    
    loadModel();
    
}

function createModel(json){
    
    var geo, geo2;
    
    if( geoCache[json.name] ){
        
        geo = geoCache[json.name];   
        
    }else{
    
        geo2 = jsLoader.parse(json).geometry;

        var m = new THREE.SkinnedMesh( geo2 );
        m.normalizeSkinWeights();
        geo2 = m.geometry;

        geo = new THREE.BufferGeometry().fromGeometry(geo2);
        geo.bones = geo2.bones;
        geo.animations = geo2.animations;
        
        geoCache[json.name] = geo;
        
    }
        
    var tex = ddsLoader.load('http://www.titansoftime.com/utils.php?task=getTexture&id=16');
    
    var mat = new...