HTML+3.js formatting

formatting

by Bai Shiuan Huang

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-left: 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 mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var rectangle = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), new THREE.MeshBasicMaterial());
var pickables = [];
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();
  scene.add(rectangle);
  camera = new THREE.OrthographicCamera (-50,50,50,-50,1, 1000);
  camera.position.z = 500;
  var gridXY = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXY);
  let plane1 = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshBasicMaterial({
    transparent: true,
    opacity: 0.1,
    visible: true,
    color: 0x0000ff
  }));
  scene.add(plane1);
  pickables.push(plane1);
	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);
  window.addEventListener('mousedown', onDocumentMouseDown, false);
}

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

  camera.aspect = ww / hh;
 ...