title: Rotate a cube to be isometric
body: <p>I'm following <a href="http://www.petercollingridge.appspot.com/3D-tutorial/rotating-objects" rel="nofollow noreferrer">this rotating cube</a> tutorial and I'm trying to rotate the cube to an isometric perspective (45 degrees, 30 degrees).</p>
  
  <p>The problem is, I think, is that the rotateY and rotateX functions alter the original values such that the two red dots in the middle of the cube (visually) don't overlap. (If that makes any sense)</p>
  
  <p>How can I rotate the cube on it's X and Y axis at the same time so the functions don't effect each other?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const canvas = document.getElementById('stage');
      canvas.width = canvas.parentElement.clientWidth
      canvas.height = canvas.parentElement.clientHeight
      const context = canvas.getContext('2d');
      context.translate(200,200)
  
      var node0 = [-100, -100, -100];
      var node1 = [-100, -100,  100];
      var node2 = [-100,  100, -100];
      var node3 = [-100,  100,  100];
      var node4 = [ 100, -100, -100];
      var node5 = [ 100, -100,  100];
      var node6 = [ 100,  100, -100];
      var node7 = [ 100,  100,  100];
      var nodes = [node0, node1, node2, node3, node4, node5, node6, node7];
  
      var edge0  = [0, 1];
      var edge1  = [1, 3];
      var edge2  = [3, 2];
      var edge3  = [2, 0];
      var edge4  = [4, 5];
      var edge5  = [5, 7];
      var edge6  = [7, 6];
      var edge7  = [6, 4];
      var edge8  = [0, 4];
      var edge9  = [1, 5];
      var edge10 = [2, 6];
      var edge11 = [3, 7];
      var edges = [edge0, edge1, edge2, edge3, edge4, edge5, edge6, edge7, edge8, edge9, edge10, edge11];
  
      var draw = function(){
  
        for (var e=0; e&lt;edges.length; e++){
          var n0 = edges[e][0]
          var n1 = edges[e][1]
          var node0 = nodes[n0];
          var node1 = nodes[n1];
          
          context.beginPath();
          context.moveTo(node0[0],node0[1]);
          context.lineTo(node1[0],node1[1]);
          context.stroke();
        }
  
        //draw nodes
        for (var n=0; n&lt;nodes.length; n++){
          var node = nodes[n];
          context.beginPath();
          context.arc(node[0], node[1], 3, 0, 2 * Math.PI, false);
          context.fillStyle = 'red';
          context.fill();
        }
      }
  
  
      var rotateZ3D = function(theta){
        var sin_t = Math.sin(theta);
        var cos_t = Math.cos(theta);
        for (var n=0; n&lt; nodes.length; n++){
          var node = nodes[n];
          var x = node[0];
          var y = node[1];
          node[0] = x * cos_t - y * sin_t;
          node[1] = y * cos_t + x * sin_t;
        };
      };
  
      var rotateY3D = function(theta){
        var sin_t = Math.sin(theta);
        var cos_t = Math.cos(theta);
  
        for (var n=0; n&lt;nodes.length; n++){
          var node = nodes[n];
          var x = node[0];
          var z = node[2];
          node[0] = x * cos_t - z * sin_t;
          node[2] = z * cos_t + x * sin_t;
        }
      };
  
      var rotateX3D = function(theta){
        var sin_t = Math.sin(theta);
        var cos_t = Math.cos(theta);
  
        for (var n = 0; n&lt; nodes.length; n++){
          var node = nodes[n];
          var y = node[1];
          var z = node[2];
          
          node[1] = y * cos_t - z * sin_t;
          node[2] = z * cos_t + y * sin_t;
        }
      }
  
      rotateY3D(Math.PI/4);
      rotateX3D(Math.PI/6);
  
  
      draw();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#stage {
    background-color: cyan;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="stage" height='500px' width='500px'&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Edit: I should have included a picture to further explain what I'm trying to achieve.  I have a room picture that is isometric (45°,30°) and I'm overlaying it with a canvas so that I can draw the cube on it.  As you can see it's slightly off, and I think its the effect of two compounding rotations since each function alters the original node coordinates.</p>
  
  <p><a href="https://i.stack.imgur.com/ueWrd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ueWrd.png" alt="enter image description here"></a></p>