HW2P

with orbitControls, XZgrid, info

by k6e2n0t12

HTML

<div id="info">HW2
<br/>
  <button id="changeView" style="width:20%">Change View</button>
<br/>
  <button id="changeMovement" style="width:20%">Change Movement</button></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>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

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

JavaScript

var camera,camera3rd, scene, renderer, geometry, material, mesh, light, controls;
var turn = true;
var headFrame,torsoFrame,skirtFront;
var gcontrols;
var speed=0.01,angle=0,angleArm=0,adjust=4;
var danceMode=false,thirdPersonView=false;
var clock = new THREE.Clock();

var period = 4;
var pose1 = {
	heady:0,
  rightArmz:0,
  leftArmz:0,
  rightLegz:0,
  leftLegz:0
};
var pose2 = {
	heady:Math.PI/3,
  rightArmz:-(150/180)*Math.PI,
  leftArmz:0,
  rightLegz:0,
  leftLegz:0
};
var pose3 = {
	heady:-Math.PI/3,
  rightArmz:0,
  leftArmz:(150/180)*Math.PI,
  rightLegz:0,
  leftLegz:0
};
var pose4 = {
	heady:0,
  rightArmz:-(90/180)*Math.PI,
  leftArmz:0,
  rightLegz:-(50/180)*Math.PI,
  leftLegz:0
};
var pose5 = {
	heady:0,
  rightArmz:0,
  leftArmz:(150/180)*Math.PI,
  rightLegz:0,
  leftLegz:(50/180)*Math.PI
};
var pose6 = {
	heady:Math.PI/3,
  rightArmz:0,
  leftArmz:0,
  rightLegz:-(50/180)*Math.PI,
  leftLegz:0
};
var pose7 = {
	heady:Math.PI/3,
  rightArmz:0,
  leftArmz:0,
  rightLegz:0,
  leftLegz:(50/180)*Math.PI
};

var keys = [{s: 0,pose: pose1}, {s: 1/8, pose: pose2}, {s: 2/8,pose: pose3},{s: 3/8,pose: pose1},{s: 4/8,pose: pose4},{s: 5/8,pose: pose5},{s: 6/8,pose: pose6},{s: 7/8,pose: pose7},{s: 1,pose: pose1}];

$("#changeMovement").click(function() {
	if(danceMode===true)
  	danceMode=false;
  else
  	danceMode=true;
  setDefault();
});
$("#changeView").click(function() {
	if(thirdPersonView==true)
  	thirdPersonView=false;
  else
  	thirdPersonView=true;
});

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

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

		camera3rd = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
    scene.add(camera3rd);
		
    gcontrols = {
    	speed:0.01
    }
    
    var gui = new dat.GUI();
		gui.remember (gcontrols);
    gui.add(gcontrols, 'speed', 0, 0.1);
    //geometry = new...