BlueMagnificent/index.html

## index.html

<html>
    <head>
        <meta charset="utf-8">
        <title>JS 3D Physics</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script src="js/ammo.js"></script>
        <script>

            //variable declaration section
            let physicsWorld, scene, camera, renderer

            //Ammojs Initialization
            Ammo().then( start );

            function start (){

                setupPhysicsWorld();

                setupGraphics();
                renderFrame();

            }

            function setupPhysicsWorld(){

                let collisionConfiguration  = new Ammo.btDefaultCollisionConfiguration(),
                    dispatcher              = new Ammo.btCollisionDispatcher(collisionConfiguration),
                    overlappingPairCache    = new Ammo.btDbvtBroadphase(),
                    solver                  = new Ammo.btSequentialImpulseConstraintSolver();

                physicsWorld           = new Ammo.btDiscreteDynamicsWorld(dispatcher, overlappingPairCache, solver, collisionConfiguration);
                physicsWorld.setGravity(new Ammo.btVector3(0, -10, 0));

            }


            function setupGraphics(){

                //create clock for timing
                clock = new THREE.Clock();

                //create the scene
                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0xbfd1e5 );

                //create camera
                camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 5000 );
                camera.position.set( 0, 30, 70 );
                camera.lookAt(new THREE.Vector3(0, 0, 0));

                //Add hemisphere light
                let hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.1 );
                hemiLight.color.setHSL( 0.6, 0.6, 0.6 );
                hemiLight.groundColor.setHSL( 0.1, 1, 0.4 );
                hemiLight.position.set( 0, 50, 0 );
                scene.add( hemiLight );

                //Add directional light
                let dirLight = new THREE.DirectionalLight( 0xffffff , 1);
                dirLight.color.setHSL( 0.1, 1, 0.95 );
                dirLight.position.set( -1, 1.75, 1 );
                dirLight.position.multiplyScalar( 100 );
                scene.add( dirLight );

                dirLight.castShadow = true;

                dirLight.shadow.mapSize.width = 2048;
                dirLight.shadow.mapSize.height = 2048;

                let d = 50;

                dirLight.shadow.camera.left = -d;
                dirLight.shadow.camera.right = d;
                dirLight.shadow.camera.top = d;
                dirLight.shadow.camera.bottom = -d;

                dirLight.shadow.camera.far = 13500;

                //Setup the renderer
                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setClearColor( 0xbfd1e5 );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                renderer.gammaInput = true;
                renderer.gammaOutput = true;

                renderer.shadowMap.enabled = true;

            }


            function renderFrame(){

                let deltaTime = clock.getDelta();

                renderer.render( scene, camera );

                requestAnimationFrame( renderFrame );

            }

        </script>
    </body>
</html>

	<html>
	<head>
	<meta charset="utf-8">
	<title>JS 3D Physics</title>
	<style>
	body { margin: 0; }
	</style>
	</head>
	<body>
	<script src="js/three.js"></script>
	<script src="js/ammo.js"></script>
	<script>

	//variable declaration section
	let physicsWorld, scene, camera, renderer

	//Ammojs Initialization
	Ammo().then( start );

	function start (){

	setupPhysicsWorld();

	setupGraphics();
	renderFrame();

	}

	function setupPhysicsWorld(){

	let collisionConfiguration = new Ammo.btDefaultCollisionConfiguration(),
	dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration),
	overlappingPairCache = new Ammo.btDbvtBroadphase(),
	solver = new Ammo.btSequentialImpulseConstraintSolver();

	physicsWorld = new Ammo.btDiscreteDynamicsWorld(dispatcher, overlappingPairCache, solver, collisionConfiguration);
	physicsWorld.setGravity(new Ammo.btVector3(0, -10, 0));

	}


	function setupGraphics(){

	//create clock for timing
	clock = new THREE.Clock();

	//create the scene
	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xbfd1e5 );

	//create camera
	camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 5000 );
	camera.position.set( 0, 30, 70 );
	camera.lookAt(new THREE.Vector3(0, 0, 0));

	//Add hemisphere light
	let hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.1 );
	hemiLight.color.setHSL( 0.6, 0.6, 0.6 );
	hemiLight.groundColor.setHSL( 0.1, 1, 0.4 );
	hemiLight.position.set( 0, 50, 0 );
	scene.add( hemiLight );

	//Add directional light
	let dirLight = new THREE.DirectionalLight( 0xffffff , 1);
	dirLight.color.setHSL( 0.1, 1, 0.95 );
	dirLight.position.set( -1, 1.75, 1 );
	dirLight.position.multiplyScalar( 100 );
	scene.add( dirLight );

	dirLight.castShadow = true;

	dirLight.shadow.mapSize.width = 2048;
	dirLight.shadow.mapSize.height = 2048;

	let d = 50;

	dirLight.shadow.camera.left = -d;
	dirLight.shadow.camera.right = d;
	dirLight.shadow.camera.top = d;
	dirLight.shadow.camera.bottom = -d;

	dirLight.shadow.camera.far = 13500;

	//Setup the renderer
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setClearColor( 0xbfd1e5 );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	renderer.gammaInput = true;
	renderer.gammaOutput = true;

	renderer.shadowMap.enabled = true;

	}


	function renderFrame(){

	let deltaTime = clock.getDelta();

	renderer.render( scene, camera );

	requestAnimationFrame( renderFrame );

	}

	</script>
	</body>
	</html>