JSFiddle - React, Tailwind, and code Playground

by lunchie

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.114/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.114/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>',
          'varying vec3 vNormal;',

          'void main() {',

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

            '       vNormal = normal;',
      //    '       gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
          '}'
           ].join( '\n' ),
           fragmentShader: [
             'varying vec3 vNormal;',
             'void main() {',
             '       gl_FragColor = vec4(abs(vNormal), 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 );

}