Reworked

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
  function GridBoxGeometry(geometry, independent) {
    if (!(geometry instanceof THREE.BoxBufferGeometry)) {
      console.log("GridBoxGeometry: the parameter 'geometry' has to be of the type THREE.BoxBufferGeometry");
      return geometry;
    }
    independent = independent !== undefined ? independent : false;

    let newGeometry = new THREE.BoxBufferGeometry();
    let position = geometry.attributes.position;
    newGeometry.attributes.position = independent === false ? position : position.clone();

    let segmentsX = geometry.parameters.widthSegments || 1;
    let segmentsY = geometry.parameters.heightSegments || 1;
    let segmentsZ = geometry.parameters.depthSegments || 1;

    let startIndex = 0;
    let indexSide1 = indexSide(segmentsZ, segmentsY, startIndex);
    startIndex += (segmentsZ + 1) * (segmentsY + 1);
    let indexSide2 = indexSide(segmentsZ, segmentsY, startIndex);
    startIndex += (segmentsZ + 1) * (segmentsY + 1);
    let indexSide3 = indexSide(segmentsX, segmentsZ, startIndex);
    startIndex += (segmentsX + 1) * (segmentsZ + 1);
    let indexSide4 = indexSide(segmentsX, segmentsZ, startIndex);
    startIndex += (segmentsX + 1) * (segmentsZ + 1);
    let indexSide5 = indexSide(segmentsX, segmentsY, startIndex);
    startIndex += (segmentsX + 1) * (segmentsY + 1);
    let indexSide6 = indexSide(segmentsX, segmentsY, startIndex);

    let fullIndices = [];
    fullIndices = fullIndices.concat(indexSide1);
    fullIndices = fullIndices.concat(indexSide2);
    fullIndices = fullIndices.concat(indexSide3);
    fullIndices = fullIndices.concat(indexSide4);
    fullIndices = fullIndices.concat(indexSide5);
    fullIndices = fullIndices.concat(indexSide6);

    newGeometry.setIndex(fullIndices);

    function indexSide(x, y, shift) {
      let indices = [];
      for (let i = 0; i < y + 1;...

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var texture = new THREE.TextureLoader().load( 'https://scontent-sea1-1.cdninstagram.com/vp/dc5876b0b280911eb2003bf4af3e8fdd/5DFDFE6C/t51.2885-15/sh0.08/e35/s750x750/69165802_2255832114545773_18288050518227275_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&_nc_cat=101' );

videoTex.volume = 0;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.set(2, 1, 2).setLength(15);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x202020);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var projCamera = camera.clone();
projCamera.updateMatrixWorld();

var helper = new THREE.CameraHelper( projCamera );
scene.add( helper );

var material = new THREE.ShaderMaterial({
  	uniforms: {
    	baseColor: {value: new THREE.Color(0xcccccc)},
      cameraMatrix: { type: 'm4', value: projCamera.matrixWorldInverse },
      projMatrix: { type: 'm4', value: projCamera.projectionMatrix },
      texture: {value: texture}
    },
    vertexShader: `
    	
      varying vec4 vWorldPos;
    	
      void main() {
      
        vWorldPos = modelMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * viewMatrix * vWorldPos;
        
      }
      
    `,
    fragmentShader: `
    
    	uniform vec3 baseColor;
      uniform sampler2D texture;
      uniform mat4 cameraMatrix;
      uniform mat4 projMatrix;
      
      varying vec4 vWorldPos;
      
    	void main() {
      
      	vec4 texc = projMatrix * cameraMatrix * vWorldPos;
        vec2 uv = texc.xy / texc.w / 2.0 + 0.5;
        
      	gl_FragColor = texture2D(texture, uv);
        
      }
    `,
    side: THREE.DoubleSide
  });

var screen = new THREE.Mesh(new THREE.BoxBufferGeometry(16, 9, 2), material); 
var screen2 = new THREE.Mesh(new THREE.BoxBufferGeometry(500, 300,...