在单个页面中显示three.js的多个实例

时间:2015-11-27 14:28:54

标签: javascript three.js webgl

我有一个网络应用程序,我需要在不同的容器中显示多个3D对象。目前,我已经实例化了多个three.js渲染器,每个容器一个。但是,我收到此错误消息:"警告:活动WebGL上下文太多。最古老的背景将会丢失"在大约10个渲染器后,我再也无法打开了。这是一个例子

http://brainspell.org/article/24996404

我应该如何在一个网页中拥有多个three.js容器?是否可以使用具有多个场景的单个渲染器并在不同的容器中绘制每个场景(不同的renderer.domElement)?

谢谢!

1 个答案:

答案 0 :(得分:5)

这已在其他地方介绍,但最简单的方法是只使用一个three.js实例,使其覆盖整个窗口,将地方持有者div放在要绘制内容的位置,然后使用element.getClientBoundingRect来为要在每个元素中绘制的每个场景设置剪刀和视口

There's an example here

以下是该示例源自的StackOverflow中的答案

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