hw6

by Leoooo

HTML

<div id="info">hw6 rose shape<br>
<a href='javascript:toggleTurn();'>toggle</a></div>
<script>
var turn =true;
function toggleTurn()
{
turn =!turn;
}
</script>
<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>

CSS

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

body {
  overflow: hidden;

}

JavaScript

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

init();
animate();

function init() {
  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);
  ///////////////////////////////////////////////////////////

	plane = buildPlane();
	scene.add (plane)
}



function animate() {
	if(turn)
  angle += 0.01;
  controls.update();
  requestAnimationFrame(animate);
  render();
  var k = 5;
  var x = -80 * Math.cos(k * angle) * Math.sin(angle) -80* k * Math.sin(k * angle) * Math.cos(angle);
  var y = 80 * Math.cos(k*angle)*Math.cos(angle)-80*k*Math.sin(k*angle)*Math.sin(angle);  
  plane.position.set(Math.cos(angle)*Math.cos(k*angle)*80, 80*Math.cos(k * angle)* Math.sin(angle), 0)
  plane.rotation.x = Math.PI / 2
  plane.rotation.y = Math.atan2(y,x);
}

function render() {
  renderer.render(scene, camera);
}


function buildPlane() {
	var plane = new THREE.Object3D();
  
	var geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(30, 0, 0));
  geometry.vertices.push(new THREE.Vector3(0, 10, 0));
  geometry.vertices.push(new THREE.Vector3(0, 0, 10));
  geometry.vertices.push(new THREE.Vector3(0, 0, -10));
  var face;
  face = new THREE.Face3(0, 1, 2);
  geometry.faces.push(face);
  face = new THREE.Face3(1, 3, 2);
  geometry.faces.push(face);
  face = new THREE.Face3(3, 1, 0);
  geometry.faces.push(face);
  face = new THREE.Face3(2, 3, 0);
  geometry.faces.push(face);

...