Создание трехмерных блоков javascript и svg

// A axis vector
var vx = 180;
var vy = 100;
// Get unit vector for A and B axes
var veclen = Math.sqrt(vx * vx + vy * vy);
vx /= veclen;
vy /= veclen;

// Add a change handler to all the input fields
document.querySelectorAll("input").forEach(function(elem) { elem.addEventListener("input", updateBox); });

// Call updateBox() once at the start to draw the initial box
updateBox();



function updateBox()
{
  var a = document.getElementById("a").value;
  var b = document.getElementById("b").value;
  var c = document.getElementById("c").value;

  // Get the line vector coordinates of the A and B edges
  var ax = a * vx;
  var ay = a * vy;
  var bx = b * vx;
  var by = b * vy;
  // (The c axis is just vertical, so we don't need to multiply by our vx,vy unit vector)

  // Update each of the box sides
  document.getElementById("bottom").setAttribute("points", [0,0, bx,-by, ax+bx,ay-by, ax,ay].join(","));
  document.getElementById("back").setAttribute("points", [bx,-by, bx,-by-c, bx+ax,-by+ay-c, bx+ax,-by+ay].join(","));
  document.getElementById("front").setAttribute("points", [ax,ay, ax,ay-c, ax+bx,ay-by-c, ax+bx,ay-by].join(","));

  // Finally, Update the SVG viewBox so that our whole box is visible
  var box = document.getElementById("box");
  var bbox = box.getBBox();
  var pad = 20;  // amount of padding around the box
  box.setAttribute("viewBox", [bbox.x-pad, bbox.y-pad, bbox.width+2*pad, bbox.height+2*pad].join(" "));
}

span + span { padding-left: 3em; }
input { width: 60px; }
svg {
  width: 500px;
  background-color: linen;
}

#bottom { fill: #787878; }
#back { fill: #9f9f9f; }
#front { fill: #b5b5b5; }

<p>
  <span>A <input type = "text" id = "a" value = "206"/></span>
  <span>B <input type = "text" id = "b" value = "328"/></span>
  <span>C <input type = "text" id = "c" value = "55"/></span>
</p>


<svg id = "box">
  <polygon id = "bottom" points = ""/>
  <polygon id = "back" points = ""/>
  <polygon id = "front" points = ""/>
</svg>