THREE.js Oblique Projection

by Isaiah Odhner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script>

CSS

body {
    background-color: #000;
    margin: 0px;
    overflow: hidden;
}

JavaScript

// THREE.js Cabinet Oblique Projection
// Use an orthographic camera, and apply a shear matrix to its matrix before rendering

// dom
var container = document.createElement( 'div' );
document.body.appendChild( container );

// renderer
var renderer = new THREE.WebGLRenderer( );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

// scene
var scene = new THREE.Scene();

// camera
var d = window.innerWidth / window.innerHeight;
var camera = new THREE.OrthographicCamera( -10 * d, 10 * d, 10, -10, 1, 1000 );
camera.position.set( 0, 0, 20 ); // looking down the z-axis
camera.lookAt( scene.position );

// material
var material = new THREE.MeshNormalMaterial( { overdraw: 0.5 } );

// geometry
var geometry = new THREE.BoxGeometry( 5, 5, 5 );

// mesh
var mesh = new THREE.Mesh( geometry, material ); // centered at the origin
scene.add( mesh );

// shear matrix
// ref: http://www.flipcode.com/documents/matrfaq.html#Q43
//        | 1    Syx  Szx  0 |
//        |                  |
//        | Sxy  1    Szy  0 |
//    M = |                  |
//        | Sxz  Syz  1    0 |
//        |                  |
//        | 0    0    0    1 |
//        |                  |

var alpha = Math.PI / 6; // or Math.PI / 4

var Syx = 0,
    Szx = - 0.5 * Math.cos( alpha ),
    Sxy = 0,
    Szy = - 0.5 * Math.sin( alpha ),
    Sxz = 0,
    Syz = 0;

var matrix = new THREE.Matrix4();

matrix.set(   1,   Syx,  Szx,  0,
            Sxy,     1,  Szy,  0,
            Sxz,   Syz,   1,   0,
              0,     0,   0,   1  );

// apply shear matrix to camera
camera.projectionMatrix.multiply(matrix);
camera.projectionMatrixInverse.getInverse( camera.projectionMatrix );

// render
renderer.render( scene, camera );