HTML+3.js formatting

formatting

by Leoooo

HTML

<h1 style="text-align:center"> HW4 Helper </h1>

<hr>
<div id="container" style="float:left; margin:3px; width:60vw; height:60vw">
</div>
<div style="float:left; margin-right:10px; width:32vw;">Current Configuration:
  <input id="angle" style="width:100%" type="text" value="(default value)">
  <br><br>
  <button id="toggle" style="width:100%">Toggle motion</button>
  <p id='greeting'></p>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>

JavaScript

$('#toggle').click ( function() {
	motion = !motion;
  console.log (motion)
});

var camera, scene, renderer, circle, radius ;
var pos, vel;
var motion = true;

init();
animate();

function init() {

  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(ww, hh);
  renderer.setClearColor(0x888888);
  $("#container").append(renderer.domElement);
  
  ////////////////////////////////////////////////

  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera (-50,50,50,-50,1, 1000);
  camera.position.z = 500;

	radius = 5;
	circle = new THREE.Mesh (new THREE.CircleGeometry (radius,20), new THREE.MeshBasicMaterial());
  scene.add (circle);
  
  let geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(-40, -40, 0),
    new THREE.Vector3(40, -40, 0),
    new THREE.Vector3(40, 40, 0),
    new THREE.Vector3(-40, 40, 0),
    new THREE.Vector3(-40, -40, 0));

  let border = new THREE.Line(geometry, new THREE.LineBasicMaterial({
    color: 0x0000ff
  }));
  scene.add(border);

  pos = new THREE.Vector3();
  vel = new THREE.Vector3(5,4,0);
  window.addEventListener('resize', onWindowResize, false);
}


function onWindowResize() {
  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();

  camera.aspect = ww / hh;
  camera.updateProjectionMatrix();
  renderer.setSize(ww, hh);
}


function animate() {
	dt = motion ? 0.1 : 0;
	pos.add (vel.clone().multiplyScalar(dt));
  
	if (Math.abs(pos.x) > 40-radius) {
  	vel.x *= -1;  	
  }
	if (Math.abs(pos.y) > 40-radius) {
  	vel.y *= -1;  	
  }
  circle.position.copy (pos);
  
  requestAnimationFrame(animate);
  render();
}

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