JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/utils/SkeletonUtils.js"></script>
<script>

	function log(txt){
  
  	console.log(txt);
  
  }

</script>

CSS

body {
  font-family:Monospace;
  font-size:13px;
  text-align:center;
  position:relative;
  background-color: #000;
  margin: 0px;
  overflow: hidden;
  position:relative;
}

h4{ color:#ffffff; }

#info {
  position: absolute;
  top: 0px; width: 100%;
  padding: 5px;
}

a {

  color: #f00;
}

.pbtn:hover{
  background:#000;
  opacity:1;
}

.pbtn{
  float:right;
  width:100px;
  height:40px;
  line-height:40px;
  background:#888;
  opacity:0.8;
  border-radius:8px;
  text-align:center;
  margin-right:40px;
  padding:3px;
}

.pbtn a{
  color:#fff;
  text-decoration:none;
  display:block;
  height:100%;
  width:100%;
  font-weight:bold;
}

#animation_container{
  padding-top:20px;
  position:absolute;
  right:0px;
  top:50%;
  margin-top:-250px;
  height:500px;
  width:300px;
  background: rgba(0,0,0,0.7);
  border-radius: 10px 0px 0px 10px;
  overflow-y:auto;
}

div#animation_container div{
  height:30px;
  clear:both;
}

div#animation_container button{
  width:90%;
  padding: 5px 20px;
}

JavaScript

var container, stats;

var camera, scene, renderer;

var mesh, light, ambient, meshMaterial;

var mouseX = 0, mouseY = 0;

var floor, dz = 0, dstep = -10, playback = false;

var meshList = [];

var clock = new THREE.Clock();

var texLoader = new THREE.TextureLoader();

var controls;

function init() {

  camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.position.set( 0, 10, 50 );

  scene = new THREE.Scene();
  
  scene.matrixAutoUpdate = false;
  
  scene.fog = new THREE.FogExp2( 0xfff4e5, 0.0003 );

  ambient = new THREE.AmbientLight(0x7f7f7f);
  scene.add(ambient);

  light = new THREE.DirectionalLight( 0xffffff, 1.0 );
  light.position.set( 0, 1, 1 ).normalize();
  scene.add( light );

  var planeSimple = new THREE.PlaneGeometry( 200, 300 );
  var planeTesselated = new THREE.PlaneGeometry( 100, 300, 25, 40 );
  var matWire = new THREE.MeshBasicMaterial( { color: 0x110000, wireframe: true, wireframeLinewidth: 2 } );
  var matSolid = new THREE.MeshBasicMaterial( { color: 0xffb23f } );

  floor = new THREE.Mesh( planeSimple, matSolid );
  floor.position.y = -10;
  floor.rotation.x = - Math.PI / 2;
  floor.scale.set( 25, 25, 25 );
  scene.add( floor );

  floor = new THREE.Mesh( planeTesselated, matWire );
  floor.rotation.x = - Math.PI / 2;
  floor.scale.set( 25, 25, 25 );
  scene.add( floor );

  renderer = new THREE.WebGLRenderer( { clearColor: 0xffffff, clearAlpha: 1, antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setClearColor( scene.fog.color, 1 );
  renderer.sortObjects = false;

  document.body.appendChild( renderer.domElement );

  controls = new THREE.OrbitControls(camera,renderer.domElement);

  var loader = new THREE.GLTFLoader().setPath( 'https://www.titansoftime.com/models/' );

  var file = '116.glb';

  loader.load(file, function ( gltf ) {

    gltf.scene.traverse( function ( child ) {

      if ( child.type == 'SkinnedMesh' ) { 
      
        var...