HTML+3.js formatting

formatting

by j91157j91157

HTML

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

<hr>
<div id="container" style="float:left; margin:3px; width:60vw; height:60vw">
<div id="container1" style="position: absolute; top: 40vh; left: 65vw; width:30vw; height:30vw;">
</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/84/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 cameraHUD, sceneHUD, renederer1;
var omega, theta, R;
var car;
var clock = new THREE.Clock();
var step = false;
var keyboard;
var fuel;
var engine = true;
var aou = new THREE.Object3D();
var oil = new THREE.Object3D();
var pi = 2*Math.PI/6;

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);
  
  renderer1 = new THREE.WebGLRenderer();
  renderer1.setSize($("#container1").innerWidth(), $("#container1").innerWidth());
  renderer1.setClearColor(0xffffff);
  $("#container1").append(renderer1.domElement);

  ////////////////////////////////////////////////

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, ww / hh, 1, 1000);
  camera.position.set(0, 200, 300);
  
  sceneHUD = new THREE.Scene();
  cameraHUD = new THREE.OrthographicCamera (-50,50,50,-50,1, 1000);
  cameraHUD.position.z = 500;
  
  sceneHUD.add(build());
  sceneHUD.add(build_oil());
  sceneHUD.add(background());
  
  var axis = new THREE.AxisHelper(40);
  sceneHUD.add(axis);
  

  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);
  
  //sceneHUD.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();
}

function build() {
	aou = new THREE.Object3D();
	var geometry_cube = new THREE.BoxGeometry( 2, 26, 1 );
  var material_aou = new THREE.MeshBasicMaterial({color: 0x2497E3});
  var cube = new THREE.Mesh(geometry_cube, material_aou);
  cube.position.set(0, 13, -0.5);
  var geometry_cone = new...