body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

// Simple three.js example

var texture_image = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z"/%3E%3Cpath d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E';


//var texture_image = 'http://www.dimmicomefare.it/wp-content/uploads/quadretti.jpg';

//var texture_image = '';

var mesh, renderer, scene, camera, controls;

function getScaledTexture(geometry,fitTo) {
    var texture = new THREE.TextureLoader().load( texture_image );
	  texture.wrapS = THREE.RepeatWrapping;
	  texture.wrapT = THREE.RepeatWrapping;
    texture.mapping = THREE.CubeUVReflectionMapping;
  
    geometry.computeBoundingBox ();
    var bbox = geometry.boundingBox;
    var dX = Math.abs(bbox.max.x - bbox.min.x);
    var dY = Math.abs(bbox.max.y - bbox.min.y);
    var dZ = Math.abs(bbox.max.z - bbox.min.z);
  
  
    var repeat = Math.max(dX,dY,dZ) / fitTo;
  
		texture.repeat.set( repeat , repeat );
    return texture;
}

function getScaledMaterial(geometry,fitTo) {
    
   return new THREE.MeshPhongMaterial( {
        color: 0x00ffff, 
        flatShading: true,
        transparent: false,
        opacity: 0.7,
        map: getScaledTexture(geometry,fitTo),
      
    } );  
}


init();
animate();

function scaleTexture(mesh,fitTo) {
    mesh.geometry.computeBoundingBox ();
    var bbox = mesh.geometry.boundingBox;
    var dX = Math.abs(bbox.max.x - bbox.min.x);
    var dY = Math.abs(bbox.max.y - bbox.min.y);
    var dZ = Math.abs(bbox.max.z - bbox.min.z);
  
  
    console.log('max: ', Math.max(dX,dY,dZ) , 'fit to:' ,fitTo);
    var repeat = Math.max(dX,dY,dZ) / fitTo;
  
  
    if (mesh.material.map) {
      console.log('old texture',mesh.material.map);
      var newTexture = mesh.material.map.clone();
      var newMaterial = mesh.material.clone();
      
      //newTexture.repeat.set(repeat,repeat);
      console.log('new texture',newTexture);

      newMaterial.map = newTexture;
      
      mesh.material = newMaterial;
      mesh.material.needsUpdate = true
      mesh.needsUpdate = true;
    }

    renderer.render( scene, camera );
}

function init() {

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

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 20, 20, 20 );

    // controls
    controls = new THREE.OrbitControls( camera );
    
    // ambient
    scene.add( new THREE.AmbientLight( 0x888888 ) );
    
    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20, 20, 0 );
    scene.add( light );
    
    // axes
    scene.add( new THREE.AxesHelper( 20 ) );


  
  
    // material
    
  
    var geometry = new THREE.PlaneBufferGeometry( 1 , 1 , 1 );
		var plane = new THREE.Mesh( geometry, getScaledMaterial(geometry,1) );
		plane.rotation.x=-0.5*Math.PI;
		plane.position.set(-4.5,0,1.5);
    scene.add( plane );
  
  
  
    var geometry = new THREE.PlaneBufferGeometry( 2 , 6 , 1 );
		var plane = new THREE.Mesh( geometry, getScaledMaterial(geometry,1) );
		plane.rotation.x=-0.5*Math.PI;
		plane.position.set(-3,0,1);  
    scene.add( plane );
   
  
  
    var geometry = new THREE.PlaneBufferGeometry( 4 , 4 , 1 );
		var plane = new THREE.Mesh( geometry, getScaledMaterial(geometry,1) );
		plane.rotation.x=-0.5*Math.PI;
		plane.position.set(0,0,0);  
    scene.add( plane );
  
    var geometry = new THREE.BoxGeometry( 2, 5, 2 );
    var box = new THREE.Mesh( geometry, getScaledMaterial(geometry,1) );
    box.position.set(0,0,-3);  
    scene.add( box );
  
      var geometry = new THREE.BoxGeometry( 3, 3, 3 );
    var box = new THREE.Mesh( geometry, getScaledMaterial(geometry,1) );
    box.position.set(3.5,0,0);  
    scene.add( box );
  
    var geometry = new THREE.CylinderGeometry( 3, 3, 4, 32 );
      var box = new THREE.Mesh( geometry, getScaledMaterial(geometry,1) );
    box.position.set(3.5,-0.5,4.5);  
    scene.add( box );
}

function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );

}