BufferGeometry render order

by ccyang

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>
<script id="vertexShader" type="x-shader/x-vertex">
		attribute vec4 color;
  	varying vec4 vColor;
  	void main()	{
    	vColor = color;
    	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );	
  	}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
		varying vec3 vPosition;
		varying vec4 vColor;
		void main()	{
			vec4 color = vec4( vColor );
			gl_FragColor = color;
		}
</script>

JavaScript

var scene, camera, renderer, controls, geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 20;
    scene.add(camera);

		geometry = new THREE.BufferGeometry();
    var vertexPositions = [
    	[-1.0, -1.0,  10.0],
      [ 1.0, -1.0,  10.0],
      [ 1.0,  1.0,  10.0],
    
      [-1.0, -1.0,  0.0],
      [ 1.0, -1.0,  0.0],
      [ 1.0,  1.0,  0.0],

      [ 1.0,  1.0,  0.0],
      [-1.0,  1.0,  0.0],
      [-1.0, -1.0,  0.0],
      
      [-1.0, -1.0,  5.0],
      [ 1.0, -1.0,  5.0],
      [ 1.0,  1.0,  5.0],

      [ 1.0,  1.0,  5.0],
      [-1.0,  1.0,  5.0],
      [-1.0, -1.0,  5.0],
      
      [ 1.0,  1.0,  10.0],
      [-1.0,  1.0,  10.0],
      [-1.0, -1.0, 	10.0],
    ];
		var vertices = new Float32Array( vertexPositions.length * 3 );

    for ( var i = 0; i < vertexPositions.length; i++ )
    {
      vertices[ i*3 + 0 ] = vertexPositions[i][0];
      vertices[ i*3 + 1 ] = vertexPositions[i][1];
      vertices[ i*3 + 2 ] = vertexPositions[i][2];
    }

    geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
    
    var colors = new Float32Array( vertexPositions.length * 4);
  	for ( var i = 0; i < vertexPositions.length; i++ ) {
    	colors[ 4*i     ] = 1.0;
    	colors[ 4*i + 1 ] = 0.0;
    	colors[ 4*i + 2 ] = 0.0;
    	colors[ 4*i + 3 ] = 0.2;
  	}  
  	geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 4 ) );

    material = new THREE.ShaderMaterial( {
      vertexShader: document.getElementById( 'vertexShader' ).textContent,
      fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
      side: THREE.DoubleSide,
			transparent: true
		});
    
    mesh = new THREE.Mesh( geometry, material );
  	console.log(mesh);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,...