JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/ColladaLoader.js"></script>

CSS

body {
  margin: 0;
}
canvas {
  display: block;
}

JavaScript

var scene, camera, renderer, mixer, clock;

init();
animate();

function init() {

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 30, window.innerWidth/window.innerHeight, 1, 500 );
	camera.position.set( 5, 5, - 15 );
	camera.lookAt( 0, 2.5, 0 );

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	clock = new THREE.Clock();

	var url = "https://cdn.rawgit.com/mrdoob/three.js/45418089bd5633e856384a8c0beefced87143334/examples/models/collada/stormtrooper/stormtrooper.dae";
	var skinnedMesh;

	var loader = new THREE.ColladaLoader();
	loader.load( url, function ( collada ) {

		var animations = collada.animations;
		var root = collada.scene;

		skinnedMesh = root.getObjectByName( 'Stormtrooper' );
		skinnedMesh.material = new THREE.ShaderMaterial( {

			vertexShader: [
				'#include <skinning_pars_vertex>',

				'void main() {',

				'#include <skinbase_vertex>',
				'#include <begin_vertex>',
				'#include <skinning_vertex>',
				'#include <project_vertex>',

				'}'
			].join( '\n' ),

			fragmentShader: [

				'void main() {',
				'	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);',

				'}'
			].join( '\n' ),
			skinning: true
		} );

		mixer = new THREE.AnimationMixer( root );
		var action = mixer.clipAction( animations[ 0 ] ).play();

		scene.add( root );

	});

}

function animate() {

  requestAnimationFrame( animate );

  var delta = clock.getDelta();
  if ( mixer ) mixer.update(delta);
	
  renderer.render( scene, camera );

}