VertexColors + BufferGeometry

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">


</script>

JavaScript

var scene, renderer, camera;
var cube;
var controls;

init();
animate();

function init() {
  var WIDTH = window.innerWidth;
  var HEIGHT = window.innerHeight;
  var aspect = WIDTH / HEIGHT;
  var gs = 1;
  var d = gs;

  renderer = new THREE.WebGLRenderer(antialias = true);
  renderer.setSize(WIDTH, HEIGHT);
  renderer.setClearColor(0xeeeeee);
  renderer.shadowMap.Type = THREE.PCFSoftShadowMap;
  renderer.setPixelRatio(window.devicePixelRatio);

  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  var ambient = new THREE.AmbientLight(0xffffff, 0.8);
  scene.add(ambient);

  camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, 0.1, 1000);
  camera.position.set(gs, gs, gs);



/*
  var data = [
    0.66259765625,
    0.67578125,
    0.66650390625,
    0.65185546875,
    0.6513671875,
    0.6552734375,
    0.65234375,
    0.64453125,
    0.642578125,
    0.6455078125,
    0.64306640625,
    0.63916015625,
    0.6455078125,
    0.65869140625,
    0.6484375,
    0.63525390625
  ];
*/

  var material = new THREE.MeshPhongMaterial({
    //    wireframe: true,
    //color: 0xff0000,
    // vertexColors: THREE.FaceColors,
    vertexColors: THREE.VertexColors, // <======== NEW
    shading: THREE.FlatShading,
    side: THREE.DoubleSide
  });

  var tg = new THREE.PlaneBufferGeometry(1, 1, 1,1);//3, 3);// <======== NEW
  tg.rotateX(-Math.PI / 2);
  var vertices = tg.attributes.position.array;

  /*  using auto vertices now
  for (var i = 0, j = 0, l = vertices.length; i < l; i++, j += 3) {
    vertices[j + 1] = data[i];
  }
  */
  //==================== NEW SECTION ==========================
  var num_Color_slots = 3;
	myColors = new Float32Array( 12 ); //... 3 slots * 4 vertices = 12
  //... only 4 vertices now, so just need 12 color values.
 //... RGB triplets, each ranging between 0.0 and 1.0
 //... decimal points optional for values: 0 and 1.
  var colorData = 
  [
  1.0, 0.0, 0.0,
  1,0,1,
  1,1,0,
  1,0,1,
  ]
  
  for...