JSFiddle - React, Tailwind, and code Playground

by Millieyan

HTML

<div id="info">mario</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src='js/MD2Loader.js'></script>
<script src='js/MorphBlendMesh.js'></script>
<script src='js/MD2CharacterComplex.js'></script>
<script src='js/Gyroscope.js'></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

class MD2Wrapper {
	constructor (config, controls, pos, scale = 1) {

		this.md2 = new THREE.MD2CharacterComplex();
		this.md2.scale = scale
		this.md2.controls = controls
		
		this.md2.onLoadComplete = function () {
			// here: 'this' is md2
			
			// cast and receive shadows
			this.enableShadows( true );

			this.setWeapon( 0 );
			this.setSkin( 0 );

			//this.root.position.copy (pos);
			this.root.position.x = pos.x;
			this.root.position.z = pos.z;
			
			// y is automatically set, accoording to scale ...				
			console.log ('y is ' + this.root.position.y)
			
			scene.add( this.root );
						
		}
		this.md2.loadParts( config );
					
	}
}


	var SCREEN_WIDTH = window.innerWidth;
	var SCREEN_HEIGHT = window.innerHeight;

	var container, stats;
	var camera, scene, renderer;

	var marioWrap;
	var light;
	
	var box3, box3Helper;
	
	var cameraControls;
	var clock = new THREE.Clock();

	init();
	animate();

	function init() {

		container = document.createElement( 'div' );
		document.body.appendChild( container );

		// CAMERA

		camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
		camera.position.set( 0, 150, 1300 );

		// SCENE

		scene = new THREE.Scene();
		scene.background = new THREE.Color( 0xffffff );
		scene.fog = new THREE.Fog( 0xffffff, 1000, 4000 );

		scene.add( camera );

		// LIGHTS

		scene.add( new THREE.AmbientLight( 0x222222 ) );

		light = new THREE.DirectionalLight( 0xffffff, 2.25 );
		light.position.set( 200, 450, 500 );

		light.castShadow = true;

		light.shadow.mapSize.width = 1024;
		light.shadow.mapSize.height = 512;

		light.shadow.camera.near = 100;
		light.shadow.camera.far = 1200;

		light.shadow.camera.left = -1000;
		light.shadow.camera.right = 1000;
		light.shadow.camera.top = 350;
		light.shadow.camera.bottom = -350;

		scene.add( light );
		// scene.add( new THREE.CameraHelper( light.shadow.camera ) );


		//  GROUND

		//var gt = new THREE.TextureLoader().load( "grasslight-big.jpg"...