JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/deprecated/LegacyJSONLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<style>

CSS

html,body{
  background: #444;
}

JavaScript

//===================================================== canvas
  var renderer = new THREE.WebGLRenderer({ alpha: true, antialiase: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  //===================================================== scene
  var scene = new THREE.Scene();

  //===================================================== camera
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;
  camera.position.y = 1.5;

  //===================================================== lights
  var light = new THREE.DirectionalLight(0xefefff, 3);
  light.position.set(1, 1, 1).normalize();
  scene.add(light);
  var light = new THREE.DirectionalLight(0xffefef, 3);
  light.position.set(-1, -1, -1).normalize();
  scene.add(light);

  //===================================================== resize
  window.addEventListener("resize", function() {
    let width = window.innerWidth;
    let height = window.innerHeight;
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  });
	
	var controls = new THREE.OrbitControls( camera );

  //===================================================== model
  var loader = new THREE.GLTFLoader();
  var loader2 = new THREE.LegacyJSONLoader();
  var mixer;
  var model;
  loader.load("https://raw.githubusercontent.com/baronwatts/models/master/robber.glb", function(gltf) {




    loader2.load("https://raw.githubusercontent.com/baronwatts/models/master/mac.js", function(geometry, materials) {
		
			var skeleton;
		
      gltf.scene.traverse( function( node ) {


        if ( node instanceof THREE.Mesh ) { 
          node.castShadow = true; 
          node.material.side = THREE.DoubleSide;
        }
        if ( node.isSkinnedMesh ) {
          skeleton = node.skeleton;
          //add balls
          for(var i = 0; i < skeleton.bones.length; i++){
       ...