在webGL / three.js中禁用/启用webGL上下文

Question

我有一个带有three.js的很棒的项目，一切都按预期工作。 它在不同的画布中显示一些网格，这是我的问题。

该项目旨在展示许多画布，每个画布都有自己的上下文，并且达到了16个实时webGL上下文的致命限制。 由于它希望在页面中显示更多内容，因此我想通过在未实际显示在可见页面上的情况下禁用上下文来扭转这种限制。 当用户滚动时，上下文将被禁用/启用，因此我可以根据需要放置尽可能多的上下文。

我发现了这个函数： renderer.forceContextLoss() ，通过这个函数，我可以强制禁用上下文。 但是我没有发现任何可以重新启动的东西。 我设法检测到上下文丢失，但未检测到上下文丢失

如果您对我将如何实现有任何想法，请随时给我一些提示。

提前致谢 ！

Answer 1

这已经在其他地方讨论过了，但是使它看起来像有多个画布一样，最简单的方法是只使用three.js的一个实例，使其覆盖整个窗口，在要绘制事物的位置放置div占位符，然后使用element.getClientBoundingRect设置要在每个元素中绘制的每个场景的剪刀和视口

这里有一个例子 。

这是该示例起源于StackOverflow的答案

https://stackoverflow.com/a/30633132/128511

与使用多个画布相比，这将使用更少的内存，而每个画布将需要自己的数据，自己的着色器等。