Javascript 访问3d多维数据集中的对象时出现问题

我的链接：

我有一个3d立方体，使用的是zachstronaut演示的变体 （链接：）。它使用javascript、translate3d、scale3d等

我尝试在css文件中分配不同的z索引值，但没有成功。我可以访问多维数据集外部的对象（可以通过悬停效果看到），但不能访问多维数据集内部的对象。我有一种预感，这是因为它没有像pre3d.js那样执行z排序类型的功能。我想知道是否有人可以提供一些见解，我应该在哪里寻找解决方案

对象坐标是随机生成的，因此可能需要刷新一次或两次才能获取多维数据集中的某些对象

谢谢

编辑：

---

只有在safari和chrome dev中测试过，Webkit才会忽略任何定义了translate3d的对象的z索引，这在逻辑上是应该的。z指数是指2D世界，就像拿一堆纸说“这张在上面”——你仍然有一个平面。不幸的是，如果您希望能够在框中选择一个“星”，那么您几乎是运气不佳，因为您使用的是HTML节点

通常的做法是使用点击贴图——基本上每个对象渲染两次。正常一次，单色一次，无阴影等。第二次渲染从不显示，仅用于告诉用户单击的内容。您可以从他们单击的位置获取颜色，该颜色映射到特定对象。如果您使用的是canvas，您可以这样做，只需在第二次渲染时更改渲染顺序

因为您使用的是HTML节点，所以不能这样做。您有两个选择：

• 您可以根据视口旋转和星星的x/y/z位置计算鼠标移动时哪个星星在鼠标下
• 您可以尝试上述方法，方法是覆盖相同的渲染，而不使用立方体，并且星星的不透明度为0%。新渲染中的每一颗星都将映射到现有渲染中的一颗星，这样就可以轻松地将鼠标悬停在检测上

---

发布结果！：）

首先，我很高兴你发现我的演示很有趣

如果你试图在3D CSS3立方体中的对象上进行悬停或捕捉单击事件，你不会有太多的运气，原因与在另一个div下面的div上捕捉悬停或单击事件完全相同。。。在HTML中，所有DOM事件都会转到最顶端的DOM节点。如果一个div与另一个div重叠，则不能单击下面的div。3D多维数据集中的所有内容都位于另一个DOM节点的“下方”

事情变得更加复杂，因为您在3D空间中获取对象，并要求用户使用2D输入设备（鼠标）在2D平面（浏览器窗口）上与它们交互

您可以隐藏立方体的面，以便它们不会阻止用户的单击。你可以像克沃尔夫斯建议的那样做

对不起，我帮不上忙了。。。HTML有点让我们失望。欢迎来到前沿