Rotate by range(radio button)

by 蔡 育曄

HTML

<input type=text id='degress'>
<div id = 'spcontrol'>
  <input type=range min=-15 max=15 id='speed'> 轉速控制
</div>

<div id='option'>
  <input type=radio class='tp' name='obj' value='box'>box
  <br>
  <input type=radio class='tp' name='obj' value='cylinder' checked> cylinder
</div>

<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: 42%;
  width: 12.4%;
}

#spcontrol {
  position: absolute;
  top: 8vh;
  left: 40%;
}

#option {
  position: absolute;
  top: 9vh;
  left: 2%;
}

JavaScript

var renderer, camera, controls, scene, axes, stats, angle = 0;
var sp = 0,
  cube, cylinder, object,
  tmp = true;

$('#speed').change(function() {
  sp = $(this).val();
});

$('.tp').click(function() {
  if ($(this).val() == 'box' && cube.material.visible == false) {
    cube.material.visible = !cube.material.visible;
    cylinder.material.visible = !cylinder.material.visible;
  } else if ($(this).val() == 'cylinder' && cylinder.material.visible == false) {
    cube.material.visible = !cube.material.visible;
    cylinder.material.visible = !cylinder.material.visible;
  }
});

init();
animate();

function buildObj() {
  var obj = new THREE.Object3D();

  cube = new THREE.Mesh(new THREE.BoxGeometry(16, 3, 3), new THREE.MeshNormalMaterial());
  cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 16, 32), new THREE.MeshNormalMaterial());
  cube.material.visible = false;
  cylinder.rotation.z = Math.PI / 2;
  obj.add(cylinder);
  obj.add(cube);
  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();

  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.bottom = '0vh';
  stats.domElement.style.zIndex = 100;
  document.body.appendChild(stats.domElement);
  
  object = buildObj();
  scene.add(object);
  window.addEventListener('resize', onWindowResize,...