Rotate by cube

by 蔡 育曄

HTML

<button id='switch'>ON</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/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>

CSS

body {
  overflow: hidden;
}

#degress {
  position: absolute;
  text-align: center;
  bottom: 3%;
  right: 44%;
  width: 12.4%
}

#switch {
  position: absolute;
  bottom: 3%;
  left: 57%;
}

JavaScript

var renderer, camera, controls, scene, axes, stats;
var arrow, angle = 0, theta2 = 0;
var type = 0, tmp = true;

$('#switch').click(function() {
  axes.material.visible = !axes.material.visible;
  if (tmp == true) {
    $('#switch').text('OFF');
  } else {
    $('#switch').text('ON');
  }
  tmp = !tmp;
});

init();
animate();

function buildArrow() {
	//設置物體的長、寬、高
	let bodyGeometry = new THREE.BoxGeometry(3, 3, 16); 
  
  let headGeometry = new THREE.CylinderGeometry(4,4,3,3);
  let material = new THREE.MeshNormalMaterial();
  let body = new THREE.Mesh(bodyGeometry, material);
  
  var head = new THREE.Mesh(headGeometry, material);
  head.rotation.x = Math.PI;
  head.position.z = -10;
  body.add(head);
  
  let obj = new THREE.Group();
  body.position.z = -8;
  obj.add(body);
  
  return obj;
}

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  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.z = 50; // important
  //camera.lookAt (new THREE.Vector3(0,0,0));
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  scene = new THREE.Scene();

	arrow = buildArrow();
  scene.add(arrow);

  let gridXZ = new THREE.GridHelper(100, 10, 'red', 'white');
  // ↑ 設置網格: GridHelper(設置大小,分成幾等份,網格中線顏色,網格線顏色)，若分成積數等份，第三格疑似不會起作用
  scene.add(gridXZ);

  axes = new THREE.AxisHelper(10);
  scene.add(axes);

  

  stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.top = '8px';
  stats.domElement.style.zIndex = 100;
  document.body.appendChild(stats.domElement);

  window.addEventListener('resize', onWindowResize, false); //事件處理器
}

function onWindowResize() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  camera.aspect = width / height;
 ...