title: Emulate isometric rendering properly in Three.js
body: <p>I'm currently working on a small game, just to kill time - I have been doing most of the rendering with CSS3 transforms, etc
  <a href="https://i.stack.imgur.com/UKJWZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UKJWZ.png" alt="old code"></a>)
  (the code of this version is <a href="https://github.com/EXio4/shadow-hunter/commit/ad78b058ef913d93f133133ed3529813e5a1ad9c" rel="nofollow noreferrer">here</a>)</p>
  
  <p>So, now I'm trying to rewrite this into a more powerful way with the goal of allowing more stuff on the virtual world (efficient light, weather, shadows, day-night cycles, etc) in a less CPU-intensive way..</p>
  
  <p>Anyway, the problem is my vast <strong>non</strong>-knowledge of 3D graphics, so with some trial and error I've managed to get
  <a href="https://i.stack.imgur.com/07ZLt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/07ZLt.png" alt="new code"></a>)
  But still far from what I have currently achieved with CSS transforms, at this moment, <a href="https://github.com/EXio4/shadow-hunter/tree/d40e8cf997ce64552b29820169898e087bf5ff76" rel="nofollow noreferrer">this is what I have so far (code-wise)</a>, when it comes to the rewrite</p>
  
  <p>The code which handles the game logic, is still the same, and I'm working on wrappers over three.js, these are in src/render, in particular, <a href="https://github.com/EXio4/shadow-hunter/blob/d40e8cf997ce64552b29820169898e087bf5ff76/src/render/Camera.js#L17-L19" rel="nofollow noreferrer">Camera</a>:</p>
  
  <pre><code>  const camera = this.props.ctx.renderer.camera
    camera.position.set( lookAt[0]+20, 20, lookAt[1]+20)
    camera.lookAt(lookAt[0], 0, lookAt[1])
  </code></pre>
  
  <p>and in <a href="https://github.com/EXio4/shadow-hunter/blob/d40e8cf997ce64552b29820169898e087bf5ff76/src/render/Renderer.js#L53-L57" rel="nofollow noreferrer">Renderer</a>, I've got:</p>
  
  <pre><code>  let d = 15
    this.camera = new THREE.OrthographicCamera(-d, d, d, -d, 0.1, 1000)
  
    this.camera.position.set( 30, 30, 30 ); // all components equal
    this.camera.lookAt(new THREE.Vector3(0,0,0))
  </code></pre>
  
  <p>(d=20 still looks pretty different)</p>
  
  <p>The code there is basically taken verbatim <a href="https://stackoverflow.com/questions/23450588/isometric-camera-with-three-js">this answer</a></p>
  
  <p>My current goal is basically to get a similar render to what I currently have with CSS3 transforms, using three.js. </p>
  
  <p><strong>Fixed it with manthrax's help</strong></p>
  
  <p><strong>Code which solves this:</strong></p>
  
  <pre><code>cube.rotation.x = Math.PI * -0.5
  </code></pre>
  
  <p><strong>On the tiles</strong></p>