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 sphere, ground;

init();
animate();


function init() {
// Create the scene where everything will go
    scene = new THREE.Scene();

    // Add some fog for effects
    scene.fog = new THREE.FogExp2(0xcccccc, 0.0015);

    // Set render settings
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(scene.fog.color);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    // Get the HTML container and connect renderer to it
    var container = document.getElementById('container');
    container.appendChild(renderer.domElement);

    // Set camera position and view details
    camera = new THREE.PerspectiveCamera(130, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.y = 500; // Height the camera will be looking from
    camera.position.x = 0;
    camera.position.z = 0;
		camera.rotation.x =-Math.Pi/2;
   controls = new THREE.OrbitControls(camera, renderer.domElement);

 // document.body.appendChild(renderer.domElement);
    // Add the camera
    scene.add(camera);

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

//////////////////////
var geometry = new THREE.SphereGeometry( 60, 32, 32 );
var material = new THREE.MeshPhongMaterial( {color: 0xffff00} );
sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
sphere.position.y = 40;
    // Add the walls(cubes) of the maze
    createMazeCubes();
    createGround();
    createPerimWalls();

    // Add lights to the scene
    addLights();

    // Listen for if the window changes sizes and adjust
    window.addEventListener('resize', onWindowResize, false);

}

function createMazeCubes() {
  // Maze wall mapping, assuming even square
  // 1's are cubes,...