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

var mouse = new THREE.Vector2();
let container, player, stats, clock;
let camera, scene, renderer, model,raycaster,rotationPoint;

const MODELS = [{ name: "RobotExpressive"},{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.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);

      }


    }

    playIdle(){
        const animation = this.animations.get( 'soldier_idle' );
		animation.play();
    }
    playLeft(){
        const animation = this.animations.get( 'soldier_left' );
		animation.play();
    }
    playRight(){
        const animation = this.animations.get( 'soldier_right' );
		animation.play();
    }
    playForward(){
        const animation = this.animations.get( 'soldier_forward' );
		animation.play();
    }
 ...