HTML+3.js formatting

formatting

by RGMGx

HTML

<div id="container">

</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://cdn.jsdelivr.net/gh/mrdoob/three.js@2410ad1a8f5844df00191600eafda59def537830/examples/js/loaders/MTLLoader.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@2410ad1a8f5844df00191600eafda59def537830/examples/js/loaders/OBJLoader.js"></script>

JavaScript

var UNITWIDTH = 90; // Width of a cubes in the maze
var UNITHEIGHT = 60; // Height of the cubes in the maze

var camera, scene, renderer;
var totalCubesWide; // How many cubes wide the maze will be
var collidableObjects = []; // An array of collidable objects used later
var mapSize;
var count = 0;
var  gravity = new THREE.Vector3(),
  beta = 0,
  gamma = 0;

var sphere = function() {
  this.pos = new THREE.Vector3(0, 40, 0);
  this.vel = new THREE.Vector3();
  this.force = new THREE.Vector3();
  this.mesh = new THREE.SphereGeometry(60, 32, 32), new THREE.MeshPhongMaterial({
    color: 0xffff00
  });

  scene.add(this.mesh);
  this.mesh.position.y = 40;
  this.update = function(dt) {
    this.vel.add(this.force.clone().multiplyScalar(dt));
    this.pos.add(this.vel.clone().multiplyScalar(dt));
    this.mesh.position.copy(this.pos);
		
  }
}
////
var ground = function () {
    // properties
    
    ////////////////////
   
 
    /////////////////////////////////
    this.pos = new THREE.Vector3(0, 10, 0); // object frame
    this.normal = new THREE.Vector3(0, 1, 0); // object frame
    let g = new THREE.PlainGeometry(mapSize, mapSize);
    let loader = new THREE.TextureLoader()
  loader.crossOrigin = '';
  let texture_w = loader.load('https://rgmgx.github.io/textures/wood.jpg');

  texture_w.wrapS = THREE.RepeatWrapping;
  texture_w.wrapT = THREE.RepeatWrapping;

  var groundMat = new THREE.MeshPhongMaterial({
    color: 0xA0522D,
    map: texture_w,
    side: THREE.DoubleSide
  });
    this.mesh = new THREE.Mesh(g, groundMat);
    this.mesh.position.set(0, 1, 0);
  // Rotate the place to ground level
  this.mesh.rotation.x = degreesToRadians(90);
    scene.add(this.mesh);

    // methods
    this.isPointOut = function (point) {
        // considering plane transformation
        var posW = this.pos.clone(); // in world frame
        var normalW = this.normal.clone();
        posW.applyMatrix4(this.mesh.matrixWorld);
        var tt = new THREE.Matrix4();
       ...