javascript 一个场景，但具有自己的相机的多个视口（three.js）

One scene, but multiple viewports with their own camera (three.js)

提问by CL22

I have a scene that I'd like to reuse, rendering the scene in two divs with a different camera angle for each div.

我有一个我想重用的场景，在两个 div 中渲染场景，每个 div 使用不同的摄像机角度。

This linksays a scene cannot be shared between multiple renderers, and suggests using multiple viewports with a single renderer. How can I assign multiple cameras to a renderer, and then get the DOM element that each is displayed in?

此链接表示不能在多个渲染器之间共享场景，并建议在单个渲染器中使用多个视口。如何将多个摄像头分配给渲染器，然后获取显示每个摄像头的 DOM 元素？

Thanks

谢谢

回答by WestLangley

You want to do it exactly as in this three.js example:

你想完全按照这个 Three.js 例子来做：

http://mrdoob.github.com/three.js/examples/webgl_multiple_views.html

http://mrdoob.github.com/three.js/examples/webgl_multiple_views.html

This uses multiple viewports, not multiple divs. It really is the best way.

这使用多个视口，而不是多个 div。这确实是最好的方法。

回答by duane

I'd like to update this answer for 2018, as this is one of the top Google hits when looking for user examples.

我想在 2018 年更新这个答案，因为这是寻找用户示例时最热门的 Google 搜索之一。

This was fixed in this commit. With several examplesadded.

这已在此提交中修复。添加了几个示例。

Passing an existing scene to another renderer instance works as you would expect now.

将现有场景传递给另一个渲染器实例可以像您现在期望的那样工作。