CGhw2 helper 0

Opening box

by ak532892

HTML

<div id="info">Homework 2
  <br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">


</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

CSS

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

#gui {
  position: absolute;
  top: 50px;
  right: 10px;
  height: 500px;
  //text-align: center;
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var controls; 
var torsoYFrame, torsoXFrame, headXFrame, headYFrame, handLXFrame, handLYFrame,
handRXFrame, handRYFrame,
skirtFrontFrame, skirtRearFrame, skirtLeftFrame, skirtRightFrame,
footLXFrame, footLYFrame, footRXFrame, footRYFrame;
var angle = 0;
var gcontrols;   // for dat-GUI
var controls;    // for orbitControls

init();
animate();

function init() {
	scene = new THREE.Scene();
	
	camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
	camera.position.z = 400;
	
	scene.add(camera);
	
	var gridXZ = new THREE.GridHelper(100, 10);
	gridXZ.setColors(new THREE.Color(0xff00ff), new THREE.Color(0xffffff));
	scene.add(gridXZ);
	
	renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setClearColor(0x888888);
	
	controls = new THREE.OrbitControls(camera, renderer.domElement);
	
	var light = new THREE.PointLight(0xffffff, 1);
	light.position.set(150, 150, 150);
	scene.add(light);
	var amblight = new THREE.AmbientLight(0x404040); // soft white light
	scene.add(amblight);
	document.body.appendChild(renderer.domElement);
	window.addEventListener('resize', onWindowResize, false);
	///////////////////////////////////////////////////////////////
	
	var headY = 34.5, torsoX = 27, torsoY = 31.5, footY = 30;
	var head = makeBoxHead(52.5, headY, 37.5, 0x884400);
	//first, 以旋轉的圓心為中心設新座標
	head.position.y = headY/2;
	headXFrame = makeLinkHead(head, headY, torsoX, torsoY, footY);
	headYFrame = new THREE.Object3D();
	headYFrame.add(headXFrame);
	scene.add(headYFrame);
	
	var torsoZ = 27;
	var torso = makeBoxTorso(torsoX, torsoY, torsoZ, 0x008844);
	
	torso.position.y = torsoY/2;
	torsoXFrame = makeLinkTorso(torso, headY, torsoX, footY);
	torsoYFrame = new THREE.Object3D();
	torsoYFrame.add(torsoXFrame);
	scene.add(torsoYFrame);
	//scene.add(torsoYFrame);
	
	var footX = 10.5, footZ = 24, footColor = 0xc2a57d;
	var footL = makeBox(footX, footY, footZ,...