Javascript 绘制三维对象

我希望通过复制图层并增加这些元素的边距，用javascript绘制一个3D圆柱体。我已尝试在输入中设置元素的高度，并在复制元素的总边距低于设置的元素高度时运行复制功能

提交
$（文档）.ready（函数（）{
var初始保证金=4；
var totalMargin=0；
var i=0；
函数副本（）{
$（“.slice”）.clone（）.appendTo（“.content”）.css（{'margin-top'：totalMargin+“px”}）；
console.log（“克隆”）；
i++；
总保证金=初始保证金+4；
}
函数setH（）{
而（i<（document.getElementById（“userHeight”）.value））{
复制（）；
}
如果（i>100）{
初始裕度=4；
i=0；
}
}
});

跳转到结果：

注释

这个问题引起了我的兴趣，所以我继续看了一会儿。实际上有很多问题，有些是显而易见的，有些是不那么显而易见的。在某种程度上，我注意到了以下问题：

• jQuery没有包括在小提琴中
• 单击事件没有正确连接-它实际上正在尝试提交表单。您需要使用

  e.preventDefault

  停止表单提交。因为您已经在使用jQuery，所以我刚刚连接了jQuery click事件：

  $("#recalculateHeight").click(function (e) {
      e.preventDefault();
      setH();
  });
  

• 由于使用了“全局”变量（例程中未初始化的变量），submit只能工作一次。相反，我将变量声明移动到适当的例程中

• 调用

  $（“.slice”）.clone（）

  克隆页面上的所有切片元素。第一次克隆时，这很好。但在此之后，您将克隆两个元素，然后是三个元素，等等（与页面上的切片元素数量相同）。为了解决这个问题，我创建了一个切片模板，如下所示：

  <div class="slice" id="slice-template" style="display: none"></div>
  

  现在，当您想清除内容节点时，只需调用

  $（“.content”）.empty（）
  

我还对我的小提琴做了一些基于风格的修改，但这些都不能使它工作或不工作，它们只是帮助我阅读代码！好了，就这样！祝你好运

<div class="slice" id="slice-template" style="display: none"></div>

<div class="content">