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

var mesh, renderer, scene, camera, controls;



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

    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 150, 100, 150 );
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    controls = new THREE.OrbitControls( camera, document.body );
    
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 80, 80, 80 );
    scene.add( light );
  
    scene.add( new THREE.AxesHelper( 20 ) );
    
  
  
  const loader = new THREE.TextureLoader;

    var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
  geometry.rotateX( -90 * THREE.Math.DEG2RAD );
  geometry.translate(50, 0, 50)
  
    // Patch via onBeforeCompile

    var material = new THREE.MeshPhongMaterial({
      map: loader.load('https://threejs.org/examples/textures/brick_diffuse.jpg'),
      
      onBeforeCompile: function(shader) {
        
        // Use string.replace or this helper https://github.com/Fyrestar/ShaderMaterialExtend
        
        THREE.patchShader(shader, {
          
          header: 'uniform sampler2D tDecal[3]; uniform vec4 uDecal[3];',
          
          fragment: {
              '#include <fog_fragment>': `

              vec4 sc = vec4(0.0);

              vec2 offset = uDecal[0].xy + vUv / uDecal[0].zw;
              vec4 c = texture2D(tDecal[0], offset);

              offset = uDecal[1].xy + vUv / uDecal[1].zw;
              sc = texture2D(tDecal[1], offset);
              c = mix(c, sc, sc.a);

              offset = uDecal[2].xy + vUv / uDecal[2].zw;
              sc = texture2D(tDecal[2], offset);
              c = mix(c, sc, sc.a);

              gl_FragColor = mix(gl_FragColor, c, c.a);

`  
          },
          
          uniforms: {
            uDecal: [
              new THREE.Vector4(-0.4, -0.6, .3, .3),
              new THREE.Vector4(-0.45, -0.5, .3, .3),
              new THREE.Vector4(-0.8, -0.2, .5, .5)
            ],
            tDecal: [
              loader.load('https://threejs.org/examples/textures/sprite0.png'),
              loader.load('https://threejs.org/examples/textures/sprite1.png'),
              loader.load('https://threejs.org/examples/textures/sprite.png')
            ]
          }
          
        });
        
      }
    });

    mesh = new THREE.Mesh( geometry, material );
  
    scene.add( mesh );

  function animate() {

      requestAnimationFrame( animate );

      renderer.render( scene, camera );

  }



animate();