JSFiddle - React, Tailwind, and code Playground

by 林 羿緯

HTML

<table align="center">
		<td>
			<button id='start' class="switch">START</button>
			<button id='pause' class="switch" style="display: none">PAUSE</button>
		</td>
		<td>
			<button id='quartz' class="switch_action" class1="switch_sector" style="display: none">Quartz</button>
			<button id='analog' class="switch_action">Analog</button>
			<button id='sector' class1="switch_sector" style="display: none">Sector</button>
		</td>
	</table>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/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>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

JavaScript

var renderer, camera, controls, scene, axes;
	             
		var Angular = 0;
		var turn = false;
		var action = "Analog";
		var aou;
		var mesh;
		var flat;
	

		init();
		animate();
		function init() {
			renderer = new THREE.WebGLRenderer({
				antialias: true
			})
	

			renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.setClearColor(0xAAAAAA);
			document.body.appendChild(renderer.domElement);

			camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
			camera.position.z = 300;  // important

			controls = new THREE.OrbitControls(camera, renderer.domElement);
			window.addEventListener('resize', onWindowResize, false);
			scene = new THREE.Scene();

			let gridXZ = new THREE.GridHelper(100, 10, 'red', 'white');
			

			axes = new THREE.AxisHelper(10);
		
      //扇形
			var geometry = new THREE.RingGeometry(0.5, 50, 32);

			var material = new THREE.MeshBasicMaterial({
				color: 0xFFFFFF,
				side: THREE.DoubleSide
			});
			mesh = new THREE.Mesh(geometry, material);

			var geometry_backgroung = new THREE.RingGeometry(0.5, 50, 32);

			var material_backgroung = new THREE.MeshBasicMaterial({
				color: 0xFFFFFF,
				side: THREE.DoubleSide
			});
			var backgroung = new THREE.Mesh(geometry_backgroung, material_backgroung);
			scene.add(mesh);
			scene.add(backgroung);
			
			aou = buildAou();
			scene.add(aou);

			var zero = buildzero();
			scene.add(zero);
			$('#start').on('click', function () {
				$('button[class="switch"]').toggle();
				turn = true;

			});
			$('#pause').on('click', function () {
				$('button[class="switch"]').toggle();
				turn = false;
				Sector_action = false;
			});
			$('#analog').on('click', function () {
				$('button[class="switch_action"]').toggle();
				action = "Analog";
				flat.material.visible = true;
				backgroung.material.visible = true;
			});
			$('#quartz').on('click', function () {
				$('button[class1="switch_sector"]').toggle();
				action =...