JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div class="note">
    <p>
        If you move the camera slightly to the left (click+drag), the rendering of the cube will switch to correct colors.
        (see stackoverflow-question <a href="http://stackoverflow.com/questions/28543574/three-js-transparent-objects-rendering-in-wrong-order-depending-on-camera-angle">here</a>.)</p>
</div>

CSS

.note { 
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    padding: 5px 20px;
    background: rgba(0,0,0,.3);
}

JavaScript

var camera, cameraControl, scene, light, renderer, geometry, material, mesh;

init();
animate();

function init() {
    renderer = new THREE.WebGLRenderer();
    // this would solve the problem, but also create a whole lot of other problems
    //renderer.sortObjects = false;
    renderer.setClearColor(0xffffff);
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();
    light = new THREE.HemisphereLight( 0xffffff, 0x080820, 1 );
    light.position.set( - 1, 1, - 1 );
    scene.add(light);
    
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000000);    
    camera.position.set( 4600, 4800, -10000);
    
    cameraControl = new THREE.OrbitControls( camera, renderer.domElement );
    

    var plane = new THREE.Mesh(
        new THREE.PlaneGeometry(100000,100000),
        new THREE.MeshLambertMaterial({
            color: 0x2B79DE, transparent:true, opacity:.75
        })
    );
    plane.rotation.x = -Math.PI/2;
    
    var cube = new THREE.Mesh(
      new THREE.BoxGeometry(1000,1000,1000),
      new THREE.MeshLambertMaterial({
          color: 0xF33856, transparent: true, opacity: .2
      })
    );
    
    cube.position.set(3000, 1000, 2000);

    scene.add(camera);
    scene.add(plane);
    scene.add(cube);
}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    cameraControl.update();
    renderer.render(scene, camera);

}