Генерируйте javascript и svg 3D-блоки

Question

Кто-нибудь знает хорошую библиотеку для создания SVG 3d-блоков с помощью JavaScript?Мне нужно сделать их изменяемого размера в конфигураторе, но я не уверен, с чего начать.

Ящики будут выглядеть так:

И учитывая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>