title: How to draw simple square using BufferGeometry?
body: <p>How can I draw simple square using <code>BufferGeometry</code>? For example <code>BufferGeometry</code> draws 120000 triangles and I want to knock it down to two that form a simple square. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;test app&lt;/title&gt;
      &lt;style&gt;canvas { width: 100%; height: 100% }&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src="three.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var scene = new THREE.Scene();
          var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
  
          var renderer = new THREE.WebGLRenderer();
          renderer.setSize(window.innerWidth, window.innerHeight);
          document.body.appendChild(renderer.domElement);
  
          //var geometry = new THREE.CubeGeometry(1,1,1);
          var triangles = 2;
  
          var geometry = new THREE.BufferGeometry();
          geometry.attributes = {
              index: {
                  itemSize: 1,
                  array: new Uint16Array( triangles * 3 ),
                  numItems: triangles * 3
              },
              position: {
                  itemSize: 3,
                  array: new Float32Array( triangles * 3 * 3 ),
                  numItems: triangles * 3 * 3
              },
              normal: {
                  itemSize: 3,
                  array: new Float32Array( triangles * 3 * 3 ),
                  numItems: triangles * 3 * 3
              },
              color: {
                  itemSize: 3,
                  array: new Float32Array( triangles * 3 * 3 ),
                  numItems: triangles * 3 * 3
              }
          }
  
          var color = new THREE.Color();
  
          var indices = geometry.attributes.index.array;
          var positions = geometry.attributes.position.array;
          var normals = geometry.attributes.normal.array; //not setting normals - is it relevant if there is no light defined?
          var colors = geometry.attributes.color.array;
  
          for ( var i = 0; i &lt; indices.length; i ++ ) {
  
                  indices[ i ] = i % ( 3 * 1 ); // How to set indices????
  
          }
  
          for ( var i = 0; i &lt; positions.length; i += 9 ) {
  
              //I know these will make two triangles at same position, but i want to see them appear first..
              positions[ i ]     = 0;
              positions[ i + 1 ] = 0;
              positions[ i + 2 ] = 0;
  
              positions[ i + 3 ] = 0;
              positions[ i + 4 ] = 1;
              positions[ i + 5 ] = 0;
  
              positions[ i + 6 ] = 1;
              positions[ i + 7 ] = 0;
              positions[ i + 8 ] = 0;
  
              color.setRGB( 55, 202, 55 );
  
              colors[ i ]     = color.r;
              colors[ i + 1 ] = color.g;
              colors[ i + 2 ] = color.b;
  
              colors[ i + 3 ] = color.r;
              colors[ i + 4 ] = color.g;
              colors[ i + 5 ] = color.b;
  
              colors[ i + 6 ] = color.r;
              colors[ i + 7 ] = color.g;
              colors[ i + 8 ] = color.b;
          }           
  
          var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
          var square = new THREE.Mesh(geometry, material);
          scene.add(square);
  
          camera.position.z = -5;
  
          var render = function () {
              requestAnimationFrame(render);
  
              square.rotation.x += 0.1;
              square.rotation.y += 0.1;
  
              renderer.render(scene, camera);
          };
  
          render();
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>