how can I create an axonometric oblique / cavalier / cabinet with threejs?

Question

I found examples on how to create (axonometric) isometric camera in Isometric camera with THREE.js, but how can I create an axonometric oblique?

Answer 1

You can render a scene with an oblique cabinet perspective using a work-around in which the camera is an orthographic one, and the geometry of your mesh is skewed with a shear matrix before rendering.

// create shear matrix
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 geometry                  
mesh.geometry.applyMatrix( matrix ); // this is the work-around

Here is a fiddle.

three.js r.72