在单个页面中显示三个 Three.js 的多个实例 [英] Display multiple instances of three.js in a single page

问题描述

我有一个网络应用程序，需要在不同的容器中显示多个 3D 对象.目前，我一直在实例化多个three.js渲染器，每个容器一个.但是，我收到此错误消息:警告:活动的 WebGL 上下文太多.最旧的上下文将丢失"，并且在大约 10 个渲染器之后我无法再打开.举个例子

I have a web app where I need to display multiple 3D objects in different containers. For the moment, I have been instantiating multiple three.js renderers, one per container. However, I get this error message: "WARNING: Too many active WebGL contexts. Oldest context will be lost" and after ~10 renderers I can't open any more. Here's an example

http://brainspell.org/article/24996404

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

How should I go to have multiple three.js containers in a single web page? Is it possible to have a single renderer with multiple scenes and draw each scene in a different container (a different renderer.domElement) ?

谢谢！

推荐答案

这个已经在别处介绍过了，但最简单的方法是只使用一个three.js的实例，让它覆盖整个窗口，把占位符div放在你的位置想画东西，然后用element.getClientBoundingRect在每个元素中设置你要画的每个场景的剪刀和视口

This has been covered elsewhere but the easiest way is to just use one instance of three.js, make it cover the entire window, put place holder divs where you want to draw things, and then use element.getClientBoundingRect to set the scissor and viewport for each scene you want to draw in each element

这里有一个例子.

这是该示例源自的 StackOverflow 中的答案

Here's the answer in StackOverflow from which that sample originates

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

这篇关于在单个页面中显示三个 Three.js 的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！