HTML+3.js formatting

formatting

by jason870509

HTML

<h1 style="text-align:center"> Hw5 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;">
  <button id="stepB" style="width:100%">Step</button>
  <p id="fuel">
  </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/109/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

JavaScript

var camera, scene, renderer;
var omega, theta, R;
var car;
var clock = new THREE.Clock();
var step = false;
var keyboard;
var fuel;
var engine = 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.PerspectiveCamera(50, ww / hh, 1, 1000);
  camera.position.set(0, 200, 300);

  car = new THREE.Mesh(new THREE.CircleGeometry(5, 20), new THREE.MeshBasicMaterial());
  scene.add(car);

  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

  let controls = new THREE.OrbitControls(camera, renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);
  /////////////
  theta = 0;
  omega = 0;
  R = 70;

  fuel = 100;

  // keyboard = new KeyboardState();
}

$("#stepB").on('mousedown', function(e) {
  console.log('mouse down')
  step = true;
  $(this).css("background-color", "yellow");
}).on('mouseup', function(e) {
  console.log('mouse up')
  step = false;
  $(this).css("background-color", "white");
});
/*    
$("#step").click(function() {
	console.log ('step')
	step = true;
});

$("#stop").click(function() {
	console.log ('stop')
	step = false;
});
*/

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

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

function animate() {
  /*
  	keyboard.update();
    if (keyboard.pressed("S"))
    	step = true;
    else
    	step = false;
  */
  console.log(step)

  requestAnimationFrame(animate);
  render();

  dt = clock.getDelta();
  if (engine) {
    theta += omega * dt;
    car.position.set(R * Math.cos(theta), 0, -R * Math.sin(theta))

    if (step) {
    ...