Foundational Code : Blue Towers

<!DOCTYPE html>
<html lang="en">
   <head>
       <title>Blue Towers</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
       <style>
           body {
           margin: 0px;
           }

            body {
               background-color: rgb(5, 141, 209);
               color: rgb(72, 162, 207);
               font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-
           }

            a {
               color: rgba(5, 141, 209);
           }

            button {
           background-color: Transparent;
           border: none;
           color: rgb(98, 187, 214);
           padding: 10px 12px;
           text-align: center;
           text-decoration: wavy;
           display:transparent;
           font-size: 15px;
           letter-spacing: 2px;
           margin: px 5px;  
           cursor: pointer;
           font: 11px 'Lucida Grande', sans-serif;
           
           }    

            #info {
               position: absolute;
               top: 1px;
               width: 100%;
               padding: 1opx;
               font: 11px 'Lucida Grande', sans-serif;
   
           }

            button:hover {
           background-color: rgb(0, 138, 230);
           color: white;
           }

            .buttonsgroup > div {
               display: inline-block;
               *display: inline; /* For IE7 */
               zoom: 1; /* Trigger hasLayout */
               width: 33%;
               text-align: center;
               
           }

        </style>
   </head>

    <body>
       <div id="info" class="buttonsgroup">
           <div><button id="openFullscreen">Expand</button></div>
           <div>Blue Towers</div>
           <div><button id="soundButton">Sound</button></div>
       </div>

        <div id="container"></div>

        <audio loop id="music" preload="auto" style="display: none">
           <source src="sound/RecordingBlueTowers.mp3" type="audio/mpeg">
       </audio>

        <script type="module">

            import * as THREE from './threelib/three.module.js';

            import { FirstPersonControls } from './threelib/FirstPersonControls.js';


           let camera, container, controls, group, scene, renderer, SphereGeometry, posCount, meshHeight, meshWidth;
           let positionalAudio, listener, audioElement;

            const clock = new THREE.Clock();

            init();
           
           animate();

            function init() {

                scene = new THREE.Scene();
               scene.background = new THREE.Color( 0x058dd1);
               scene.fog = new THREE.FogExp2( 0x058dd1, 0.0036 );
                   //0x0073e6,1991e6 0.0029 );

                container = document.getElementById( 'container' );

                renderer = new THREE.WebGLRenderer( );
               renderer.setPixelRatio( window.devicePixelRatio );
               renderer.setSize( window.innerWidth, window.innerHeight );
               document.body.appendChild( renderer.domElement );
               //container.appendChild( renderer.domElement );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
               camera.position.set( 500, 300, 0 );

                // controls

                controls = new FirstPersonControls( camera, renderer.domElement );
               controls.movementSpeed = 40;
               controls.lookSpeed = 0.1;

                /* Get the documentElement (<html>) to display the page in fullscreen */
               var elem = document.documentElement;

                /* View in fullscreen */
               function openFullscreen() {
                   if (elem.requestFullscreen) {
                       elem.requestFullscreen();
                   } else if (elem.webkitRequestFullscreen) { /* Safari */
                       elem.webkitRequestFullscreen();
                   } else if (elem.msRequestFullscreen) { /* IE11 */
                       elem.msRequestFullscreen();
                   }
               }

                const startButton = document.getElementById( 'openFullscreen' );
               startButton.addEventListener( 'click', openFullscreen );

                const soundButton = document.getElementById( 'soundButton' );
               soundButton.addEventListener( 'click', initSound );

                function initSound() {

                    listener = new THREE.AudioListener();
                   camera.add( listener );

                    audioElement = document.getElementById( 'music' );
                   audioElement.play();
                   

                }

                // world


               var geometry = new THREE.BoxGeometry( 1, 1, 1 );
               geometry.translate( 0, 0.5, 0 );
               var material = new THREE.MeshPhongMaterial( { color: 0x0059b3  } );
                   //0x0099e6, flatShading: true } );

                for ( let i = 0; i < 250; i ++ ) {

                    const mesh = new THREE.Mesh( geometry, material );
                   mesh.position.x = Math.random() * 1600 - 800;
                   mesh.position.y = 1;
                   mesh.position.z = Math.random() * 1600 - 800;
                   mesh.scale.x = Math.random() * 30 + 10;
                   mesh.scale.y = Math.random() * 150 + 10;
                   mesh.scale.z = 30;
                   mesh.updateMatrix();
                   mesh.matrixAutoUpdate = false;
                   scene.add( mesh );

                }

                var geometry = new THREE.BoxGeometry( 1, 1, 1 );
               geometry.translate( 0, 0.5, 0 );
               var material = new THREE.MeshPhongMaterial( { color: 0x0080ff, flatShading: true  } );
                   //0x1a4092, flatShading: true } );

                for ( let i = 0; i < 80; i ++ ) {

                    const mesh = new THREE.Mesh( geometry, material );
                   mesh.position.x = Math.random() * 1600 - 800;
                   mesh.position.y = 1;
                   mesh.position.z = Math.random() * 1600 - 800;
                   mesh.scale.x = Math.random() * 30 + 10;
                   mesh.scale.y = Math.random() * 300 + 10;
                   mesh.scale.z = 20;
                   mesh.updateMatrix();
                   mesh.matrixAutoUpdate = false;
                   scene.add( mesh );

                }

                var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
               geometry.translate( 0, 0.5, 0 );
               var material = new THREE.MeshBasicMaterial( { color: 0x0059b3 } );
                   //086e2 } );
                   //0x006bb3 } );

                for ( let i = 0; i < 150; i ++ ) {

                    const mesh = new THREE.Mesh( geometry, material );
                   mesh.position.x = Math.random() * 1600 - 800;
                   mesh.position.y = 1;
                   mesh.position.z = Math.random() * 1600 - 800;
                   mesh.scale.x = 200;
                   mesh.scale.y = 1;
                   mesh.scale.z = 250;
                   mesh.updateMatrix();
                   mesh.matrixAutoUpdate = false;
                   scene.add( mesh );

                }

                geometry = new THREE.SphereGeometry( 1, 60, 30 );
               geometry.translate( 0, 0.5, 0 );
               material = new THREE.MeshBasicMaterial( { color: 0xffffff} );

                for ( let i = 0; i < 20; i ++ ) {

                    const mesh = new THREE.Mesh( geometry, material );
                   mesh.position.x = Math.random() * 1600 - 800;
                   mesh.position.y = 2;
                   mesh.position.z = Math.random() * 1600 - 800;
                   mesh.scale.x = 30;
                   mesh.scale.y = 30;
                   mesh.scale.z = 30;
                   mesh.updateMatrix();
                   mesh.matrixAutoUpdate = false;
                   scene.add( mesh );

                }

                posCount = 0;
               addPainting ('images/Untitled_Artwork10.jpg');

                function addPainting( src ) {
                   var tex;
                   
                   const callbackPainting = function (t) {
                     tex.needsUpdate = true;
                     var geometry, material, texture, mesh, offset, yRotation, randomx;
                     texture = tex;
                     posCount = posCount + 1;
                     randomx = Math.random();
                     offset = posCount / 2;
                     offset = posCount - offset.toFixed(0) * 2;
                     if (offset == 0) {
                         offset = 1;
                         yRotation = -1.5;
                     } else {
                       offset = -1;
                       yRotation = 1.5;
                     }
                     meshHeight = texture.image.height;
                     meshWidth = texture.image.width;
                 
                       //geometry = new THREE.PlaneGeometry(40, 40);
                       material = new THREE.MeshBasicMaterial({
                       roughness: 0,
                       color: 0xffffff,
                       map: texture
                     });

                      
                     geometry = new THREE.BoxBufferGeometry( 20, 20, 1 );

                      mesh = new THREE.Mesh(geometry, material);
                                       
                     mesh.scale.set(1.0, meshHeight / meshWidth, 1.0);
                     mesh.position.y = 40;
                       mesh.position.x = 10 * offset * randomx;
                       mesh.position.z = 10 * posCount;
                       //mesh.rotation.y = - yRotation * randomx;
                     
                     scene.add(mesh);    
                   };
               
                   tex = new THREE.TextureLoader().load( src, callbackPainting );
               }


               // lights

                const dirLight1 = new THREE.DirectionalLight( 0x99ccff);
               dirLight1.position.set( 1, 1, 1 );
               scene.add( dirLight1 );

                const dirLight2 = new THREE.DirectionalLight( 0x001a33);
               //0xff3300);
               dirLight2.position.set( - 1, - 1, - 1 );
               scene.add( dirLight2 );

                const ambientLight = new THREE.AmbientLight( 0x99ccff );
               scene.add( ambientLight );


               //

                window.addEventListener( 'resize', onWindowResize );


               //const gui = new GUI();
               //gui.add( controls, 'screenSpacePanning' );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
               camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {

                requestAnimationFrame( animate );

                //controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

                render();

            }

            function render() {

                controls.update( clock.getDelta() );

                renderer.render( scene, camera );


           }

        </script>

    </body>
</html>