生成javascript和svg 3D框

Question

有人知道有一个很好的库可以通过JavaScript生成SVG 3d框吗？我需要使它们在配置器中可调整大小，但是我不确定从哪里开始。

框将如下所示：

给定A，B，C，我必须能够通过3个字段给它们指定尺寸。如果我有一个小例子，那么我可以发展它。

Answer 1

我怀疑是否有专门针对您想要的库。但这对于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>