hw1 (cg16)

buttons

by jmchen

HTML

<div id="info">Homework 1
  <br><br>
  <button id="toggle" style="width:20%">Toggle Turn</button>
  <button id="analog" style="width:20%">Analog</button>
</div>
<script src="https://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="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera;
var controls;
var angle = 0, turn = false;
var clock = new THREE.Clock();
var startTime = 0;
var angleNow = 0;
var choice = 0;
var sector, hand, plate;

init();
animate();

$("#toggle").click(function() {
  turn = !turn;
  if (turn)  // counting on
    startTime = clock.getElapsedTime();
  else   // counting off
  	angleNow = angle;
});

$("#analog").click(function() {
	this.choice = (this.choice === undefined) ? 0: (++this.choice)%3;
  choice = this.choice;
  switch (choice) {
  	case 0:  // analog
    	$('#analog').text ('Quartz');
			break;
  	case 1:  // quartz
    	$('#analog').text ('Sector');
			break;
  	case 2:  // analog
    	$('#analog').text ('Analog');
			break;
   }   
});

function sector() {
  var mesh = new THREE.Mesh(new THREE.CircleGeometry(50, 40),
    new THREE.MeshBasicMaterial({side:THREE.DoubleSide}));
	return mesh;	
}

function plate() {
  var plate = new THREE.Object3D();
  var mesh = new THREE.Mesh(new THREE.CircleGeometry(50, 40),
    new THREE.MeshBasicMaterial());
  var mark = new THREE.Mesh(new THREE.BoxGeometry(5, 12, 5),
    new THREE.MeshBasicMaterial({
      color: 0x000000
    }));
  plate.add(mesh);
  plate.add(mark);
  mark.position.y = 48;
  return plate;
}

function secondHand() {
  // XY plane,
  // initially, point to +Y
  // rotate CW
  var hand = new THREE.Object3D();
  var part1 = new THREE.Mesh(new THREE.CylinderGeometry(5, 5, 30, 20),
    new THREE.MeshBasicMaterial({
      color: 0x888888
    }));
  var tip = new THREE.Mesh(new THREE.CylinderGeometry(0, 8, 15, 20),
    new THREE.MeshBasicMaterial({
      color: 0x000000
    }));
  hand.add(tip);
  hand.add(part1);
  tip.position.y = 35;
  part1.position.y = 15;
  //part1.rotation.x = -Math.PI/2;
  return hand;
}

function init() {
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer({antialias:true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
 ...