JSFiddle - React, Tailwind, and code Playground

by tommy92380

HTML

<div id="info">
  HW3
  <br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

CSS

body {
	  background-color: #fff;
	  color: #111;
	  margin: 0px;
	  overflow: hidden;
	  font-family: Monospace;
	  font-size: 20px;
	}
	
	#info {
	  position: absolute;
	  top: 0px;
	  width: 100%;
	  padding: 5px;
	  text-align: center;
	  color: #ffff00
	}
	
	a {
	  color: #00ffff
	}
	
	strong {
	  color: red
	}
	
	#container {
	  z-index: 0;
	  left: 0px;
	  top: 0px;
	  overflow: hidden;
	  position: absolute;
	  width: 100%;
	  height: 100%;
	}

JavaScript

var camera, scene, renderer;
var clock = new THREE.Clock();
//var gcontrol;

var period = 1; // 3 seconds
var pose1 = {
  Lleg: -1,
  LlegElbow: 0,
  Rleg: -1,
  Rleglbow: 0
};
var pose2 = {
  Lleg: -1.55,
  LlegElbow: 0,
  Rleg: -1.55,
 	Rleglbow: 0
};

var pose3 = {
  Lleg: -1.55,
  LlegElbow: 0,
  Rleg: -1.55,
  Rleglbow: 0
};
var pose4 = {
  Lleg: -1.2,
  LlegElbow: 0,
  Rleg: -1.55,
  Rleglbow: 0
};
var pose5 = {
  Lleg: -1,
  LlegElbow: 0,
 	Rleg: -1.55,
 	Rleglbow: 0
};
var pose6 = {
  Lleg: -1,
  LlegElbow: 0,
  Rleg: -1.2,
  Rleglbow: 0
};
var pose7 = {
  Lleg: -1,
  LlegElbow: 0,
  Rleg: -1,
  Rleglbow: 0
};

// "normal" keys
var Nkeys = [{s: 0,pose: pose1}, {s: 0.1, pose: pose2}, {s:0.2 ,pose: pose1},{s:0.4,pose:pose3},{s:0.5,pose:pose4},{s:0.7,pose:pose5},{s:0.8,pose:pose6},{s:1,pose:pose7}];
// "popping" keys: https://www.youtube.com/watch?v=YhYsTszCMkM

var keys = Nkeys;
function style(ss) {
	
 if (ss === 'regular')
  	keys = Nkeys;
}

init();
animate();

function makeLink() {
  var oneLink = new THREE.Object3D();
  var mesh = new THREE.Mesh(new THREE.BoxGeometry(15, 5, 5), new THREE.MeshBasicMaterial({
    wireframe: true
  }));
  oneLink.add(mesh);
  mesh.position.set(7.5, 0, 0);
  joint = new THREE.Mesh(new THREE.CylinderGeometry(3, 3, 3, 12),
    new THREE.MeshBasicMaterial({
      wireframe: true
    }));
  joint.rotation.x = Math.PI / 2;
  oneLink.add(joint);
  return oneLink;
}

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 100;
  scene.add(camera);

   let gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  let controls = new THREE.OrbitControls(camera, renderer.domElement);

  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize',...