Threejs - Render Order & ZDepth

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));

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

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


var s1 = createShape(0xff0000);
s1.position.z += 0;
//s1.renderOrder = 2;

var s2 = createShape(0x00ff00);
s2.position.z += 1;
//s2.renderOrder = 1;

var s3 = createShape(0x0000ff);
s3.position.z += 2;
//s3.renderOrder = 0;

//s1.position.x += 2;

// ---- end of playground

function createShape(color) {
	// ---- playground here
  var points = [
    new THREE.Vector2(-2,0),
    new THREE.Vector2(-1,1),
    new THREE.Vector2(1,1),
    new THREE.Vector2(2,0)
  ];
  var shape = new THREE.Shape(points);
  var geo = new THREE.ShapeGeometry(shape);
  var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({color: color, transparent: true, opacity: .5}));
  scene.add(mesh);
  return mesh;

}

var render = function () {
  requestAnimationFrame( render );
  //camera.lookAt( scene.position );
  renderer.render( scene, camera );
};

function fti(feet){
	return feet * 12;
}

function createU(offset){
	
}

function setToFullOrbit(orbitControl) {
  // how far you can orbit vertically
  orbitControl.minPolarAngle = 0;
  orbitControl.maxPolarAngle = Math.PI;

  // How far you can dolly in and out ( PerspectiveCamera only )
  orbitControl.minDistance = 0;
  orbitControl.maxDistance = Infinity;

 ...