Threejs - UV - Modifying Position + Rotate

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>
<!--
  /**
   * corrects gl transparency rendering issues when no decking and framing is selected
   * the lower the number, the higher the priority to be rendered first
   */
  public static readonly RENDER_ORDER_DECK_FLOOR = new DeckDefaults(15);

  /**
   * corrects gl transparency rendering issues when no decking and framing is selected
   * the lower the number, the higher the priority to be rendered first
   */
  public static readonly RENDER_ORDER_FRAMING = new DeckDefaults(10);
  
  -->

CSS

body {
  margin:0;
}

JavaScript

var objects = []; 
var scene = new THREE.Scene();

var width = window.innerWidth;
var height = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 35, width/height, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();

renderer.setSize( width, height );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.screenSpacePanning = true;
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(fti(5), fti(5), fti(5)) );
// fix first frame render issue going invisible
camera.lookAt(new THREE.Vector3(0,0,0));

// this textur url comes from a site that doesn't use image protection
// so you can extract the image from a 2dcanvas without tainting the canvas
var imageTextureURL = 'http://1.bp.blogspot.com/-_Rg7AgtX6_E/TbVlFA8l-yI/AAAAAAAAAD4/ipkJlfECQKQ/s400/texturegrid1024.jpg';
var material = new THREE.MeshBasicMaterial();

loadAndApplyTextureToMaterial(1, imageTextureURL, material);

var axisHelper = new THREE.AxesHelper();
//scene.add(axisHelper);

var grid = new THREE.GridHelper(fti(12), 12);
//scene.add(grid);

// the shape
var vec2s = [
	new THREE.Vector2(),
  new THREE.Vector2(0,1),
  new THREE.Vector2(1,1),
  new THREE.Vector2(1,0)
];
var shape = new THREE.Shape(vec2s);
var geo = new THREE.ShapeGeometry(shape);
var mesh = new THREE.Mesh(geo, material);
scene.add(mesh);
mesh.position.z -= .1;
mesh.add(axisHelper);

// create a line display from UV coords
//drawUVs(mesh);

// ---- similuate stretching the geometry by moving its vertices
geo.vertices[1].y = 3;
geo.vertices[2].y = 3;
//geo.verticesNeedUpdate = true;
//mesh.updateMatrixWorld(true);

// update its uvs to match the points
// hardcode for testing - not sufficient - use the updateUVs
/* geo.faceVertexUvs[0].forEach(faceUVs => {
  faceUVs.forEach( uv => {
    if (uv.x === 0 && uv.y === 1) {
      uv.y = 2;
    }
    if (uv.x === 1 && uv.y === 1) {
      uv.y =...