Texture Projection

HTML

<html>
	<head>
		<title>Texture Projection</title>
		<style>
			body { margin: 0; position: fixed;}
			canvas { width: 100%; height: 100%; display: block;}
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
		<script>
    
    	var texture = new THREE.TextureLoader().load('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/uv_grid_opengl.jpg');

			var renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );
      
      var scene = new THREE.Scene();
      scene.background = new THREE.Color( 0x696969 );
			var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 100 );
      var controls = new THREE.OrbitControls( camera, renderer.domElement );
      camera.position.set( 0, 0, 4 );
      controls.target.set( 0, 0, 0 );

			var grid = new THREE.GridHelper( 10, 10 );
      var grid2 = new THREE.GridHelper( 10, 10 );
      grid2.rotation.z = Math.PI/2;
      scene.add( grid, grid2 );
      
      var geometry = new THREE.PlaneGeometry( 2, 2 );
      var material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide } );
      var convex = new THREE.Mesh( geometry, material );
      convex.updateWorldMatrix( true );
      scene.add( convex );
      
      var v0 = new THREE.Vector3();
      
			function calculateProjectionUVs() {
      
      	var geo = convex.geometry;

        for ( var i = 0; i < convex.geometry.faceVertexUvs[0].length; i++ ) {

            v0.copy( geo.vertices[ geo.faces[ i ].a ] );
            v0.applyMatrix4( convex.matrixWorld ).project( camera );
            v0.divideScalar( 2 ).addScalar( 0.5 );
            geo.faceVertexUvs[0][i][0].set( v0.x, v0.y );

            v0.copy( geo.vertices[ geo.faces[ i ].b ] );
           ...