OrbitControls & Resize

buttons

by yi hom

HTML

<div id="info">HW1
  <br/>
  <br/>
  <br/>
  <button id="toggle" style="width:20%">Toggle Turn</button>
  <button id="toggle1" style="width:20%">Mode</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,
  turn = false;

var clock;

var circlematerial;
var circleGeometry;
var radius = 50;
var segments = 32;
var circle;
var circlematerial1;
var circleGeometry1;
var radius1 = 50;
var segments1 = 32;
var circle1;

var pin = new THREE.Object3D();

var CylinderGeometry,Cylindermaterial,cylinder;
var time=0;

var mode = 0;

init();
animate();

$("#toggle").click(function() {
  turn = !turn;
});

$("#toggle1").click(function() { 
	if(mode === 0){
  	mode = 1;
  }
  else if(mode === 1){
  	mode = 2;
  }
  else if(mode === 2){
  	mode = 0;
  }  
});

function watch(){
  circlematerial = new THREE.MeshBasicMaterial({
    color: 0xeeeeee,
    side: THREE.DoubleSide
  });

  circleGeometry = new THREE.CircleGeometry( radius, segments );
  circle = new THREE.Mesh( circleGeometry, circlematerial );
  scene.add( circle );
  circle.rotation.x = 3.14/2;
  
  CylinderGeometry = new THREE.CylinderGeometry( 2, 0, 45, 32 );
  Cylindermaterial = new THREE.MeshBasicMaterial( {color: 0x444444} );
  cylinder = new THREE.Mesh( CylinderGeometry, Cylindermaterial );
  
  cylinder.rotation.x = 3.14/2;
  cylinder.position.set (0,0,-20);
  pin.add(cylinder);
  scene.add( pin ); 

  circlematerial1 = new THREE.MeshBasicMaterial({
    color: 0x000000,
    side: THREE.DoubleSide
  });

  circleGeometry1 = new THREE.CircleGeometry( radius1, segments1,0,0 );
  circle1 = new THREE.Mesh( circleGeometry1, circlematerial1 );
  scene.add( circle1 );
  circle1.rotation.x = 3.14/2;

  var geometry = new THREE.BoxGeometry( 10, 5, 5 );
  var geometry1 = new THREE.BoxGeometry( -10, 5, 5 );
  var geometry2 = new THREE.BoxGeometry( 5, 5, 10 );
  var geometry3 = new THREE.BoxGeometry( 5, 5, -10 );
  var material = new THREE.MeshBasicMaterial( {color: 0x444444,side: THREE.DoubleSide} );
  var cube = new THREE.Mesh( geometry, material );
  cube.position.set(50,0,0);
  //scene.add( cube );
  var cube1 = new THREE.Mesh( geometry, material );
 ...