创建3D立方体

Question

我正在尝试创建一个由3D立方体堆叠而成的结构。结构中的每个元素（立方体）都是难缠的。在鼠标悬停事件中，单个多维数据集具有“反弹”效果，让用户知道该多维数据集是难处理的。鼠标单击事件时，模式弹出窗口将显示有关各个多维数据集的信息。

我已经能够创建2D版本，但是想知道什么是创建3D版本的最佳方法。当前使用画布元素绘制正方形（多维数据集的2d版本）。我试图在每个画布元素上添加框阴影，但是意识到我可能只能对div元素而不是画布元素这样做。

这可能吗？

#canvas .box-shadow-3d{
box-shadow: 1px 1px 0px Black,
            2px 2px 0px Black,
            3px 3px 0px Black,
            4px 4px 0px Black,
            5px 5px 0px Black,
            6px 6px 0px Black;

}

还是我需要做所有的数学运算才能创建这些多维数据集？还是使用div元素和阴影框会更好？

这就是我的想法：-

https://jsfiddle.net/teg0h13k/6/

Answer 1

我建议学习的是Three.js。这是一个功能强大的库，专门用于在javascript和html上绘制多维数据集和3d对象。我创建的示例如下所示。

https://cloudynet.tk/projects/three/code.html