Clock(accurate)

by 蔡 育曄

HTML

<button id = 'toggle'> Toggle</button>
<button id = 'style' >Quartz</button>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

CSS

body {
  overflow: hidden;
}
#toggle {
  position: absolute;
  top:  2%;
  left:38%;
}

#style {
  position: absolute;
  top:  2%;
  left: 53%;
}

JavaScript

import { OrbitControls } from "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js";

var renderer, camera, controls, scene, axes, cylinder;
var pointer,watch, ring, angle = 0,quzrtz_angle =0;
var tmp = 0, turn = false,  sector_switch = false;
var startTime, angleNow = 0;
var clock = new THREE.Clock();

init();
animate();

$('#toggle').click(function() {
	turn = !turn;
  if (turn) {
    startTime = clock.getElapsedTime();
  } else{
    angleNow = angle;
    }   
})

$('#style').click(function() {
  switch (++tmp%3) {
  	case 0:
    	$('#style').text('Quartz');
    	watch.visible = !watch.visible;
      ring.material.visible = !ring.material.visible;
      break;
    case 1:
    	$('#style').text('Sector');
    	sector_switch = !sector_switch;
      break;
    case 2:
    	$('#style').text('watch');
    	watch.visible = !watch.visible;
      ring.material.visible = !ring.material.visible;
      sector_switch = !sector_switch;
  }
})

function buildPointer() {
	var arrow = new THREE.Object3D();
  var material = new THREE.MeshBasicMaterial({color:0x0ABDA0});
  var baton = new THREE.Mesh(new THREE.CylinderGeometry(1,1,32,32), material);
  var tip = new THREE.Mesh(new THREE.CylinderGeometry(0,2,8,32), material);
  baton.position.y = 16;
  tip.position.y = 36;
  arrow.add(baton);
  arrow.add(tip);
  return arrow;
}

function buildScale() {
	var scale = new THREE.Object3D();
	var one_quarter = new THREE.Object3D();
	var material = new THREE.MeshBasicMaterial({color:0xEBF2EA});
	var three = new THREE.Mesh(new THREE.BoxGeometry(8,0.8,0.8), material);
  var nine = three.clone();
  var six = three.clone();
  var twelve = three.clone();
  three.position.x = 36;
  nine.position.x = -36;
  six.position.y = -36;
  twelve.position.y = 36;
  six.rotation.z = Math.PI/2;
  twelve.rotation.z = Math.PI/2;  
  one_quarter.add(three);
  one_quarter.add(nine);
  one_quarter.add(six);
  one_quarter.add(twelve);
  var one_quarter2 = one_quarter.clone();
  var one_quarter3...