clock

buttons

by otorineko6790

HTML

<div id="info">My First Homework
  <br/>
  <button id="toggle" style="width:20%">Toggle Turn</button>
  <button id="sector" style="width:20%">sector</button>
  <button id="quartz" style="width:20%">quartz</button>
  <button id="analog" style="width:20%">analog</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/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 ring, angle = 0, sh,
  turn = false;
var hue = 0;
var sec = false, quartz = false;

init();
animate();
///button
$("#toggle").click(function() {
  turn = !turn;
});

$("#quartz").hide(); 
$("#sector").hide(); 

sh.visible = ! sh.visible;
$("#analog").click(function() {
	$("#sector").toggle(true);
  $("#analog").hide(); 
  sec = !sec;
  sh.visible = ! sh.visible;
  //console.log('sec :' + sec + ' qur :' + quartz);
});
$("#sector").click(function() {
	$("#quartz").toggle(true);
  $("#sector").hide(); 
  sec = !sec;
  quartz = !quartz;
});

$("#quartz").click(function() {
	$("#analog").toggle(true);
  $("#quartz").hide(); 
  quartz = !quartz;
  sh.visible = !sh.visible;
});


///two function
//ring
function buildRing(){
	var geometry = new THREE.RingGeometry(10, 25, 32);
	var material = new THREE.MeshBasicMaterial({color: 0xffffff, side: THREE.DoubleSide });
  var ring = new THREE.Mesh(geometry, material);
  return ring;
}

//sector
function buildSH(){
  var obj = new THREE.Object3D();
  var geometry = new THREE.RingGeometry(0.1, 2, 30, 30, 4.2, 1);
  var material = new THREE.MeshBasicMaterial({color: 0x000000, side: THREE.DoubleSide});
  var bg = buildRing();
  var point = new THREE.Mesh(geometry, material);
  var stick = new THREE.Mesh(new THREE.BoxGeometry(1, 25, 1), material);
  
  var sbg = buildRing();
  sbg.geometry = new THREE.RingGeometry(0.1, 25, 32);
  obj.add(sbg);
  sbg.position.y = -12.5;
	obj.add(stick);
  //stick.position.y = 26;
  obj.add(point);
  point.position.y = 14;
  
	return obj;
}
////init
function init() {
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xa2b5d3);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(13, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = -500;
  controls = new THREE.OrbitControls(camera,...