我正在构建一个Web应用程序，它将大量图像缩略图显示为3D云，并提供单击各个图像以启动大视图的功能。我已经使用three.js在CSS3D中成功完成了这个操作，为每个缩略图创建了一个THREE.CSS3DObject，然后将缩略图附加为svg：image。
适用于最多~1200个缩略图，然后性能开始下降（非常低的FPS和长的加载时间）。当你点击2500缩略图时，它是无法使用的。理想情况下，我想使用超过10k的缩略图。
据我所知，通过将每个缩略图创建为具有纹理的WebGL网格，我将能够实现相同的结果。我是一个有三个.js的初学者，所以在我付出努力之前，我希望得到关于我是否可以期待性能更好的指导，还是我只是在浏览器中询问过多的3D？
答案 0 :(得分：2)
就渲染而言，CSS3应该相对可以渲染相当多的＆＃34;精灵＆＃34;。但10k可能太多了。
WebGL可能是一个更好的选择。你也可以关注进一步的优化，在atlas纹理中存储缩略图等......
但渲染只是其中的一部分。如果处理不当，事件处理可能是严重的瓶颈。
我不知道你如何处理鼠标时钟事件并转向全尺寸图像，但是将事件监听器附加到每个2.5k +对象可能不是一个好的选择。使用纯WebGL，您可以使用图像空间来检测被点击的对象。使用不同的id / color编码每个tile并使用它来确定单击的内容。我想，WebGL / CSS3D组合也可以使用这种方法。
要回答问题，WebGL应该处理10k罚款。如果您的矩形很大并且它们在屏幕上占据了相当大的数量，那么您可能需要考虑一些性能优化，但如果出现这个问题，可以采取相应措施。