shear problem fixed

by fiddleuser04

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<canvas id='canvas'></canvas>

CSS

html{
  height:100%;
}
body{
  height: 100%;
}
canvas{
  height: 100%;
  width: 100%;
}

JavaScript

let canvas, scene, renderer, camera, cube;

const shearMatrix = new THREE.Matrix4();

function matrix2String(m){
  if (m instanceof THREE.Matrix4){
    const e = m.elements;
    return `${e[0]} ${e[4]} ${e[8]} ${e[12]}\n` +
           `${e[1]} ${e[5]} ${e[9]} ${e[13]}\n` +
           `${e[2]} ${e[6]} ${e[10]} ${e[14]}\n` +
           `${e[3]} ${e[7]} ${e[11]} ${e[15]}`;
  } else if(m instanceof THREE.Matrix3){
    const e = m.elements;
    return `${e[0]}  ${e[3]} ${e[6]}\n`   +
           `${e[1]}  ${e[4]} ${e[7]}\n`   +
           `${e[2]}  ${e[5]} ${e[8]}`;
  } else if(m instanceof THREE.Vector3){
    const a = m.toArray();
    return `${a[0]}\n`+
           `${a[1]}\n`+
           `${a[2]}`;
  } else {
    throw 'unknown type'; 
  }
}

function initScene(){
  scene = new THREE.Scene();
  scene.add(new THREE.AxesHelper(4));
  const size = 4;
  const divisions = 4;
  const gridHelperXZ = new THREE.GridHelper( size, divisions );
  scene.add(gridHelperXZ);
  const gridHelperXY = new THREE.GridHelper( size, divisions );
  gridHelperXY.rotation.x = Math.PI/2;
  scene.add(gridHelperXY);
  scene.add(new THREE.AmbientLight( 0xffffff ));
}

function initCamera() {
  camera = new THREE.PerspectiveCamera(70, 1, 1, 10000);
  scene.add(camera);
  camera.position.set(6, 4, 3); 
}

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

function doWindowResize(){
  setCanvasResolution();
  setRendererSize();
  setCameraAspect();
}

function setCanvasResolution(){
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
}

function setRendererSize(){
  renderer.setSize(canvas.width, canvas.height, false);
}

function setCameraAspect(){
  camera.aspect = canvas.clientWidth / canvas.clientHeight;
  camera.updateProjectionMatrix();
}

function initCube() {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  geometry.translate(0.5, 0.5, 0.5);
  cube = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
 ...