WebGL Multiple Canvas three.js示例

Question

因此，我正在一个项目中使用多个不同的摄像机将场景渲染到不同的画布。本质上，我正在做这个例子：

http://threejs.org/examples/webgl_multiple_canvases_grid.html

我发现这样做的问题是，不同场景的剪切平面在边缘处确实有些奇怪。如示例所示，使用Big Objects可以很好，但是如果较小，则可以修剪一些边缘。我已经在下面举例说明了这个问题。

http://tinyurl.com/pjstjjd

我想知道是否有解决此问题的方法。我尝试尝试的几种不同方法如下：

• 尝试稍微重叠一下精巧机，使修剪平面更宽。
• 看看是否有任何方法可以关闭剪辑
• 哭自己入睡。

是我缺少的简单事物，还是我必须更深入地研究。

非常感谢您抽出宝贵的时间！以撒

Answer 1

问题是您正在创建 4 个App对象，并且在每个对象中创建不同的随机球体。所以你的 4 个视图在不同的地方有不同的球体集。如果您希望视图匹配，则必须将对象放置在每个应用程序中的相同位置。

我将此代码粘贴到示例中的第 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 台不同计算机上的多个显示器上分布渲染。

该图显示监视器是否尺寸不同且不在网格中。这个显示监视器是在圆形还是半圆形中。例如谷歌的Liquid Galaxy。

这个在单个画布中显示了多个视图，尽管在编写此答案时它看起来需要一些更新。

此图展示了使用一张大画布和用于绘制位置的占位符元素进行绘制