Foundational Code : Virtual Installation 1

<!DOCTYPE html>
<html lang="en">
   <head>
       <title>Virtual Installation 1</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
   <style type="text/css">
   body {
       margin: 0px;
   }
button {
   background-color: #111;
    border: none;
    color: white;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: px 2px;
    cursor: pointer;
    font: 11px 'Lucida Grande', sans-serif;
}    
   #info {
        position: absolute;
        top: 0px;
        width: 100%;
        padding: 10px;
        font: 11px 'Lucida Grande', sans-serif;
    }
   a:-webkit-any-link {
       color: #2fa1d6;
   }
   #container {

        width: 100%;
       bottom: 0px;
   }
   
   
   </style>
   </head>
   <body>
       <div id="info">
           <button id="startButton">Play</button>
           <a href="https://www.ellafrost.art/" target="_blank" rel="noopener">Back to ellafrost.art</a>
       </div>
       <div id="container"></div>
       
       <audio loop id="music" preload="auto" style="display: none">
           <source src="sound/RecordingWind.mp3" type="audio/mpeg">
       </audio>

        <script type="module">

            import * as THREE from './threelib/three.module.js';
           //import { OBJLoader } from './threelib/OBJloader.js';
           //import { MTLLoader } from './threelib/MTLloader.js';
           import { GLTFLoader } from './threelib/GLTFLoader.js';
           import { DRACOLoader } from './threelib/DRACOLoader.js';
           import { PositionalAudioHelper } from './threelib/PositionalAudioHelper.js';
           
           import { FirstPersonControls } from './threelib/FirstPersonControls.js';
           import { GUI } from './threelib/dat.gui.module.js';
           
           import { Water } from './threelib/Water.js';
           import { Sky } from './threelib/Sky.js';

            let container, stats;
           let camera, scene, renderer;
           let controls, water, sun, MrBlue, currObjNum = 0;
           let meshHeight, meshWidth, posCount, timeToMove;
           let positionalAudio, listener, audioElement, helper;
           
           const objects = [], materials = [];
       
           const clock = new THREE.Clock();
           
           const startButton = document.getElementById( 'startButton' );
           startButton.addEventListener( 'click', initSound );            
           
           init();
           animate();

            function initSound() {
               
               listener = new THREE.AudioListener();
               camera.add( listener );

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

                positionalAudio = new THREE.PositionalAudio( listener );
               positionalAudio.setMediaElementSource( audioElement );
               positionalAudio.setRefDistance( 1 );
               
               helper = new PositionalAudioHelper( positionalAudio, 0.5 );
               positionalAudio.add( helper );
               
               MrBlue.add( positionalAudio );
           }
           
           function init() {

                container = document.getElementById( 'container' );

                //

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

                //

                scene = new THREE.Scene();

                camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
               camera.position.set( 30, 60, 100 );

                //
               
               
               //
           
               sun = new THREE.Vector3();
               
               // Water

                const waterGeometry = new THREE.PlaneBufferGeometry( 15000, 15000 );

                water = new Water(
                   waterGeometry,
                   {
                       textureWidth: 512,
                       textureHeight: 512,
                       waterNormals: new THREE.TextureLoader().load( 'threelib/waternormals.jpg', function ( texture ) {

                            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

                        } ),
                       alpha: 1.0,
                       sunDirection: new THREE.Vector3(),
                       sunColor: 0xffffff,
                       waterColor: 0x001e0f,
                       distortionScale: 3.7,
                       fog: scene.fog !== undefined
                   }
               );

                water.rotation.x = - Math.PI / 2;

                scene.add( water );
               
               const light = new THREE.DirectionalLight('#ffffff', 0.9);
               light.position.set(-20, 0, 100);
               scene.add(light)
               
               // Skybox

                const sky = new Sky();
               sky.scale.setScalar( 15000 );
               scene.add( sky );

                const skyUniforms = sky.material.uniforms;

                skyUniforms[ 'turbidity' ].value = 10;
               skyUniforms[ 'rayleigh' ].value = 2;
               skyUniforms[ 'mieCoefficient' ].value = 0.005;
               skyUniforms[ 'mieDirectionalG' ].value = 0.8;

                const parameters = {
                   inclination: 0.2173,
                   azimuth: 0.2361
               };

                const pmremGenerator = new THREE.PMREMGenerator( renderer );

                function updateSun() {

                    const theta = Math.PI * ( parameters.inclination - 0.5 );
                   const phi = 2 * Math.PI * ( parameters.azimuth - 0.5 );

                    sun.x = Math.cos( phi );
                   sun.y = Math.sin( phi ) * Math.sin( theta );
                   sun.z = Math.sin( phi ) * Math.cos( theta );

                    sky.material.uniforms[ 'sunPosition' ].value.copy( sun );
                   water.material.uniforms[ 'sunDirection' ].value.copy( sun ).normalize();

                    scene.environment = pmremGenerator.fromScene( sky ).texture;

                }

                updateSun();
               
               // Controls

                controls = new FirstPersonControls( camera, renderer.domElement );

                controls.movementSpeed = 120;
               controls.lookSpeed = 0.125;
               controls.lookVertical = true;
               controls.constrainVertical = true;
               controls.verticalMin = 1.1;
               controls.verticalMax = 2.2;

                // Blender OBJ
               const bodyMaterial = new THREE.MeshPhysicalMaterial( {
                   color: 0xff0000, metalness: 0.6, roughness: 0.4, clearcoat: 0.05, clearcoatRoughness: 0.05
               } );

                const detailsMaterial = new THREE.MeshStandardMaterial( {
                   color: 0xffffff, metalness: 1.0, roughness: 0.5
               } );
               const texture = new THREE.Texture( generateTexture() );
               texture.needsUpdate = true;

                materials.push( new THREE.MeshLambertMaterial( { map: texture, transparent: true } ) );
               materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd } ) );
               materials.push( new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true } ) );
               materials.push( new THREE.MeshNormalMaterial() );
               materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, transparent: true, blending: THREE.AdditiveBlending } ) );
               materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd } ) );
               materials.push( new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, map: texture, transparent: true } ) );
               materials.push( new THREE.MeshNormalMaterial( { flatShading: true } ) );
               materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ) );
               materials.push( new THREE.MeshDepthMaterial() );
               materials.push( new THREE.MeshLambertMaterial( { color: 0x666666, emissive: 0xff0000 } ) );
               materials.push( new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x666666, emissive: 0xff0000, shininess: 10, opacity: 0.9, transparent: true } ) );
               materials.push( new THREE.MeshBasicMaterial( { map: texture, transparent: true } ) );

                // Spheres geometry

 

                const dracoLoader = new DRACOLoader();
               dracoLoader.setDecoderPath( './threelib/gltf/' );

                const loader = new GLTFLoader();
               loader.setDRACOLoader( dracoLoader );

                loader.load( '/blender-files/Blob.glb', function ( gltf ) {

                    const carModel = gltf.scene.children[ 0 ];

                    MrBlue = carModel.parent.getObjectByName( 'Sphere' )
                   const material = new THREE.MeshStandardMaterial( { color: 0x606060 } );
                   MrBlue.material = material;
                   
                   MrBlue.scale.set(10.0, 10, 10.0);
                   MrBlue.position.z = -40;
                   MrBlue.position.y = 10;
                   MrBlue.rotation.y = 2;
                   MrBlue.rotation.set( 0, 0, 0 );

                    
                   scene.add( MrBlue );
                   controls.MrBlue = MrBlue;
                   
                   MrBlue.getNextObj = function () {
                       var sec = (2000);
                       var secInterval = 3 * sec;
                   
                       const timer = Date.now();
                       if (timeToMove === undefined) {timeToMove = timer + 1 * sec;}
                       
                       if (timeToMove < timer) {
                           timeToMove = timer + secInterval;
                           var obj;
                           while (true) {
                               currObjNum = currObjNum + 1;
                               if (currObjNum == scene.children.length) {
                                   currObjNum = 0;
                               }
                               obj = scene.children[currObjNum];
                               if (obj.name == 'picture') {            
                               break;
                               } 
                           }

                            var vector = new THREE.Vector3(); 
                           obj.getWorldDirection( vector );

                            MrBlue.lastPosition = MrBlue.position;
                           MrBlue.nextPosition = new THREE.Vector3(); 
                           
                           MrBlue.nextPosition.x = obj.position.x + vector.x*20;
                           MrBlue.nextPosition.y = obj.position.y + vector.y*20;
                           MrBlue.nextPosition.z = obj.position.z + vector.z*20;
                           
                           //var dist = MrBlue.position.distanceTo(MrBlue.nextPosition);
                           //MrBlue.lookAt( obj.position );
                           MrBlue.dist = MrBlue.position.distanceTo(MrBlue.nextPosition);
                           //console.log(dist);                            

                        } else {
                       
                           if (MrBlue.nextPosition) {
                               var vector = new THREE.Vector3(); 
                           
                               vector.x = MrBlue.nextPosition.x - MrBlue.position.x;
                               vector.y = MrBlue.nextPosition.y - MrBlue.position.y;
                               vector.z = MrBlue.nextPosition.z - MrBlue.position.z;
                           
                               var currDist = MrBlue.position.distanceTo(MrBlue.nextPosition);
                               var remainingTime = timeToMove - timer;
                               remainingTime =  1 - remainingTime / secInterval;
                               var remainingDist =  currDist / MrBlue.dist;
                               
                               //console.log(remainingTime);
                               
                               MrBlue.position.x = MrBlue.position.x + vector.x * remainingTime;
                               MrBlue.position.y = MrBlue.position.y + vector.y * remainingTime;
                               MrBlue.position.z = MrBlue.position.z + vector.z * remainingTime;
                           }
                       
                       }
                   
               }                            

                    
                   
               } );
               
               function generateTexture() {

                    const canvas = document.createElement( 'canvas' );
                   canvas.width = 256;
                   canvas.height = 256;

                    const context = canvas.getContext( '2d' );
                   const image = context.getImageData( 0, 0, 256, 256 );

                    let x = 0, y = 0;

                    for ( let i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {

                        x = j % 256;
                       y = ( x === 0 ) ? y + 1 : y;

                        image.data[ i ] = 255;
                       image.data[ i + 1 ] = 255;
                       image.data[ i + 2 ] = 255;
                       image.data[ i + 3 ] = Math.floor( x ^ y );

                    }

                    context.putImageData( image, 0, 0 );

                    return canvas;

                }
       
               // Paintings
               
               posCount = 0;
               addPaintingHexZ (0x005076);
               addPaintingHexZ (0x005076);
               addPaintingHexZ (0x005076);
               addPaintingHexZ (0x005076);
               addPaintingHexZ (0x005076);
               addPaintingHexZ (0x005076);
               addPaintingHexZ (0x005076);
               addPaintingHexZ (0x005076);
               addPaintingHexZ (0x005076);
               addPaintingHexZ (0x005076);
               addPaintingHexZ (0x005076);
               addPaintingHexZ (0x005076);
               addPaintingHexZ (0x107dac);
               addPaintingHexZ (0x107dac);
               addPaintingHexZ (0x107dac);
               addPaintingHexZ (0x107dac);
               addPaintingHexZ (0x107dac);
               addPaintingHexZ (0x107dac);
               addPaintingHexZ (0x107dac);
               addPaintingHexZ (0x107dac);
               addPaintingHexZ (0x107dac);
               addPaintingHexZ (0x107dac);
               addPaintingHexZ (0x189ad3);
               addPaintingHexZ (0x189ad3);
               addPaintingHexZ (0x189ad3);
               addPaintingHexZ (0x189ad3);
               addPaintingHexZ (0x189ad3);
               addPaintingHexZ (0x189ad3);
               addPaintingHexZ (0x189ad3);
               addPaintingHexZ (0x189ad3);
               addPaintingHexZ (0x189ad3);
               addPaintingHexZ (0x189ad3);
               addPaintingHexZ (0x189ad3);
               addPaintingHexZ (0x189ad3);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x1ebbd7);
               addPaintingHexZ (0x71c7ec);
               addPaintingHexZ (0x71c7ec);
               addPaintingHexZ (0x71c7ec);
               addPaintingHexZ (0x71c7ec);
               addPaintingHexZ (0x71c7ec);
               addPaintingHexZ (0x71c7ec);
               addPaintingHexZ (0x71c7ec);
               addPaintingHexZ (0x71c7ec);
               addPaintingHexZ (0x71c7ec);
               addPaintingHexZ (0x71c7ec);
               addPaintingHexZ (0x71c7ec);
               addPaintingHexZ (0x71c7ec);
               addPaintingHexZ (0x71c7ec);
               


               function addPaintingHexZ( hex ) {
                   var geometry, material, texture, mesh, offset, yRotation, randomx;
               
                   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 = 40 + 40 * Math.random();
                   meshWidth = 40 + 80 * Math.random();
                 
                     material = new THREE.MeshBasicMaterial({
                     color: hex
                   });
                     
                   geometry = new THREE.BoxBufferGeometry( meshHeight, meshWidth, 1 );

                    mesh = new THREE.Mesh(geometry, material);
                                       
                   //mesh.scale.set(1.0, meshHeight / meshWidth, 1.0);
                   mesh.position.y = 40;
                   mesh.position.x = 580 * offset * randomx;
                   mesh.position.z = - 80 * posCount;
                   mesh.rotation.y = yRotation * randomx;    
                   mesh.name = 'picture';                  
                   scene.add(mesh);    
                   //console.log(mesh);
               }    
               
               
               posCount = 0;
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff0000);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff4d00);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff7400);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xff9a00);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);
               addPaintingHexX (0xffc100);

                
               function addPaintingHexX( hex ) {
                   var geometry, material, texture, mesh, offset, yRotation, randomx;
               
                   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 = 40 + 40 * Math.random();
                   meshWidth = 40 + 80 * Math.random();
                 
                     material = new THREE.MeshBasicMaterial({
                     color: hex
                   });
                     
                   geometry = new THREE.BoxBufferGeometry( meshHeight, meshWidth, 1 );

                    mesh = new THREE.Mesh(geometry, material);
                                       
                   //mesh.scale.set(1.0, meshHeight / meshWidth, 1.0);
                   mesh.position.y = 40;
                   mesh.position.x = - 80 * posCount;
                   mesh.position.z = 580 * offset * randomx;
                   mesh.rotation.y = 1.5 - yRotation * randomx;    
                   mesh.name = 'picture';                  
                   scene.add(mesh);    
                   
               }    
               
               posCount = 0;
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xfece24);
               addPaintingHexXm (0xf8d91e);
               addPaintingHexXm (0xf8d91e);
               addPaintingHexXm (0xf8d91e);
               addPaintingHexXm (0xf8d91e);                                
               addPaintingHexXm (0xf8d91e);
               addPaintingHexXm (0xf8d91e);                                
               addPaintingHexXm (0xf8d91e);
               addPaintingHexXm (0xf8d91e);                                
               addPaintingHexXm (0xf8d91e);
               addPaintingHexXm (0xf8d91e);                                
               addPaintingHexXm (0xf8d91e);
               addPaintingHexXm (0xf8d91e);                                
               addPaintingHexXm (0xf8d91e);
               addPaintingHexXm (0xf8d91e);                                
               addPaintingHexXm (0xf8d91e);
               addPaintingHexXm (0xf8d91e);                                
               addPaintingHexXm (0xf8dc54);
               addPaintingHexXm (0xf8dc54);
               addPaintingHexXm (0xf8dc54);
               addPaintingHexXm (0xf8dc54);
               addPaintingHexXm (0xf8dc54);
               addPaintingHexXm (0xf8dc54);
               addPaintingHexXm (0xf8dc54);
               addPaintingHexXm (0xf8dc54);                                
               addPaintingHexXm (0xf8dc54);
               addPaintingHexXm (0xf8dc54);
               addPaintingHexXm (0xf8dc54);
               addPaintingHexXm (0xf8dc54);
               addPaintingHexXm (0xf8dc54);
               addPaintingHexXm (0xf8dc54);                
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xffef30);
               addPaintingHexXm (0xfffc02);
               addPaintingHexXm (0xfffc02);
               addPaintingHexXm (0xfffc02);
               addPaintingHexXm (0xfffc02);
               addPaintingHexXm (0xfffc02);
               addPaintingHexXm (0xfffc02);
               addPaintingHexXm (0xfffc02);
               addPaintingHexXm (0xfffc02);
               addPaintingHexXm (0xfffc02);
               addPaintingHexXm (0xfffc02);
               addPaintingHexXm (0xfffc02);
               addPaintingHexXm (0xfffc02);
           
               
               function addPaintingHexXm( hex ) {
                   var geometry, material, texture, mesh, offset, yRotation, randomx;
               
                   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 = 40 + 40 * Math.random();
                   meshWidth = 40 + 80 * Math.random();
                 
                     material = new THREE.MeshBasicMaterial({
                     color: hex
                   });
                     
                   geometry = new THREE.BoxBufferGeometry( meshHeight, meshWidth, 1 );

                    mesh = new THREE.Mesh(geometry, material);
                                       
                   //mesh.scale.set(1.0, meshHeight / meshWidth, 1.0);
                   mesh.position.y = 40;
                   mesh.position.x = 80 * posCount;
                   mesh.position.z = 580 * offset * randomx;
                   mesh.rotation.y = 1.5 + yRotation * randomx;
                   mesh.name = 'picture';                      
                   scene.add(mesh);    
                   
               }        
               
                           
                   
               posCount = 0;
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x234d20);
               addPaintingHexZm (0x36802d);
               addPaintingHexZm (0x36802d);
               addPaintingHexZm (0x36802d);
               addPaintingHexZm (0x36802d);
               addPaintingHexZm (0x36802d);
               addPaintingHexZm (0x36802d);
               addPaintingHexZm (0x36802d);
               addPaintingHexZm (0x36802d);
               addPaintingHexZm (0x36802d);
               addPaintingHexZm (0x36802d);
               addPaintingHexZm (0x36802d);
               addPaintingHexZm (0x77ab59);
               addPaintingHexZm (0x77ab59);
               addPaintingHexZm (0x77ab59);
               addPaintingHexZm (0x77ab59);
               addPaintingHexZm (0x77ab59);
               addPaintingHexZm (0x77ab59);
               addPaintingHexZm (0x77ab59);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xc9df8a);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
               addPaintingHexZm (0xff0f7da);
           
       
               
               function addPaintingHexZm( hex ) {
                   var geometry, material, texture, mesh, offset, yRotation, randomx;
               
                   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 = 40 + 40 * Math.random();
                   meshWidth = 40 + 80 * Math.random();
                 
                     material = new THREE.MeshBasicMaterial({
                     color: hex
                   });
                     
                   geometry = new THREE.BoxBufferGeometry( meshHeight, meshWidth, 1 );

                    mesh = new THREE.Mesh(geometry, material);
                                       
                   //mesh.scale.set(1.0, meshHeight / meshWidth, 1.0);
                   mesh.name = "Picture";
                   mesh.position.y = 40;
                   mesh.position.x = 580 * offset * randomx;
                   mesh.position.z = 80 * posCount;
                   mesh.rotation.y = - yRotation * randomx;    
                   mesh.name = 'picture';                      
                   scene.add(mesh);        
                   
               }                            
               const timer = Date.now() * 0.01;

                
               function getObj() {
                   var tex;
                   for ( let i = 0, l = scene.children.length; i < l; i ++ ) {

                        var obj = scene.children[i];
                       if (obj.name == 'picture') {
                           console.log(obj);
                       }
                       
                       //addMesh( geometry, materials[ i ] );

                    }

                    
               }                            

                
               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;
                 
                       material = new THREE.MeshBasicMaterial({
                       roughness: 0,
                       color: 0xffffff,
                       map: texture
                     });
                     
                     geometry = new THREE.BoxBufferGeometry( 40, 40, 1 );
                     mesh = new THREE.Mesh(geometry, material);
                                       
                     mesh.scale.set(1.0, meshHeight / meshWidth, 1.0);
                     mesh.position.y = 40;
                     mesh.position.x = 180 * offset * randomx;
                     mesh.position.z = - 80 * posCount;
                     mesh.rotation.y = yRotation * randomx;    
                     mesh.name = 'picture';                  
                     scene.add(mesh);    
                   };
               
                   tex = new THREE.TextureLoader().load( src, callbackPainting );
               }


               // GUI

                const gui = new GUI();

                const folderSky = gui.addFolder( 'Sky' );
               folderSky.add( parameters, 'inclination', 0, 0.5, 0.0001 ).onChange( updateSun );
               folderSky.add( parameters, 'azimuth', 0, 1, 0.0001 ).onChange( updateSun );
               folderSky.open();

                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize() {

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

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

            }

            function animate() {

                requestAnimationFrame( animate );
               render();

            }

            function render() {

                const time = performance.now() * 0.001;

                if (MrBlue) {MrBlue.getNextObj();}
               
               water.material.uniforms[ 'time' ].value += 1.0 / 60.0;

                controls.update( clock.getDelta() );
               
               
               renderer.render( scene, camera );
               

            }

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