Three.js image texture on custom geometry

by Ben Winding

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>

JavaScript

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;
    scene = new THREE.Scene();
    /// MATERIAL
    var texture = new THREE.TextureLoader().load( "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/crate.gif" );
		texture.repeat.set(0.5, 0.5);
    texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
    var material = new THREE.MeshBasicMaterial( { 
    	map: texture,
      side: THREE.DoubleSide
    } );
	
  // TRIANGLE
    var geometry2 = new THREE.Geometry();
    var v1 = new THREE.Vector3(0,200,0);
    var v2 = new THREE.Vector3(0,0,-100);
    var v3 = new THREE.Vector3(0,0,100);
    geometry2.vertices.push(v1);
    geometry2.vertices.push(v2);
    geometry2.vertices.push(v3);
    geometry2.faces.push( new THREE.Face3( 0, 1, 2 ) );
    assignUVs(geometry2);
    meshCustom = new THREE.Mesh(geometry2, material);
    scene.add(meshCustom);
    
    // CUBE
		var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    
renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function assignUVs(geometry) {
    geometry.faceVertexUvs[0] = [];
    geometry.faces.forEach(function(face) {
        var components = ['x', 'y', 'z'].sort(function(a, b) {
            return Math.abs(face.normal[a]) > Math.abs(face.normal[b]);
        });

        var v1 = geometry.vertices[face.a];
        var v2 = geometry.vertices[face.b];
        var v3 = geometry.vertices[face.c];

        geometry.faceVertexUvs[0].push([
            new THREE.Vector2(v1[components[0]], v1[components[1]]),
            new...