OrbitControls & Resize

buttons

by k6e2n0t12

HTML

<div id="info">HW1
  <br/>
  <br/>
  <br/>
  <button id="toggle" style="width:20%">Toggle Turn</button>
  <button id="analog" style="width:20%">Analog</button>
  <button id="quartz" style="width:20%">Quartz</button>
  <button id="sector" style="width:20%">Sector</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 mesh, angle = 0;
var obj;
var ana= true,sect= false,turn = false;
var circle;
var circle2;
var d = new Date();
var t = d.getSeconds();
var m = d.getTime();
init();
animate();

$("#toggle").click(function() {
  turn = !turn;
  d = new Date();
  m=d.getTime();
});
$("#analog").click(function() {
	if(sect==true){
  	scene.remove(obj);
    buildNeedle();
    sect=false;
  
  }
	ana = true;
});

$("#quartz").click(function() {
	if(sect==true){
  	scene.remove(obj);
    buildNeedle();
    sect=false;
  }
	ana = false;
});

$("#sector").click(function() {
	if(sect==false){
  	scene.remove(obj);
    ana=true;
    sect=true;
    buildSector(0);
  }
	else{
  
  }
});

function init() {
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.y = 500;
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  buildNeedle();
 
  THREE.ImageUtils.crossOrigin = '';
	var texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/SY58iZd.jpg');
	
  var material = new THREE.MeshBasicMaterial({ //color: 0x0000ff 
        map: texture,
        transparent: true,
        //opacity: 0.315
    });
	var circleGeometry = new THREE.CircleGeometry( 170, 128 ); 
	circle = new THREE.Mesh( circleGeometry, material ); 
  circle.position.set(0,0,0);
  circle.rotation.x = -Math.PI/2;
	scene.add( circle );
  
  //var gridXZ = new THREE.GridHelper(100, 10);
  //gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  //scene.add(gridXZ);
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth,...