HW6

by jason870509

HTML

<div id="info">demo page<br/>
  <button id="toggle" style="width:20%">Toggle Turn</button>
</div>
<script src="https://threejs.org/build/three.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

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, mesh, light, controls;
var plane;
var angle = 0,
  turn = true;

init();
animate();

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

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;

  light = new THREE.PointLight(0xffffff);
  light.position.set(100, 300, 200);
  scene.add(light);

  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);
  gridXZ.rotation.x = Math.PI / 2;

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

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

  document.body.appendChild(renderer.domElement);
  ///////////////////////////////////////////////////////////
  frame = new THREE.Object3D();
  scene.add(frame);

  var cylinderGeom = new THREE.CylinderGeometry(10, 10, 10);
  var planGeom = new THREE.BoxGeometry(20, 10, 7);
  var cubeMaterial = new THREE.MeshNormalMaterial();
  var mesh = new THREE.Mesh(cylinderGeom, cubeMaterial);
  var mesh1 = new THREE.Mesh(planGeom, cubeMaterial);
  frame.add(mesh);
  mesh1.position.set(10, 0, 0);
  frame.add(mesh1);

  plane = buildPlane();
  //scene.add(plane)
}
var x1 = 0, y1 = 0;
function animate() {
  stats.update();

  $("#toggle").click(function() {
    turn = !turn;
    if (turn) $("#toggle").text('stop');
    else $("#toggle").text('turn');
  });
  if (turn) angle += 0.01;
  controls.update();
  requestAnimationFrame(animate);
  render();
  var k = 3;
  // -50*cos(k*angle)*sin(angle)-k*sin(k*angle)*cos(angle),-50*cos(k*angle)*cos(angle)-k*sin(k*angle)*cos(angle)
  var cos = Math.cos;
  var sin = Math.sin;
  var r = 100 * cos(k * angle);
  
  var x = -100 * cos(k * angle) *...