Three.js 用于图像大散点图的WebGL与CSS3D

我正在构建一个web应用程序，它将大量图像缩略图显示为3D云，并提供单击单个图像以启动大视图的能力。我在CSS3D中使用three.js成功地做到了这一点，为每个缩略图创建了three.CSS3DObject，然后将缩略图附加为svg:image

它适用于多达1200个缩略图，然后性能开始下降（非常低的FPS和较长的加载时间）。当你点击2500个缩略图时，它就不可用了。理想情况下，我希望使用超过10k的缩略图

---

据我所知，通过将每个缩略图创建为具有纹理的WebGL网格，我将能够实现相同的结果。不过，我是three.js的初学者，所以在我投入这项工作之前，我希望得到一些指导，说明我是否可以期望性能更好，或者我只是对浏览器中的3D要求太高了？

就渲染而言，CSS3对于渲染相当多的“精灵”来说应该是相对合适的。但10公里可能太多了

不过，WebGL可能是一个更好的选择。您还可以考虑进一步的优化，将缩略图存储在atlas纹理中或诸如此类

但渲染只是其中的一部分。如果不小心处理，事件处理可能成为严重的瓶颈

我不知道您是如何处理鼠标时钟事件和向全尺寸图像的过渡的，但是将事件侦听器附加到每个2.5k+对象上可能不是一个好的选择。使用纯WebGL，您可以使用imagespace检测单击的对象。使用不同的id/颜色对每个磁贴进行编码，并使用该id/颜色确定单击的内容。我想WebGL/CSS3D组合也可以使用这种方法

---

为了回答这个问题，WebGL应该处理10k罚款。如果你的矩形很大，并且在屏幕上占据了很大的比例，也许你需要考虑一些性能优化，但是如果出现问题，有办法解决。

考虑到成熟的3d引擎，2500个缩略图一点也不重要。这也是我的想法-我对性能感到惊讶。我的代码中完全可能存在一些低效的东西。2500个缩略图将扼杀性能。游戏引擎快速运行的方式是优化它们所绘制的内容！他们尽量少画画。它们将纹理组合到文本图集中，将网格组合到大型网格中。他们将抽签通知降至<5000。所以，如果你想显示10k图像，你需要结合网格和纹理。即使是本机程序集也不能很好地处理10k单独纹理和10k绘制调用。我建议使用精灵而不是CSS3D元素。使用HTML5画布方法创建精灵纹理。你应该能够比2.5公里高出很多。精灵就是答案！我刚切换到使用精灵和WebGLRenderer，10K缩略图一点问题都没有！虽然我确实失去了所有的交互性，但我认为这是可以修复的。我正在使用光线投射来确定鼠标单击是否与对象相交，我认为这比您所说的附加事件侦听器更有效。