three.js testbed

with orbitControls, XZgrid, info

by k6e2n0t12

HTML

<div id="info">HW2</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
    
</script>
<script src="http://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.js"></script>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer, geometry, material, mesh, light, controls;
var turn = true;
var headFrame,torsoFrame,skirtFront;
var gcontrols;

init();
animate();
function loadJSON(){
	return{
  "preset": "pose3",
  "closed": false,
  "remembered": {
    "Default": {
      "0": {
        "headx": -62.20748655316588,
        "heady": 0,
        "headz": 0,
        "torsox": 90,
        "torsoy": 0,
        "torsoz": 0,
        "leftArmx": -34.41497310633176,
        "leftArmy": 0,
        "leftArmz": 0,
        "rightArmx": 45,
        "rightArmy": 0,
        "rightArmz": 0,
        "leftLegx": 76.75508068100473,
        "leftLegy": 0,
        "leftLegz": 0,
        "rightLegx": -42.35569123399865,
        "rightLegy": 0,
        "rightLegz": 0
      }
    },
    "pose1": {
      "0": {
        "headx": -62.20748655316588,
        "heady": 0,
        "headz": 0,
        "torsox": 90,
        "torsoy": 0,
        "torsoz": 0,
        "leftArmx": -34.41497310633176,
        "leftArmy": 0,
        "leftArmz": 0,
        "rightArmx": 45,
        "rightArmy": 0,
        "rightArmz": 0,
        "leftLegx": 76.75508068100473,
        "leftLegy": 0,
        "leftLegz": 0,
        "rightLegx": -42.35569123399865,
        "rightLegy": 0,
        "rightLegz": 0
      }
    },
    "pose2": {
      "0": {
        "headx": -6.622459659497636,
        "heady": 0,
        "headz": 0,
        "torsox": -12.875264270613101,
        "torsoy": 0,
        "torsoz": 0,
        "leftArmx": 90,
        "leftArmy": 0,
        "leftArmz": 0,
        "rightArmx": 90,
        "rightArmy": 0,
        "rightArmz": 0,
        "leftLegx": 76.75508068100473,
        "leftLegy": 0,
        "leftLegz": 0,
        "rightLegx": -42.35569123399865,
        "rightLegy": 0,
        "rightLegz": 0
      }
    },
    "pose3": {
      "0": {
        "headx": -2.7272727272727195,
        "heady": -47.3784355179704,
        "headz": -14.904862579281186,
        "torsox": 21.627906976744185,
        "torsoy":...