JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.js"></script>

	<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>

	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

	<script src="https://threejs.org/examples/js/WebGL.js"></script>
	<script src="https://threejs.org/examples/js/utils/SkeletonUtils.js"></script>

JavaScript

// Set mouse and raycaster.
var mixers = [];
var mouse = new THREE.Vector2();
let container, player, stats, clock;
let camera, scene, renderer, model,raycaster,rotationPoint;

const MODELS = [{name:"Soldier"}];


let numLoadedModels = 0;
const LoadedModels = [];
const objects = [];

// Store movements.
var movements = [];
var playerSpeed = 400;


var prevTime = performance.now();





class Player {

    constructor( scene, model ){

        model.scene.traverse( ( object ) => {
					
					// if ( object.isSkinnedMesh ) {
					// 	var skeletonHelper = new THREE.SkeletonHelper( object.skeleton.bones[ 0 ] );
					// 	scene.add( skeletonHelper );	
					// }
				
        } );
        this.moveForward = false;
        this.moveBackward = false;
        this.moveLeft = false;
        this.moveRight = false;
        this.canJump = false;
        this.model = model.scene;
      
        scene.add(this.model);
        this.model.scale.set(20,20,20)
        this.model.position.z = -1;
        this.controls = new THREE.PointerLockControls( this.model, document.body );
        this.direction = new THREE.Vector3();
        this.velocity = new THREE.Vector3();
        scene.add( this.controls.getObject() );
        this.mixer = new THREE.AnimationMixer( model.scene );
		this.animations = new Map();
        for ( let i = 0; i < model.animations.length; ++i  ) {
        let clip = model.animations[ i ];
            let action = this.mixer.clipAction( clip ); 
            action.loop = THREE.LoopOnce;
            action.name = clip.name;
            this.animations.set(action.name, action);

      }


    }


};


init();
animate();

function init() {

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

scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );

// camera

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 45, 150 );




clock = new...