Texture Projection

by neonDog

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('http://mbnsay.com/rayys/images/1K_UV_checker.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({ side: THREE.DoubleSide, map: texture,
      
      	onBeforeCompile: function(shader) {
        
        shader.fragmentShader = shader.fragmentShader.replace(
    `#include <map_fragment>`,
    `#ifdef USE_MAP

      vec4 texelColor = texture2D( map, gl_FragCoord.xy / 1000.0 );

      texelColor = mapTexelToLinear( texelColor );
      diffuseColor *= texelColor;

    #endif
    
    `);

        
        }
      });
      
      var convex = new THREE.Mesh( geometry, material );
      //convex.updateWorldMatrix( true );
      scene.add( convex );
      
      var v0 = new THREE.Vector3();
      
			function calculateProjectionUVs() {
      	return;
      	var geo = convex.geometry;

        for ( var i = 0; i <...