WebGL多画布three.js示例

Question

我正在开发一个项目，使用多个不同的相机将场景呈现到不同的画布上。基本上我在做这个例子：http://threejs.org/examples/webgl_multiple_canvases_grid.html 我发现这样做的问题是不同场景的剪切平面在边缘处会出现奇怪的情况。对于大型物体来说，就像示例显示的那样，这没问题，但是对于较小的物体，一些物体会在边缘处被剪切。我制作了一个展示此问题的示例，请参见下面的链接： http://tinyurl.com/pjstjjd 我想知道是否有任何方法可以解决这个问题。我将尝试探索几种不同的方法，如下所示：

• 尝试重叠渲染，以使剪切平面更宽。
• 查看是否有关闭剪切的方法。
• 哭着入睡。

是否有简单的方法我忽略了，或者我需要深入挖掘？

非常感谢您的时间！ Isaac

- Cabbibo

---

小小的请求，请不要使用tinyurl链接。这对于本网站的用户没有任何好处（点击就是点击），而且会混淆链接实际指向的位置。 - Basic

通常情况下100%同意！但这个问题是它链接到的网址太长了（像1595个字符那么长，对于评论来说就有点过分了），所以有些用处。你能想到其他分享链接的方式吗？（实际代码已经编码在URL中，因此不需要服务器端代码） - Cabbibo

您可以使用链接语法 [标题](网址)（最好是使用编辑器中的按钮，将URL移动到帖子末尾），这样当鼠标悬停时就可见，但不会使问题混乱。我承认我没有意识到链接如此之长。 - Basic

啊！太棒了。这两种技巧我都不知道！！！ - Cabbibo

Answer 1

问题在于你创建了4个App对象，每个对象都创建不同的随机球体。因此，你的4个视图中有不同的球体集合和不同的位置。如果你想让这些视图匹配，就必须将这些对象放置在每个App中的相同位置。

我把这段代码粘贴到了你示例的129行。

var randomSeed_ = 0;
var RANDOM_RANGE_ = Math.pow(2, 32);

Math.random = function() {
  return (randomSeed_ =
          (134775813 * randomSeed_ + 1) %
           RANDOM_RANGE_) / RANDOM_RANGE_;
};

由于 randomSeed_ 在每个应用程序中都从 0 开始，因此该函数是随机返回相同值的函数。

如果你最终想要实现什么，请提供更多信息。你提供的 Three.JS 示例旨在展示如何在网格中将渲染分散到 4 台不同机器上的多个监视器上。 这个示例展示了如果监视器大小不同且不在网格中。 这个示例展示了如果监视器在圆形或半圆形中。例如 Google 的 Liquid Galaxy。 这个示例展示了单个画布中的多个视图，不过在撰写本答案时似乎需要进行一些更新。 这个示例展示了使用一个大画布和占位符元素进行绘制。

- gman

---

好吧，我会制作一个新版本并查看它的效果！感谢您的及时回复。 - Cabbibo