Cube radio

by j91157j91157

HTML

<title>Hello Three.js</title>
<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>

<div>
  <input id='angle' type='text'>
  <button id='myButton'>顯示XYZ軸</button>
  <input class='gclass' type='radio' name='g' value='Box' style="top:100px; left:0px;" checked> Box 
  <input class='gclass' type='radio' name='g' value='Sphere' style="top:1000px; left:0px;"> Sphere 
  <input id='speed' type='range' min=-20 max=20> 速度控制
</div>

CSS

body {
  overflow: hidden;
}

div {
  position: absolute;
  top: 90vh;
  left: 28vw;
}

#angle {
  height: 20px;
  width: 45px;
}

JavaScript

var renderer, camera, controls, scene;
var stats;
var cubeGeometry, cubeMaterial, cube, angle=0, speed=0;

init();
animate();
rotate();

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 = 50;

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  scene = new THREE.Scene();

  let gridXZ = new THREE.GridHelper(100, 20, 'yellow', 'white');
  scene.add(gridXZ);

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

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


  $('#myButton').click ( function() {
    axes.material.visible = ! axes.material.visible;
  });

  window.addEventListener('resize', onWindowResize, false);

  cubeGeometry = new THREE.BoxGeometry(50,5,5);
  cylinderGeometry = new THREE.CylinderGeometry( 3, 3, 50, 32 );
  cube = new THREE.Mesh(cubeGeometry, new THREE.MeshNormalMaterial());
  cylinder = new THREE.Mesh(cylinderGeometry, new THREE.MeshNormalMaterial());
  scene.add(cube);
  scene.add(cylinder);
  cylinder.material.visible = ! cylinder.material.visible;

  $('.gclass').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() === 'Sphere' && cylinder.material.visible === false){
      cube.material.visible = ! cube.material.visible;
      cylinder.material.visible = ! cylinder.material.visible;
    }
  });

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