Threejs - Shape2d Extrude Texture + Dir Light

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<div id="imgContainer">

</div>

JavaScript

"use strict";
/**
Note: Usiing bevel thickness will offset the position slighly from the origin, 
so becareful when giving it values of more than zero

conclusion:
do not try to use a planar UV when created 2d shapes from threejs's shapeGeometry.
ShapeGeometry already does the UV mapping work for you.
see the other jsfiddle UV Texture.

Loading texture in jsfiddle:
you have to encode the texture to base64

- if image is from your computer
https://www.base64-image.de/

- if image is on the web
http://www.greywyvern.com/code/php/binary2base64/

Note: Once shape geometry is converted to mesh, and you modify the size in any way, the UVs will start to distort unless you recreate or update the UVs.
*/
var scene, renderer, camera, controls;

init();
animate();

function init()
{	
    renderer = new THREE.WebGLRenderer( {antialias:true, alpha: true } );
	var width = window.innerWidth;
	var height = window.innerHeight;

    renderer.setSize (width, height);
    renderer.setClearColor(0x000000, 1);   //using clear background color
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    
	document.body.appendChild (renderer.domElement);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera (60, width/height, 1, 10000);
	camera.position.y = 16;
	camera.position.z = 40;
	camera.lookAt (new THREE.Vector3(0,0,0));
    
  scene.add( camera );

  controls = new THREE.OrbitControls(camera, renderer.domElement);
    
	var gridXZ = new THREE.GridHelper(100, 10, 
  	new THREE.Color(0xffffff), 
  	new THREE.Color(0xffffff)
  );
  
	scene.add(gridXZ);  
  
  //lights
  createDirectionalLight();
  
 	var texture = loadTextureUsingImageDomHack();
  
  var customExtrudePlane = createExtrudedShape(texture);
  // to represent the 2d shape, you flip it -90 on X axis
  customExtrudePlane.rotateX(THREE.Math.degToRad(-90));
  //customExtrudePlane.edges.update();
  //flipNormals(customExtrudePlane);
  
  
  var vec2s = [
  	new THREE.Vector2(0,0),
    new THREE.Vector2(0,120),
  ...